Cross Browser Problem - IE can not find a dynamic form

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>

Apr 19 '06 #1

Subscribe Post Reply

3228

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>

Apr 19 '06 #2

Matt Kruse

ja****@gmail.com 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

Apr 19 '06 #3

RobG

ja****@gmail.com 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>

Apr 19 '06 #4

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>

Apr 19 '06 #5

RobG

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>

Apr 19 '06 #6

RobG

Matt Kruse said on 19/04/2006 1:20 PM AEST:

ja****@gmail.com 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>

Apr 19 '06 #7

jaxent

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>

Apr 19 '06 #8

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!

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.

Apr 19 '06 #9

RobG

ja****@gmail.com 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>

Apr 21 '06 #10

Matt Kruse

RobG wrote:

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?

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.

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

Apr 21 '06 #11

by: Ralph Freshour | last post by:

Is it possible to inhibit the browser Back/Fwd buttons via PHP? Thanks...

PHP

Cross-browser programming

by: Simba | last post by:

In some pages of my website I use a code like the following: for (var n = 0; n < getTagsArray("SPAN").length; n++){ //SPAN is just an example. I also use other tags tag =...

Javascript

Looking for a cross browser general css stylesheet

by: HchC | last post by:

Not looking for a special or fancy css stylesheet. For a HTML beginner, stylesheet is still far away from now. Not even said thinking about cross browser. But, an XHTML page without stylesheet look...

HTML / CSS

Cross-browser DHTML/JS Excel-like "GRID"

by: Questman | last post by:

Good afternoon, Does anyone have any code that implements, or approaches implementing, a cross-browser DHTML/JS solution to provide an Excel-like Grid on a web page - I'm trying to convert an...

Javascript

ASP.Net 2.0 vs. Safari Browser

by: Bill Cohagan | last post by:

I'm having some serious difficulties with my ASP.Net 2.0 app rendering in Safari 2.0.3. The most immediate problem is that the menu control doesn't seem to work at all, particularly the use of...

ASP.NET

Cross Browser?

by: CMM | last post by:

So I'm half way through overseeing a large project in ASP.NET 2.0. My superiors have decided that it would be nice if we ensured the site worked on all the major platforms (as they see it: IE,...

ASP.NET

Cross-browser problem | XML pagging

by: kaddison01 | last post by:

Hello all! I'm new to the community and am looking for some help. I'm working on a project which consists of an HTML wrapper w/ a data island for xml. I have an xsl transformation and a...

.NET Framework

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Cross Browser Problem - IE can not find a dynamic form

Similar topics