Cross Browser Problem - IE can not find a dynamic form

04-19-2006

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>

04-19-2006

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>

04-19-2006

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.

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"/">
--------------------------------^^

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");

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

[...]

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>

04-19-2006

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>

04-19-2006

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

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>

--
Matt Kruse
http://www.JavascriptToolbox.com
http://www.AjaxToolbox.com

04-19-2006

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

[...]

> var submit = document.createElement("input");
> submit.type="submit";
> submit.name="submit";

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

Same for reset.

[...]

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>

04-19-2006

Matt Kruse said on 19/04/2006 1:20 PM AEST:
> wrote:
>
>>Does anyone know why IE gives the error "'document.myForm.dummy' is
>>null or not an object" on the following page?
>
>
> 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:

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;

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>

04-19-2006

Thanks for all the help!

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

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>

04-19-2006

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!

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

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.

04-21-2006

said on 19/04/2006 3:50 PM AEST:
> Thanks for all the help!
>
>
>>>They reference the W3C DOM 1 createElement method, which infers that Microsoft's is standards compliant. Opinions on that may vary

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

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.

[...]

--
Rob
Group FAQ: <URL:http://www.jibbering.com/FAQ>

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
dynamic HTML cross-browser	Aaron Gervais	Javascript	3	07-18-2005 07:24 AM
cross-browser dynamic image resize	douglas.gennetten@hp.com	Javascript	1	04-11-2005 08:52 PM
Revised: A form -to- dynamic form -to- dynamic checkboxes	pizzy	Javascript	7	03-23-2005 10:53 PM
Dynamic Form with a Dynamic Form inside it...	pizzy	Javascript	4	03-18-2005 05:10 AM
Cross-browser compatible dynamic form: possible?	Marc Twain	Javascript	0	10-14-2003 12:27 PM