473,287 Members | 3,253 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,287 software developers and data experts.

Help Required..

I have a Javascript function, which changes a text field of a form into
a select field. Following is the function

function changeStateField()
{

var myForm = document.getElementsByTagName("form")[0];

alert(myForm.stateId.value);
myForm.removeChild(myForm.stateId);

var stateSelect = document.createElement("select");
stateSelect.setAttribute("stateId2", "stateId");
myForm.insertBefore(stateSelect, myForm.countyId);
}

Function displays the correct value in alert. but on line 3
myForm.removeChild(myForm.stateId);
it gives following error. I am using Firefox.

Error: uncaught exception: [Exception... "Node was not found" code:
"8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)" location:
"http://localhost:8080/APP/premiseCatalog.do Line: 245"]

Your help will be greately appreciated.

Regards,
Naeem.

Nov 21 '06 #1
11 3962
Naeem wrote on 21 nov 2006 in comp.lang.javascript:
I have a Javascript function, which changes a text field of a form into
a select field. Following is the function

function changeStateField()
{

var myForm = document.getElementsByTagName("form")[0];

alert(myForm.stateId.value);
myForm.removeChild(myForm.stateId);

var stateSelect = document.createElement("select");
stateSelect.setAttribute("stateId2", "stateId");
myForm.insertBefore(stateSelect, myForm.countyId);
}

Function displays the correct value in alert. but on line 3
myForm.removeChild(myForm.stateId);
it gives following error. I am using Firefox.

Error: uncaught exception: [Exception... "Node was not found" code:
"8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)" location:
"http://localhost:8080/APP/premiseCatalog.do Line: 245"]
You will have to show us the html too.
--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Nov 21 '06 #2
Naeem wrote:

Hi,

var myForm = document.getElementsByTagName("form")[0];
document.forms[0] // simpler :)

myForm.removeChild(myForm.stateId);
Function displays the correct value in alert. but on line 3
myForm.removeChild(myForm.stateId);
it gives following error. I am using Firefox.

Error: uncaught exception: [Exception... "Node was not found" code:
"8" nsresult: "0x80530008 (NS_ERROR_DOM_NOT_FOUND_ERR)" location:
"http://localhost:8080/APP/premiseCatalog.do Line: 245"]
Firefox tells you that the node has not been found; as Evertjan said,
the problem lies with your HTML, the parent of your stateId element
probably being some other element than the form.
---

<head>
<script type="text/javascript">
var foo=(function(){
var cached_select=createElement(
"<select name='stateId'><option value='hello'>Hello<\/select>"
);

var cached_input=createElement(
"<input type='text' name='stateId'>"
);

function createElement(str) {
var div=document.createElement("div");
div.innerHTML=str;
return div.firstChild;
}

return function(form){
var el, type=form.stateId.nodeName.toLowerCase();
form.removeChild(form.stateId);
switch (type) {
case "input" : el=cached_select; break;
case "select" : el=cached_input; break;
}
form.insertBefore(el,form.firstChild);
}
})();
</script>
</head>

<body>
<form action="#">
<input type="text" name="stateId">
<input type="button" value="Toggle" onclick="foo(this.form)">
</form>
</body>

---
Nov 21 '06 #3
Thank you for response.
Following is the code of my HTML file.
================================================== ===================================
<%@ taglib uri="/WEB-INF/catalog.tld" prefix="catalog" %>
<%@ taglib uri="/WEB-INF/catalog-html.tld" prefix="html" %>
<%@taglib uri="/WEB-INF/c.tld" prefix="cd" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<HTML>

<HEAD>
<title>Premises </title>
<META http-equiv=Content-Type content="text/html;
charset=windows-1252">
<script language="JavaScript">

function changeStateField()
{

var myForm = document.getElementsByTagName("form")[0];

alert(myForm.stateId.value);
myForm.removeChild(myForm.stateId);

var stateSelect = document.createElement("select");
stateSelect.setAttribute("stateId2", "stateId");
myForm.insertBefore(stateSelect, myForm.countyId);
}
</script>

</HEAD>

<BODY >
<catalog:record bean="premise">
<catalog:data>
<table width="100%" border="0" cellpadding="1" cellspacing="0"
class="grayBG">
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="1"
class="whiteBG">
<tr>
<td colspan="2">

<table width="100%" height="20" border="0" cellpadding="0"
cellspacing="0" class="tablebhead">
<tr>
<td class="navBarBG" style="font-size: 8pt" width="33%">Premise
Details </td>
<td align="left" class="navBarBG" style="font-size: 8pt"
width="67%">
</td>
</tr>
</table>
</td>
</tr>
<!--Data Control s here-->

<tr class="dataEntry">
<td width="100%" valign="top">
<table width="100%" border="0" cellpadding="1" bgcolor =
"#EBF2F8" cellspacing="2">
<tr>
<TD class="fieldLabel" width="22%"Zip Code
<span class="ast">*</span></TD>
<td width="692"><html:text property="zip"
name="premise" maxlength="5" size="20" /></td>
</tr>
<tr>
<TD class="fieldLabel" width="22%"Select State
<span class="ast">*</span></TD>
<td>
<html:text property="stateId" name="premise" readonly="true"
maxlength="6" size="20" />
<input type="button" value="change"
onclick="changeStateField();"/>

</td>

</tr>

<tr>

</table>
</td>

</tr>
</table>
</td>
</tr>
</table>
</td>
</table>
</catalog:data>
</catalog:record>

</html:form>
</catalog:root>

</BODY>
</HTML>
================================================== ===================================

Following is the FORM and TEXT tags from catalog-html.tld
FORM TAG
=================
<name>form</name>
<tagclass>com.mycompany.datagrid.taglib.html.FormT ag</tagclass>
<bodycontent>JSP</bodycontent>
<attribute>
<name>action</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>enctype</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>

<attribute>
<name>onKeyUp</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>

<attribute>
<name>onClick</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>focus</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>focusIndex</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>method</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>name</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onreset</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onsubmit</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>scope</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>style</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>styleClass</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>styleId</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>target</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>type</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
</tag>
<tag>
================================================== ===================================
TEXT
================================================== ===================================
<name>text</name>
<tagclass>com.mycompany.datagrid.taglib.html.TextT ag</tagclass>
<attribute>
<name>accesskey</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>alt</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>altKey</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>disabled</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>indexed</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>maxlength</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>name</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onblur</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onchange</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onclick</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>ondblclick</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onfocus</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onkeydown</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onkeypress</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onkeyup</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onmousedown</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onmousemove</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onmouseout</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onmouseover</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>onmouseup</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>property</name>
<required>true</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>readonly</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>size</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>style</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>styleClass</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>styleId</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>tabindex</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>title</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>titleKey</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>value</name>
<required>false</required>
<rtexprvalue>true</rtexprvalue>
</attribute>
</tag>

Nov 21 '06 #4
Naeem wrote:
Thank you for response.
Following is the code of my HTML file.
What's that soup? What we meant was the processed HTML page (which you
can get using view-source), not the one to be generated using server
components - I don't even see the start FORM tag :)

Make sure your form is correctly built, that the elements have received
correct names; then it should go smoothly.

Anyway, you seem to have in mind the FORM hierarchy when calling DOM
methods. This is not the way it works, DOM methods work with nodes, in
your case the parent node of your (missing) input field would be the TD,
not the FORM.

Instead of
myForm.removeChild(myForm.stateId);
simply try
myForm.stateId.parentNode.removeChild(myForm.state Id);

Note that other DOM methods (insertBefore, appendChild) work with DOM
nodes as well, so you must identify the appropriate nodes on which the
DOM operation shall be performed, prior to the actual performing.

HTH.
Nov 21 '06 #5
ASM
Naeem a écrit :
Thank you for response.
Following is the code of my HTML file.
No no no thank you ! keep it by you !

I tested your function in a very simple context and yes :
uncaught exception: [Exception... "Node was not found"

.... nothing to do : error

As it would be impossible to remove an input ... :-(

But to remove the P containing the input it's OK !

function changeStateField(what){
var myForm = document.forms[0];
var target = document.getElementById('countyId');
var stateSelect = document.createElement("select");
var s = myForm.stateId.value;
var o = new Option(s,s);
stateSelect.options[stateSelect.length] = o;
stateSelect.setAttribute("id", "stateId2");
myForm.insertBefore(stateSelect,target);
alert(myForm.stateId.value); // see the new select and old input
myForm.removeChild(target);
}

<form>
<h2>title</h2>
<p id="countyId">
<input name="stateId" id="stateId" type=text value="123" />
<a href="#" onclick="changeStateField();return false;">select</a>
</p>
</form>

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Nov 21 '06 #6
ASM
Elegie a écrit :
>
Anyway, you seem to have in mind the FORM hierarchy when calling DOM
methods. This is not the way it works, DOM methods work with nodes,
Instead of
myForm.removeChild(myForm.stateId);
simply try
myForm.stateId.parentNode.removeChild(myForm.state Id);
I really don't understand.

Say :

<form>
<input name="stateId" id="stateId" type=text value="123" />
<p id="countyId">
<a href="#" onclick="changeStateField();return false;">select</a>
</p>
</form>

I think element input 'stateId' is a direct child of the form.

With myForm = document.forms[0]
Why
myForm.removeChild(myForm.stateId);
gives an error
while
myForm.stateId.parentNode.removeChild(myForm.state Id);
works fine ?

In other words, why 'myForm.stateId' could be seen as a DOM node
and not 'myForm' for which we have to use 'myForm.stateId.parentNode' ?
Or does the DOM believes stateId is in a P (even if it isn't coded) ?

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Nov 21 '06 #7
ASM wrote:

Hey,
Say :

<form>
<input name="stateId" id="stateId" type=text value="123" />
<p id="countyId">
<a href="#" onclick="changeStateField();return false;">select</a>
</p>
</form>

I think element input 'stateId' is a direct child of the form.
That is indeed what one might think as first, however... the way FORM
and FORM elements are created by user agents have been demonstrated to
be quite 'unexpected' when the HTML is malformed :p

In this example, not providing explicit BODY tags makes IE (and probably
other browsers) believe the INPUT element is child of the BODY, not of
the FORM.
In other words, why 'myForm.stateId' could be seen as a DOM node
and not 'myForm' for which we have to use 'myForm.stateId.parentNode' ?
Incorrect hypothesis, don't doubt the holy DOM !
Or does the DOM believes stateId is in a P (even if it isn't coded) ?
You were not far, however alerting myForm.stateId.parentNode.nodeName
would have given you the exact answer ;)

Cheers, Elegie.

Nov 21 '06 #8
ASM
Elegie a écrit :
ASM wrote:
>>
<form>
<input name="stateId" id="stateId" type=text value="123" />
<p id="countyId">
<a href="#" onclick="changeStateField();return false;">select</a>
</p>
</form>

Or does the DOM believes stateId is in a P (even if it isn't coded) ?

You were not far, however alerting myForm.stateId.parentNode.nodeName
would have given you the exact answer ;)
done

it's a P

if we can no more believe what we read !

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Nov 21 '06 #9
ASM wrote:
done

it's a P

if we can no more believe what we read !
Nope if it tells you P then it's definitely P! I get BODY on IE6 on
Windows, however other browsers on other platforms may differ. Have you
tried with a well-formed (or let us say, better-formed) HTML document?
The parent should then be FORM.
--- yields BODY on IE6, Windows ---
<form>
<input name="stateId" id="stateId" type=text value="123">
<input type="button"
value="Parent?"
onclick="alert(this.form.stateId.parentNode.nodeNa me)">
</form>
---
--- yields FORM on IE6, Windows ---
<body>
<form>
<input name="stateId" id="stateId" type=text value="123">
<input type="button"
value="Parent?"
onclick="alert(this.form.stateId.parentNode.nodeNa me)">
</form>
</body>
---

Anyway I guess you have your answer now :)
Cheers,
Elegie.
Nov 22 '06 #10
ASM
Elegie a écrit :
ASM wrote:
>done

it's a P

if we can no more believe what we read !

Nope if it tells you P then it's definitely P! I get BODY on IE6 on
Windows,
In my test the form is in a "normal" page in HTML3.1
Well or bad formed will be to ask to Claris HomePage 3 :-)

Asked view source to Firefox ...
tremendous ! CWK did put the input in a P :-(

I knew to have to do not use CWK and its automatic correction.

The form now in a page with doctype and so on is now correctly seen as a
parentNode of the input.

Test with a reduced page (no doctype, head nor body) runs fine with
IE 5.2, FF 2, iCab 3, Safari 1.3.2, Opera 9.0

Was only noise ... :-(

Anyway, not lost my time, I get bellow a new light about IE Win
--- yields BODY on IE6, Windows ---
<form>
<input name="stateId" id="stateId" type=text value="123">
<input type="button"
value="Parent?"
onclick="alert(this.form.stateId.parentNode.nodeNa me)">
</form>
---
--- yields FORM on IE6, Windows ---
<body>
<form>
<input name="stateId" id="stateId" type=text value="123">
<input type="button"
value="Parent?"
onclick="alert(this.form.stateId.parentNode.nodeNa me)">
</form>
</body>
---

--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
Nov 22 '06 #11
I have solved the problem. This was due to discusstion between ASM and
Elegie...Thank you guys...Thank you Evertjan to you as well.
Regards,
Naeem

Nov 22 '06 #12

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

6
by: mike | last post by:
Hello, After trying to validate this page for a couple of days now I was wondering if someone might be able to help me out. Below is a list of snippets where I am having the errors. 1. Line 334,...
4
by: Mike | last post by:
Please help this is driving me nuts. I have 2 forms, 1 user class and I am trying to implement a singleton class. Form 1 should create a user object and populate some properties in user. Form2...
0
by: Vish | last post by:
I am trying to use xmldatadocument to load an xml file.The xml has the data as attributes, the datadocument is able to successfully parse the document into the tables and shows the right column...
3
by: Tim::.. | last post by:
Can someone please help.... I'm having major issues with a user control I'm tring to create! I an trying to execute a sub called UploadData() from a user control which I managed to do but for...
2
by: John Regan | last post by:
Hello All I am trying to find the owner of a file or folder on our network (Windows 2000 Server) using VB.Net and/or API. so I can search for Folders that don't follow our company's specified...
6
by: cj | last post by:
Lets just take this example I'm looking at now. I'm looking at the help screen titled .NET Framework Class Library FolderBrowserDialog Class . It gives an example at the bottom that begins with:...
5
by: Dennis Fazekas | last post by:
Greetings, I am creating a web form which will all the user to add an unlimited number of email addresses. Basically I have 3 buttons, "Add Another Email", "-" to remove, and a "Save" button....
36
by: aljamala | last post by:
Hi, I keep getting this warning on a page, but I do not know what the problem is...does anyone have an idea about what could be wrong? line 88 column 7 - Warning: missing </formbefore <td> it...
5
by: forest demon | last post by:
i'm trying to create a .xsd file to validate the XML below(just a small snippet). i've tried a number of things and can come close, but i can't quite get it to do what i want. i'm able to...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: marcoviolo | last post by:
Dear all, I would like to implement on my worksheet an vlookup dynamic , that consider a change of pivot excel via win32com, from an external excel (without open it) and save the new file into a...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.