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
– gurvinder372, Commented Mar 29, 2016 at 10:14
console.log($("input:eq(2)").val()); But ID must be unique — Rayon
– Rayon, Commented Mar 29, 2016 at 10:15

Community · Accepted Answer · 2017-05-23 11:59:47Z

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-29 10:29:34Z

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, 2016 at 10:29

answered Mar 29, 2016 at 10:22

Rino Raj

6,2622 gold badges29 silver badges44 bronze badges

6 Comments

Rino Raj Over a year ago

Always glad to help.

akauts Over a year ago

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 Over a year ago

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); });

Rino Raj Over a year ago

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 Over a year ago

looping using .each() is also fine

|

Murad Hasan · Accepted Answer · 2016-03-29 10:43:15Z

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, 2016 at 10:43

answered Mar 29, 2016 at 10:26

Murad Hasan

9,5932 gold badges23 silver badges43 bronze badges

2 Comments

akauts Over a year ago

thanks, i saw this in jquery learning page. how about in my case? would you please see my html (updated), thanks

Murad Hasan Over a year ago

wait, let me check and do it for you.

madalinivascu · Accepted Answer · 2016-03-29 11:19:10Z

0

Try this:

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

edited Mar 29, 2016 at 11:19

answered Mar 29, 2016 at 10:22

madalinivascu

32.4k4 gold badges42 silver badges59 bronze badges

2 Comments

Murad Hasan Over a year ago

eq always start with 0 index, so you have to use eq(1) for getting the second input of quantity.

Murad Hasan Over a year ago

Now its fine, and looks great.

dpaul1994 · Accepted Answer · 2016-03-29 10:27:13Z

-1

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

edited Mar 29, 2016 at 10:27

answered Mar 29, 2016 at 10:17

dpaul1994

3203 silver badges16 bronze badges

4 Comments

Liam Over a year ago

I doubt this will work because if you had 3 elements with the same id the markup would be invalid, thus likely breaking jquery

dpaul1994 Over a year ago

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 Over a year ago

Well sorry then :)

dpaul1994 Over a year ago

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 ;)

Collectives™ on Stack Overflow

How to get input element value by its index number

5 Answers 5

Comments

6 Comments

2 Comments

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

6 Comments

2 Comments

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related