Today I worked with two elements with same ids but in different forms, and found strange jquery selector engine behavior. Actually I can undrestand that, because by w3c you cant place two elements with same ids on same page.
Description: Two froms with element with same id in both of them, trying to use jquery selector to choose one of them like this $(“#formid #elemid”). Result will be null.
Example:
HTML:
<form id="form1" method="post" action="/">
<input type="text" class="inputtext" id="text1" name="text1" value=""/>
<input type="text" class="inputtext" id="text2" name="text2" value=""/>
<input type="text" class="button" id="btn1" value="press me"/>
</form><form id=”form2″ method=”post” action=”/”>
<input type=”text” class=”inputtext” id=”text1″ name=”text1″ value=””/>
<input type=”text” class=”inputtext” id=”text2″ name=”text3″ value=””/>
<input type=”text” class=”button” id=”btn2″ value=”press me2″/>
</form>
* This source code was highlighted with Source Code Highlighter.
Javascript:
$('#btn1').click(function() {
if (!$('#form1 #text1').val()) {
$('#form1 #text1').css('border','1px solid red');
}
if (!$('#form1 #text2').val()) {
$('#form1 #text2').css('border','1px solid red');
}
});$(‘#btn2’).click(function() {
if (!$(‘#form2 #text1’).val()) {
$(‘#form2 #text1’).css(‘border’,‘1px solid red’);
}
if (!$(‘#form2 #text2’).val()) {
$(‘#form2 #text4’).css(‘border’,‘1px solid red’);
}
});* This source code was highlighted with Source Code Highlighter.
I have grasped understanding/belief that one can’t have 2 DOM Node with the same ID in a HTML page.
Here’s the link I found while browsing…
http://www.456bereastreet.com/archive/200812/the_id_attributes_value_must_be_unique/
In this case you should use something like:
$(‘#elemid’,’#formid’)
this one I think is same as for jQuery 1.2
It’s good that jQuery returns null because the code is against standard.