CODEWITHSUNDEEP
javascriptjquery
akauts
akauts

Reputation: 153

Jquery each loop in rows not working

i want to get each value when a button clicked. what i missed?

//add row
$("#btnAdd").click(function(){
    $(".oItem:last").clone().insertAfter(".oItem:last");                                
});

//submit
$("#btnCalc").click(function(){
  $("[id^=txtItemName]").each(function(){
    alert($("#txtItemName").val());
  });                       
});

my fiddle here https://jsfiddle.net/k5ndm840/3/

thanks

Upvotes: 1

Views: 106

Answers (3)

Rayon
Rayon

Reputation: 36609

Use $(this).val(); as you will be getting this => current element in each iteration. In each callback, this refers to the element

$("#txtItemName") will always select first element having id as txtItemName

Try this:

$("#btnAdd").click(function() {
  $(".oItem:last").clone().insertAfter(".oItem:last");
});
$("#btnCalc").click(function() {
  $("[id^=txtItemName]").each(function() {
    alert($(this).val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button id="btnAdd">Add</button>
<button id="btnCalc">Submit</button>

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

Fiddle here

Edit: As per the www standards, There must not be multiple elements in a document that have the same id value. [Ref]. As you are dealing with attribute selector, you are not facing any issue but ID MUST BE UNIQUE

Edit: To find another child under the parent element, use .closest() to find the parent element and .find() to select child of the parent.

Try this:

$("#btnAdd").click(function() {
  $(".oItem:last").clone().insertAfter(".oItem:last");
});

$("#btnCalc").click(function() {
  $("[id^=txtItemName]").each(function() {
    alert($(this).val());
    alert($(this).closest(".form-group").find('[id=txtTwo]').val());
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button id="btnAdd">Add</button>
<button id="btnCalc">Submit</button>

<div class="masterItem">
  <div class="row oItem">
    <div class="col-md-4">
      <div class="form-group">
        <div class="input-group"><span class="input-group-addon" style="font-weight:bold;color:#330099">Quantity</span>
          <input id="txtItemName" type="text" class="form-control" placeholder="put random number here" aria-describedby="basic-addon1">
          <input id="txtTwo" placeholder="second input">
        </div>
      </div>
    </div>
  </div>
</div>

Upvotes: 1

Bhadra
Bhadra

Reputation: 2104

when you are trying to access the elements with id it will always give the first element matching the selector criteria.

$("#txtItemName").val()

This will always give the value of first matching element. Try to do like this.

//submit
$("#btnCalc").click(function(){
    $("[id^=txtItemName]").each(function(){
        console.log($(this).val());
    });                       
});

Upvotes: 0

Abdul Mannan - Data Engineer
Abdul Mannan - Data Engineer

Reputation: 1092

You are using the same ID for each new field being added. You should use class instead of id in your case as id has to be unique.

Upvotes: 3

Related Questions