CODEWITHSUNDEEP
javascriptjqueryhtml
akauts
akauts

Reputation: 153

How to get input element value by its index number

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>

Upvotes: 0

Views: 149

Answers (5)

Liam
Liam

Reputation: 29714

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!

Upvotes: 2

madalinivascu
madalinivascu

Reputation: 32354

Try this:

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

Upvotes: 0

Murad Hasan
Murad Hasan

Reputation: 9583

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

Upvotes: 0

Rino Raj
Rino Raj

Reputation: 6264

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">

Upvotes: 1

dpaul1994
dpaul1994

Reputation: 320

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

Upvotes: -1

Related Questions