Iterate in jquery to get values of input text

Question

I have three rows of which I want to get the values of all the text by looping them all, so I tried something like this.

var collection = $(".vendorDaterow");
collection.each(function() {});

But while debugging i didn't find the value in any of the property.

Below is my html

<tr>
  <td>
    <div class="row noPadding vendorForm">
      <div class="vendorDaterow">
        <div class="vendorName" id="dvVendorNameData">
          <label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName" /></span>
        </div>
        <div class="vendorFromDate">
          <label>From Date</label><span class="datepicker"><input type="text" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
        <div class="vendorToDate">
          <label>To Date</label><span class="datepicker"><input type="text" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
        </div>
      </div>
      <div class="add">
        <i class="fa fa-plus" aria-hidden="true"></i>
      </div>
      <i class="max"><label>(Maximum 5 Vendors)</label></i>
    </div>
  </td>
</tr>

What should I do to get the values of the input text of all the element

Duplicate of https://stackoverflow.com/questions/10649869/jquery-selector-inputtype-text — bigbounty, Dec 08 '17 at 07:08
@bigbounty: just tell me how will I get the value of input here. I am unable to get it in property section — Nad, Dec 08 '17 at 07:10
Try this `collection.find('input').each(function () { console.log($(this).val()); });` — Hassan Imam, Dec 08 '17 at 07:10
@HassanImam: on innerText I am getting the ID but not its value — Nad, Dec 08 '17 at 07:15
Use [`val()`](http://api.jquery.com/val/) to access the value of input field. — Hassan Imam, Dec 08 '17 at 07:16
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160771/discussion-between-vvvv-and-hassan-imam). — Nad, Dec 08 '17 at 07:21
can u come over chat for some discussion. i guess i am done just need some clarification — Nad, Dec 08 '17 at 07:26

edkeveked · Answer 1 · 2017-12-08T08:53:17.400

The following snippet prints only the input value when it changes. We use the selector $(".vendorDaterow") and the delegation event on the input that have changed.

$(".vendorDaterow").on('change', 'input', function(){
    var text = $(this).val();
    console.log(text);
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<td>
                                <div class="row noPadding vendorForm">
                                    <div class="vendorDaterow">
                                        <div class="vendorName" id="dvVendorNameData">
                                            <label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName" /></span>
                                        </div>
                                        <div class="vendorFromDate">
                                            <label>From Date</label><span class="datepicker"><input type="text" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                        <div class="vendorToDate">
                                            <label>To Date</label><span class="datepicker"><input type="text" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                                        </div>
                                    </div>
                                    <div class="add">
                                        <i class="fa fa-plus" aria-hidden="true"></i>
                                    </div>
                                    <i class="max"><label>(Maximum 5 Vendors)</label></i>
                                </div>
                            </td>
                        </tr>

The snippet below prints all the input values after a change. After a change in an input, each() will loop over all the input elements inside the class vendorDaterow and get their values.

var save;
$(".vendorDaterow input").on("change",function(){
save = []
$(".vendorDaterow input").each(function(){
  var text = $(this).val();
  if(text){
    save.push(text);
  }
})
console.log(save);
})

//console.log($(".vendorDaterow").html())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
    <td>
        <div class="row noPadding vendorForm">
            <div class="vendorDaterow">
                <div class="vendorName" id="dvVendorNameData">
                    <label>SP Vender Name</label><span><input type="text" name="nmVendorData" id="txtVendorName" /></span>
                </div>
                <div class="vendorFromDate">
                    <label>From Date</label><span class="datepicker"><input type="text" name="spFromDate" id="spFromDate" class="dateClass" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                </div>
                <div class="vendorToDate">
                    <label>To Date</label><span class="datepicker"><input type="text" name="spToDate" id="spToDate" class="dateClass1" /><i class="fa fa-calendar" aria-hidden="true"></i></span>
                </div>
            </div>
            <div class="add">
                <i class="fa fa-plus" aria-hidden="true"></i>
            </div>
            <i class="max"><label>(Maximum 5 Vendors)</label></i>
        </div>
    </td>

@VVVV, I have updated my answer. You can print out all the input values, or only the one that changed. — edkeveked, Dec 08 '17 at 07:30
@VVVV, with the 2nd snippet each time an input changes, you have all the input values that are displayed with the `console.log` — edkeveked, Dec 08 '17 at 07:42
See, i have an html with div which I posted. your code will give values for all the input which I dont want. That's y i specifed class. So now how should i write code for this — Nad, Dec 08 '17 at 07:43
You mean, you want all the input value that are in the class `vendorDaterow`? — edkeveked, Dec 08 '17 at 07:46
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/160773/discussion-between-vvvv-and-edkeveked). — Nad, Dec 08 '17 at 07:46

Learn on hard way · Answer 2 · 2017-12-08T07:45:05.100

This is walking down the tree method. You can make it shorter but it is self-explanetory.

var collection = $(".vendorDaterow");


collection[0].childNodes.forEach((element)=>{
  if (element.tagName == 'DIV'){
     //console.log(element.childNodes)
     element.childNodes.forEach((element) => {
       if(element.tagName == 'SPAN') {
          //console.log(element.childNodes);
          element.childNodes.forEach((element) => {
            if(element.tagName == 'INPUT'){
              console.log(element.value)
            }
          })
       }
     });    
  }
})

It iterates and finds the proper elements, assuming that the structure will remain the same. You can remove comment tags to get the flow.

Attempt no2.

function recursiveEach($element){
    $element.children().each(function () {
        var $currentElement = $(this);
        // This is our input so we do something with it
        if($currentElement[0].tagName == 'INPUT') {
           console.log(" the values are: " + $currentElement[0].value)
        }
        //////////// Loop her children
        recursiveEach($currentElement);
    });
}

//////////// Parent div
recursiveEach($(".vendorDaterow"));

The syntax is more bit jquery-esk, but it has nice recursive form of iteration.

@VVVV You want more like jquery-esk syntax? – Learn on hard way Dec 08 '17 at 07:49 — Learn on hard way, Dec 08 '17 at 07:49
@VVVV I updated it but i dont see what more do you want. – Learn on hard way Dec 08 '17 at 08:04 — Learn on hard way, Dec 08 '17 at 08:04

Iterate in jquery to get values of input text

2 Answers2