Question

I have a hidden input field on a page

<div id="SomeDiv">
    <input type="text" name="ID" id="ID" value="Something"/>
</div>

If i use $(“#SomeDiv #ID”).val() in IE9 i get the value “Something” but in IE6 i’m getting undefined. If i change the id and name to lower case IE6 returns correctly. I.e.

<div id="SomeDiv">
    <input type="text" name="id" id="id" value="Something"/>
</div>

Then $("#SomeDiv #id").val(). Notice I’ve not changed the case on the div id, only the input.

Anybody else come across this and a possible work around? Client is using IE6 so switching browser is not an option and I keep coming across this.

Update :

I’ve changed the id value from just “ID” to “WizardID” and it works in IE6

<div id="SomeDiv">
    <input type="text" name="WizardID" id="WizardID" value="Something"/>
</div>

$("#SomeDiv #WizardID").val()

I’ve also come across this issue with a field called “IsValid” IE6 cannot find the field at all but if i rename it “isValid” bam its found. I suspect its a bug with jquery but doubt it will be fixed as IE6 is long past it. Thanks for the help.

Answer 1

You should change the html if possible:

In Internet Explorer, if you’re trying to target an element using
getElementById, for some reason that browser will search the name
attribute of certain elements on the page, in addition to the id.

Using id=”id” can also trigger a bunch of other IE issues.