80

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?

gsamaras
  • 71,951
  • 46
  • 188
  • 305
Awan
  • 18,096
  • 36
  • 89
  • 131

5 Answers5

152

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!');
Kobi
  • 135,331
  • 41
  • 252
  • 292
  • +1 Thanks. One more thing, What if I want to select two fields of a specific form using multiple selector. – Awan Dec 08 '10 at 12:25
  • 4
    `$( '#formId field1Id, #formId field2Id' )` – charliegriefer Dec 08 '10 at 12:27
  • 3
    @Awan - Another option is `$('#form2 input')` for all input fields, or `$('#form2 input').filter('[name=name1], [name=name2]')` – Kobi Dec 08 '10 at 12:27
  • @charliegriefer - of course, you'll need `#field1Id` and `#field2Id`, and I'm not sure how that would behave with duplicated IDs. – Kobi Dec 08 '10 at 12:31
  • @Kobi d'oH! You're absolutely correct. I forgot the hashes. Editing now :) Regarding the duplicate IDs, I thought the question was generic, and not specific to this particular example of invalid markup :) – charliegriefer Dec 08 '10 at 12:32
  • Well, if the ID is unique, you don't really care in which form it is `:)`. But it is common enough to write scripts for existing pages, so this issue does come up. – Kobi Dec 08 '10 at 12:34
  • Good point on the ID. It's 5:30am. I should probably stop trying to answer questions and hit the sack. I blame sleep depravation :) – charliegriefer Dec 08 '10 at 12:38
  • with many elements use $("#form2").find("#id1,#Id2#id3") if they are not direct childrens of form2, or $("#form2").children("#id1,#Id2#id3") if they are – jefissu May 25 '17 at 18:57
13

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

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

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

Marcos Alexandre Sedrez
  • 537
  • 3
  • 13
9

although it is invalid html but you can use selector context to limit your selector in your case it would be like :

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

http://api.jquery.com/jquery/#selector-context

Piotr Kula
  • 9,597
  • 8
  • 59
  • 85
tawfekov
  • 5,084
  • 3
  • 28
  • 51
  • 4
    It's worth noting that `$('input[name=name]','#form2').val('Hello World!');` is translated, internally, by jQuery to `$('#form2').find('input[name=name]').val('Hello World!')` (see: [jQuery API](http://api.jquery.com/jquery/) for details.) – David Thomas Dec 08 '10 at 12:40
  • You forgot the quotation marks in the name part- With out them i get a syntax error – Piotr Kula Nov 16 '13 at 11:07
3

I know the question is about setting a input but just in case if you want to set a combobox then (I search net for it and didn't find anything and this place seems a right place to guide others)

If you had a form with ID attribute set (e.g. frm1) and you wanted to set a specific specific combobox, with no ID set but name attribute set (e.g. district); then use 

$("#frm1 select[name='district'] option[value='NWFP']").attr('selected', true);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <form id="frm1">
        <select name="district">
            <option value="" disabled="" selected="" hidden="">Area ...</option>
            <option value="NWFP">NWFP</option>
            <option value="FATA">FATA</option>
        </select>
    </form>
Adeel Raza Azeemi
  • 571
  • 5
  • 16
-2
$("#name", '#form2').val("Hello World")
ѕтƒ
  • 3,547
  • 10
  • 47
  • 78
bbbbb
  • 1