How to get input element value by its index number

Question

I have 3 input with same id how to get the 2nd input value for example? I use eq() and nth-child(), doesn't work

console.log($("#txtItemQuantity:eq(2)").val());

Note: I want to use id as the identifier, not class

HTML

<div class="masterItem">
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span><input id="txtItemName" class="form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span><input id="txtItemQuantity" class="form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span><input id="txtItemName" class="form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span><input id="txtItemQuantity" class="form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span><input id="txtItemName" class="form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span><input id="txtItemQuantity" class="form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
</div>

`i have 3 input with same id` Id should always be unique. Use data-id instead. — gurvinder372, Mar 29 '16 at 10:14
`console.log($("input:eq(2)").val());` But `ID must be unique` — Rayon, Mar 29 '16 at 10:15
If your id is not unique your HTML is invalid. This will likely break jquery and any CSS3. Fix your HTML first. — Liam, Mar 29 '16 at 10:21
@asdf_enel_hak thank you, appreciated. i wont submit a stupid question if i know the answer, i still learning jquery from zero... don't know why someone downvote my question. — akauts, Mar 29 '16 at 10:22
@akauts Because you are asking invalid and obvious concept in jquery — asdf_enel_hak, Mar 29 '16 at 10:24
@FrayneKonok html updated, please what is the proper way to get the 2nd #txtItemQuantity — akauts, Mar 29 '16 at 10:29
@akauts, checkout me in [answer](http://stackoverflow.com/questions/36281385/how-to-get-input-element-value-by-its-index-number/36281657#36281657) — Murad Hasan, Mar 29 '16 at 10:29

score 2 · Answer 1 · edited May 23 '17 at 11:59

Nobody is providing the correct solution here. Your underlying issue is your invalid markup. No two elements in your HTML should have the same id. To do so breaks the W3C conventions and will produce unpredictable results. Not just here but in other things too.

Change your markup so that the id is unique and add a class, then select by this:

<div class="masterItem">
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span>
                    <input id="txtItemName1" class="txtItemName form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
                   <input id="txtItemQuantity1" class="txtItemQuantity form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span>
                         <input id="txtItemName2" class="txtItemName form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
                         <input id="txtItemQuantity2" class="txtItemQuantity form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
    <div class="row oItem">
        <div class="col-md-2">
            <div class="form-group">
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Name</span>
                          <input id="txtItemName3" class="txtItemName form-control" placeholder="Name" aria-describedby="basic-addon1" type="text"></div>
                <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
                        <input id="txtItemQuantity3" class="txtItemQuantity form-control" placeholder="Quantity" aria-describedby="basic-addon1" type="text"></div>
            </div>
        </div>
    </div>
</div>

shortened:

<input id="txtItemName1" class="txtItemName form-control" type="text">

now just tweak your jquery selector (from your original question) to use the class selector (.) not the id selector (#).

console.log($(".txtItemQuantity:eq(2)").val());

FYI, because you have not provided names and because your input's share the same id the results posted back (when the form is posted) will also be unpredictable. Fix your underlying issue!

Rino Raj · Accepted Answer · 2016-03-29T10:29:34.877

1

ID must be unique. It cannot repeat.

You can select using attribute id, like

$('[id="txtItemQuantity"]').eq('1')

Working Demo

alert($('[id="txtItemQuantity"]').eq('1').val())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input tpye="text" id="txtItemQuantity" value="1">
<input tpye="text" id="txtItemQuantity" value="2">
<input tpye="text" id="txtItemQuantity" value="3">

edited Mar 29 '16 at 10:29

answered Mar 29 '16 at 10:22

Rino Raj

6,264
2
27
42

Always glad to help. – Rino Raj Mar 29 '16 at 10:37
is it wrong if i insist to use id than class in this case, apparently it still has a solution? thank you again for your excellent solution Sir. – akauts Mar 29 '16 at 10:39
And my function to load array work like a charm! thank you sir. $.each(e.vntret,function(a,b){$('[id="txtItemQuantity"]').eq(a).val(b.item_qtyorder); }); – akauts Mar 29 '16 at 10:42
1

Yes. it is always good to use a class where ever you are compelled to use same Id. If you are changing it to Id you can modify my answer like `$('[class="txtItemQuantity"]').eq('1')` – Rino Raj Mar 29 '16 at 10:42
2

looping using `.each()` is also fine – Rino Raj Mar 29 '16 at 10:43
this **still** has invalid markup. Just because you can work around the invalid markup doesn't mean you should. – Liam Mar 29 '16 at 12:13

madalinivascu · Answer 3 · 2016-03-29T11:19:10.827

0

Try this:

console.log($("[id^=txtItemQuantity]").eq(1).val());

edited Mar 29 '16 at 11:19

answered Mar 29 '16 at 10:22

madalinivascu

32,064
4
39
55

`eq` always start with 0 index, so you have to use eq(1) for getting the second input of quantity. – Murad Hasan Mar 29 '16 at 11:14
Now its fine, and looks great. – Murad Hasan Mar 30 '16 at 03:17

Murad Hasan · Answer 4 · 2016-03-29T10:43:15.263

0

jsfiddle link goes here

updated fiddle link with your HTML link

HTML

<div id="txtItemQuantity">
  <input value="1">
  <input value="2">
  <input value="3">
</div>

jQuery:

var res = $("#txtItemQuantity input:nth-child(2)").val();
alert(res); // result 2

edited Mar 29 '16 at 10:43

answered Mar 29 '16 at 10:26

Murad Hasan

9,565
2
21
42

thanks, i saw this in jquery learning page. how about in my case? would you please see my html (updated), thanks – akauts Mar 29 '16 at 10:32
wait, let me check and do it for you. – Murad Hasan Mar 29 '16 at 10:36

dpaul1994 · Answer 5 · 2016-03-29T10:27:13.767

-1

Try like this: console.log($("#txtItemQuantity").eq(1).val()); Dont' forget, count starts from 0

edited Mar 29 '16 at 10:27

answered Mar 29 '16 at 10:17

dpaul1994

332
3
16

1

I doubt this will work because if you had 3 elements with the same id the markup would be invalid, thus likely breaking jquery – Liam Mar 29 '16 at 10:19
Well of course it will not work if you have 3 elements with the same id. The idea about id is to be unique. Otherwise you can't use eq, or you can maybe but is not ideal – dpaul1994 Mar 29 '16 at 10:22
Well sorry then :) – dpaul1994 Mar 29 '16 at 10:26
Question is: `I have 3 input with same id how to get the 2nd input value for example?`. My answer is good for what he asked. All answers are good ;) – dpaul1994 Mar 29 '16 at 10:28

How to get input element value by its index number

5 Answers5