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.

Naeem wrote on 21 nov 2006 in comp.lang.javascript:

Quote:

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)

Naeem wrote:

Hi,

Quote:

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

document.forms[0] // simpler :)

Quote:

myForm.removeChild(myForm.stateId);

Quote:

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>

---

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>


<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>

Naeem wrote:

Quote:

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.

Naeem a écrit :

Quote:

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

Elegie a écrit :

Quote:

>
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,

Quote:

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

ASM wrote:

Hey,

Quote:

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.

Quote:

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 !

Quote:

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.

Elegie a écrit :

Quote:

ASM wrote:

Quote:

>>
><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

ASM wrote:

Quote:

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.

Elegie a écrit :

Quote:

ASM wrote:
>

Quote:

>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

Quote:

--- 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

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

Help Required..

re: Help Required..

re: Help Required..

re: Help Required..

re: Help Required..

re: Help Required..

re: Help Required..

re: Help Required..

re: Help Required..

re: Help Required..

re: Help Required..

re: Help Required..

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/about