How to select specific form element in jQuery?

Question

I have two form like this:

<form id='form1' name='form1'>   <input name='name' id='name'>   <input name='name2' id='name2'> </form>  <form id='form2' name='form2'>   <input name='name' id='name'>   <input name='name2' id='name2'> </form> 

Now I want to insert text in name field of form2. I am using following jQuery code but it fill name field of form1.

$("#name").val('Hello World!'); 

So how to select specific form elements only?

Answer 1

It isn't valid to have the same ID twice, that's why #name only finds the first one.

You can try:

$("#form2 input").val('Hello World!'); 

Or,

$("#form2 input[name=name]").val('Hello World!'); 

If you're stuck with an invalid page and want to select all #names, you can use the attribute selector on the id:

$("input[id=name]").val('Hello World!'); 

Answer 2

I prefer an id descendant selector of your #form2, like this:

$("#form2 #name").val("Hello World!"); 

http://api.jquery.com/descendant-selector/