Cross Browser Problem - IE can not find a dynamic form

J

jaxent

Does anyone know why IE gives the error "'document.myForm.dummy' is
null or not an object" on the following page? Firefox does what I
expect, creates a text box and writes "hello" in it.

<html>
<head>
<SCRIPT type="text/javascript"/">
function createForm(){

var divEle = document.getElementById("putHere");
var formEle = document.createElement("form");
formEle.setAttribute("name", "myForm");
formEle.setAttribute("method", "post");
formEle.setAttribute("action", "page.jsp");
divEle.appendChild(formEle);

var dummyEle = document.createElement("input");
dummyEle.setAttribute("type", "text");
dummyEle.setAttribute("name", "dummy");
formEle.appendChild(dummyEle);

}
</script>
</head>
<body>
<div id="putHere"></div>
<script type="text/javascript">
createForm();
document.myForm.dummy.value = "hello";
</script>
</body>
</html>
 
J

jaxent

BTW: It works if the form is not dynamicly created.

<html>
<head>
</head>
<body>
<form name="myForm">
<input type="text" name="dummy">
</form>
<script type="text/javascript">
document.myForm.dummy.value="hello";
</script>
</body>
</html>
 
R

RobG

(e-mail address removed) said on 19/04/2006 10:47 AM AEST:
Does anyone know why IE gives the error "'document.myForm.dummy' is
null or not an object" on the following page? Firefox does what I
expect, creates a text box and writes "hello" in it.
Click to expand...

Because IE is broken, it doesn't let you add a name attribute to a
dynamically generated form for some absurd reason. See below.

<html>
<head>
<SCRIPT type="text/javascript"/">
Click to expand...
--------------------------------^^

An HTML markup error that doesn't seem to affect the outcome.

function createForm(){

var divEle = document.getElementById("putHere");
var formEle = document.createElement("form");
formEle.setAttribute("name", "myForm");
Click to expand...

You can add an ID, then use the fully specified property name:

alert( typeof document.forms['myForm'] );


Same for the input element.

Rather than setAttribute, which is broken in IE for some situations,
access properties directly (non-standard but better supported):

formEle.name = "myForm";
formEle.id = "myForm";

...

dummyEle.name = "dummy";
dummyEle.id = "dummy";


Saves on typing too. :)

Now you put the value into the input using:

document.forms['myForm'].elements['dummy'].value = "hello";


[...]
 
J

Jim

Hi,
Can't answer your exact question as to "why does ie do this?" but can
offer a resolution to the problem. IE does not reference the form by
name, but it will reference it thusly:
document.forms[0].elements[0].value = "blah";

Also, I had a different way of adding attribute values to the newly
created elements.
Here's my version:

function createForm(){
var target_div= document.getElementById("putHere");
var form = document.createElement("form");
form.name="myform";
form.method="get";
form.action="http://www.yahoo.com";
target_div.appendChild(form);

var input = document.createElement("input");
input.type="text";
input.name="dummy";
form.appendChild(input);

var submit = document.createElement("input");
submit.type="submit";
submit.name="submit";
submit.value="Submit This Form";
form.appendChild(submit);

var reset = document.createElement("input");
reset.type="reset";
reset.name="reset";
reset.value="Reset This Form";
form.appendChild(reset);
document.forms[0].elements[0].value="hi there";
}
</script>
 
M

Matt Kruse

Does anyone know why IE gives the error "'document.myForm.dummy' is
null or not an object" on the following page?
Click to expand...

I've never investigated far enough to figure out the real root cause of this
problem in IE. But IE definitely does have problems accessing
dynamically-created inputs by name. Also, see the example below, which
illustrates that changing an input's name doesn't make it available under
the new name, but it is still available under the old name:

<form action="/">
<input name="test">
</form>
<script type="text/javascript">
var i = document.forms[0].elements['test'];
alert(i);
i.name = "junk";
alert(i.name);
alert(document.forms[0].elements['junk']);
alert(document.forms[0].elements['test']);
</script>
 
R

RobG

Jim said on 19/04/2006 1:15 PM AEST:

[...]
var submit = document.createElement("input");
submit.type="submit";
submit.name="submit";
Click to expand...

Don't give a form control a name of 'submit' as it will mask the form's
submit method. About the only reason to give a button a name is if you
have multiple submit buttons. Otherwise, there is usually no reason to
give a button a name, so don't.

submit.value="Submit This Form";
form.appendChild(submit);

var reset = document.createElement("input");
reset.type="reset";
reset.name="reset";
Click to expand...

Same for reset.

[...]
 
R

RobG

Matt Kruse said on 19/04/2006 1:20 PM AEST:
I've never investigated far enough to figure out the real root cause of this
problem in IE. But IE definitely does have problems accessing
dynamically-created inputs by name. Also, see the example below, which
illustrates that changing an input's name doesn't make it available under
the new name, but it is still available under the old name:
Click to expand...

From MSDN:

"The NAME attribute cannot be set at run time on elements
dynamically created with the createElement method. To create
an element with a name attribute, include the attribute and
value when using the createElement method."


<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/name_2.asp>

Microsoft gives the following example of a createElement statement
(excuse wrapping):

var newRadioButton = document.createElement("<INPUT TYPE='RADIO'
NAME='RADIOTEST' VALUE='First Choice'>")

<URL:http://msdn.microsoft.com/workshop/author/dhtml/reference/methods/createelement.asp>


They reference the W3C DOM 1 createElement method, which infers that
Microsoft's is standards compliant. Opinions on that may vary ;-)

If you attempt to add or modify the name attribute of an element in IE
using script, you can look at the generated source using innerHTML and
see that it isn't added or modified.

You can add/modify the ID attribute, but then you can only access it
using strictly formal syntax:

document.forms[formName].elements[elementName];


or less strict:

document.forms.formName.elements.elementName;


but not "loose":

document.formName.elementName;
 
J

jaxent

Thanks for all the help!

In another life I had to get into standards translation arguements
with Microsoft, now I only have to work around the fact they drink
decaf espresso (miss the point entirely). Pass in markup for it to be
parsed and then create an element, I guess that would must obvious way
to do it. :)

Anyway, Firefox 1.0.7 chocks on that kin way of of calling
createElement. So here is a copy that works. Hope it helps somebody
else get passed this.

<html>
<head>
<SCRIPT type="text/javascript"/">
var isIE = false;
if (navigator.appName.match("Microsoft*")){
isIE = true;
}

function createForm(){

var divEle = document.getElementById("putHere");
var formEle = null;
if(isIE){
formEle = document.createElement("<form name='myForm'>");
}else{
formEle = document.createElement("form");
formEle.name = "myForm"
}
formEle.method = "post";
formEle.action = "page.jsp";
divEle.appendChild(formEle);

var dummyEle = null
if(isIE){
dummyEle = document.createElement("<input name='dummy'>");
}else{
dummyEle = document.createElement("input");
dummyEle.name = "dummy";
}
dummyEle.type = "text";
dummyEle.name = "dummy";
formEle.appendChild(dummyEle);

}
</script>
</head>
<body>
<div id="putHere"></div>
<script type="text/javascript">
createForm();
document.myForm.dummy.value = "hello";
</script>
</body>
</html>
 
J

jaxent

Wow, I didn't think I worked that late. Late enough to fry the verbal
center of my brain I guess. Translation to real english follows:

Thanks for all the help!

In another life I had to get into standards translation arguments
with Microsoft, now I only have to work around the fact they drink
decaf espresso (miss the point entirely). Pass in markup to be parsed
and then create an element, I guess that would be the most obvious way
to do it. :)

Anyway, Firefox 1.0.7 chokes on that keen way of calling
createElement. So here is a copy that works. Hope this helps somebody
else get past this problem.
 
R

RobG

(e-mail address removed) said on 19/04/2006 3:50 PM AEST:
Thanks for all the help!



Pass in markup for it to be
parsed and then create an element, I guess that would must obvious way
to do it. :)

Anyway, Firefox 1.0.7 chocks on that kin way of of calling
createElement. So here is a copy that works. Hope it helps somebody
else get passed this. [...]
<SCRIPT type="text/javascript"/">
var isIE = false;
if (navigator.appName.match("Microsoft*")){
isIE = true;
Click to expand...

I was about to admonish you for choosing the worst way to fix the
problem and suggest that you clone existing elements (say create dummy
elements specifically created for that purpose in the source HTML and
placed within a div with style=display:none).

But guess what? You can't set or modify the name of a cloned element
either. Wonder if that will be fixed in IE 7?

Silly thing is, the name property is modified but only within the scope
of the function creating the element. As soon as the function ends, the
name reverts to whatever it was when the element was created/cloned.

I still think sniffing IE is a very bad idea, maybe you should test for
outerHTML and, if available, use that to set the name - otherwise just
set the property as usual.

[...]
 
M

Matt Kruse

RobG said:
But guess what? You can't set or modify the name of a cloned element
either. Wonder if that will be fixed in IE 7?
Click to expand...

This should be made clear - you _can_ modify the name. When you submit, it
will be submitted under the new name. But you just can't access the element
via javascript using the new name.
 

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

Image upload not working in browser 4
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Can someone pls help me with a little algorithm script 1
Php modal form to email 1
Registration Form 7
HTML form to csv file on server 1
About as basic "Newbie-Question" that you can get. 3
Form won't go to "thank you" page when submitted. 17

Members online

No members online now.
Total: 243 (members: 2, guests: 241)
Robots: 286

Forum statistics

Threads
474,432
Messages
2,571,682
Members
48,796
Latest member
Greg L.

Latest Threads

Top