jQuery – Avoid duplicate element’s IDs

If the input element has an ID and it is duplicate with another element, it’s likely cause an error. In this case, Firefox 3.5 and IE8 on Windows Vista has no problem while same browsers in Windows XP does not work.

Problem

</p> <form id="myform"> <input name="action" id="action" value="doSomething"><br /> …<br /> </form> <form id="anotherform"> <input name="action" id="action" value="doSomethingElse"><br /> …<br /> </form> <p>…<br /> $(“#myform #action”).val();<br />

That works in Vista and Mac OSX but not XP. It’s rather weird it’s a problem that depends on the OS and not the browser. Anyway, it’s a mistake and duplicate IDs should always be avoid.

Solution

</p> <form id="myform"> <input name="action" value="doSomething"><br /> …<br /> </form> <p>…<br /> $(“#myform input[name=’action’]”).val();<br />