IE 10: cannot get elements with name composed with only digit

Question

IE 10: cannot get elements with name composed with only digit

554 Views Asked by Alberto At 17 April 2025 at 14:32

I have this problem with IE 10. I have this code inside a form in an HTML page:

<input type='hidden' name='X123' />
<input type='hidden' name='123' />
<input type='hidden' name='00123' />

If I run this JS command:

document.forms['MyForm'].elements[name];

where name are the names of the inputs, I can get only the first ('X123'). In the other two cases the function returns undefined. I tested it on IE 10 and Firefox. On Firefox works. However, it has to run under IE. This is a MWE:

<html><head><script type='text/javascript'>
function println(text) {
    document.getElementById('output').innerHTML += '<p>' + text + '</p>';
}
function test() {
    println('X123 = '  + document.forms['MyForm'].elements['X123']);
    println('123 = '   + document.forms['MyForm'].elements['123']);
    println('00123 = ' + document.forms['MyForm'].elements['00123']);
}
</script></head><body onload='test();'><form name='MyForm'>
<input type='hidden' name='X123' />
<input type='hidden' name='123' />
<input type='hidden' name='00123' />
</form><div id='output'></div></body></html>

I need to know if this is a known behavior of IE.

A better explanation: I bump into this problem at work. I made the HTML you see just to replicate the problem (it is not a tutorial). I know I can use jQuery or other methods to get the elements by name, but I need to know if this is a known behavior of IE because I can't find anything about on the net.

Original Q&A

There are 3 best solutions below

Alex On 23 June 2015 at 10:34

I would suggest you to avoid using names or IDs that start with numbers, as the HTML4 specification says.

You may solve this problem by pre-pending something to the name, e.g:

name="123"  -->  name="whatever-123"

Simba On 23 June 2015 at 10:56

Your code:

document.forms['MyForm'].elements[name];

The reason this is a problem with numeric names is because .elements can be referenced as a collection -- ie with numeric references to get the fields in sequence -- as well as with names.

Therefore, giving it a numeric name means that it gets confused as to whether you mean the element named '123' or the 123rd element in the form. You mean the former, but it tries to give you the latter.

The solution is simple: just add an alphabetic prefix to them.

**T.J. Crowder** · Accepted Answer

I need to know if this is a known behavior of IE.

Not just IE; that code doesn't work on Chrome or Firefox either, for the 123 element. Grundy seems to have found the relevant info about why, which is that all-digits names cause confusion with index-based access, and so aren't available by name.

...and if exists a workaround.

Yes, you can use querySelector instead (available on all modern browsers, and also IE8). I don't have IE10 handy, but it works for me on IE8, IE9, IE11, Chrome, and Firefox (the original code doesn't work in any of them) so I'd say it almost certainly works on IE10 as well:

println('X123 = '  + document.forms['MyForm'].querySelector('[name="X123"]'));
println('123 = '   + document.forms['MyForm'].querySelector('[name="123"]'));
println('00123 = ' + document.forms['MyForm'].querySelector('[name="00123"]'));

Note that the quotes around the values in [name="value"] are important, because otherwise the ones starting with digits are a CSS syntax error.

Live Example:

function println(text) {
    document.getElementById('output').innerHTML += '<p>' + text + '</p>';
}
function test() {
    println('X123 = '  + document.forms['MyForm'].querySelector('[name="X123"]'));
    println('123 = '   + document.forms['MyForm'].querySelector('[name="123"]'));
    println('00123 = ' + document.forms['MyForm'].querySelector('[name="00123"]'));
}
test();

<form name='MyForm'>
<input type='hidden' name='X123' value="X123 value"/>
<input type='hidden' name='123' value="123 value"/>
<input type='hidden' name='00123' value="00123 value" />
</form><div id='output'></div>

And if you want their values:

println('X123 = '  + document.forms['MyForm'].querySelector('[name="X123"]']).value);
println('123 = '   + document.forms['MyForm'].querySelector('[name="123"]']).value);
println('00123 = ' + document.forms['MyForm'].querySelector('[name="00123"]']).value);

function println(text) {
    document.getElementById('output').innerHTML += '<p>' + text + '</p>';
}
function test() {
    println('X123 = '  + document.forms['MyForm'].querySelector('[name="X123"]').value);
    println('123 = '   + document.forms['MyForm'].querySelector('[name="123"]').value);
    println('00123 = ' + document.forms['MyForm'].querySelector('[name="00123"]').value);
}
test();

<form name='MyForm'>
<input type='hidden' name='X123' value="X123 value"/>
<input type='hidden' name='123' value="123 value"/>
<input type='hidden' name='00123' value="00123 value" />
</form><div id='output'></div>

IE 10: cannot get elements with name composed with only digit

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in INTERNET-EXPLORER

Related Questions in INTERNET-EXPLORER-10

Trending Questions

Popular # Hahtags

Popular Questions