Help Required..

N

Naeem

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

Evertjan.

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"]
Click to expand...

You will have to show us the html too.
 
E

Elegie

Naeem wrote:

Hi,

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

document.forms[0] // simpler :)

myForm.removeChild(myForm.stateId);
Click to expand...
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"]
Click to expand...

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>

---
 
N

Naeem

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.FormTag</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.TextTag</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>
 
E

Elegie

Naeem said:
Thank you for response.
Following is the code of my HTML file.
Click to expand...

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.stateId);

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

ASM

Naeem a écrit :
Thank you for response.
Following is the code of my HTML file.
Click to expand...

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

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,
Click to expand...
Instead of
myForm.removeChild(myForm.stateId);
simply try
myForm.stateId.parentNode.removeChild(myForm.stateId);
Click to expand...

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.stateId);
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) ?
 
E

Elegie

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.
Click to expand...

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' ?
Click to expand...

Incorrect hypothesis, don't doubt the holy DOM !
Or does the DOM believes stateId is in a P (even if it isn't coded) ?
Click to expand...

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

Cheers, Elegie.
 
A

ASM

Elegie a écrit :
You were not far, however alerting myForm.stateId.parentNode.nodeName
would have given you the exact answer ;)
Click to expand...

done

it's a P

if we can no more believe what we read !
 
E

Elegie

ASM said:
done

it's a P

if we can no more believe what we read !
Click to expand...

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.nodeName)">
</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.nodeName)">
</form>
</body>
---

Anyway I guess you have your answer now :)


Cheers,
Elegie.
 
A

ASM

Elegie a écrit :
Nope if it tells you P then it's definitely P! I get BODY on IE6 on
Windows,
Click to expand...

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
 
N

Naeem

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
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

"Node was not found" error 1
Javascrip code wont run properly. 2
Need help , Having problem with Drag n Drop... 1
Help with my responsive home page 2
Need help with stripe payment 0
Only one table shows up with the information 2
Survey details won't go through using php, ajax, Mysql 0
Help - async/defer javascript ordering 13

Members online

No members online now.
Total: 25 (members: 1, guests: 24)
Robots: 165

Forum statistics

Threads
473,774
Messages
2,569,598
Members
45,151
Latest member
JaclynMarl

Latest Threads

Top