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?
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!');
$( '#formId field1Id, #formId field2Id' )
$('#form2 input') for all input fields, or $('#form2 input').filter('[name=name1], [name=name2]')#field1Id and #field2Id, and I'm not sure how that would behave with duplicated IDs.I prefer an id descendant selector of your #form2, like this:
$("#form2 #name").val("Hello World!");
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! ");
$('input[name=name]','#form2').val('Hello World!'); is translated, internally, by jQuery to $('#form2').find('input[name=name]').val('Hello World!') (see: jQuery API for details.)
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>
$("#name", '#form2').val("Hello World")
