Jquery Repeater parse values in jquery

Question

I've created a repeater in html/js. With the help of this library. We want to parse the data when a user clicks on a button. (not there yet.)

But how do we read the data out of the elements like ingredienten[0][wat] Because there can be many ingredienten[n][wat]

This is our code for a beter view of the problem:

<div id="tes0t" data-repeater-list="ingredienten">
    <div class="ingredientenlijst" data-repeater-item="">
      <input type="text" name="ingredienten[0][hoeveel]" placeholder="Hoeveel">
      <input type="text" name="ingredienten[0][wat]" placeholder="Van wat">


      <input data-repeater-delete="" type="button" value="Delete">
    </div>

  <div class="ingredientenlijst" data-repeater-item="" style="">
      <input type="text" name="ingredienten[1][hoeveel]" placeholder="Hoeveel">
      <input type="text" name="ingredienten[1][wat]" placeholder="Van wat">


      <input data-repeater-delete="" type="button" value="Delete">
    </div><div class="ingredientenlijst" data-repeater-item="" style="">
      <input type="text" name="ingredienten[2][hoeveel]" placeholder="Hoeveel">
      <input type="text" name="ingredienten[2][wat]" placeholder="Van wat">


      <input data-repeater-delete="" type="button" value="Delete">
    </div><div class="ingredientenlijst" data-repeater-item="" style="">
      <input type="text" name="ingredienten[3][hoeveel]" placeholder="Hoeveel">
      <input type="text" name="ingredienten[3][wat]" placeholder="Van wat">


      <input data-repeater-delete="" type="button" value="Delete">
    </div></div>

We tried to read it with jquery. But I think we're missing something.

Answer 1

Since your using jQuery you can use its 'Attribute Contains Selector'-feature (https://api.jquery.com/attribute-contains-selector/):

jQuery('input[name*="wat"]').each(function(e)
{
    console.log($(this).val());
});

This will loop over all input elements that have 'wat' in their name and output the values in the console.

Alternatively, if you add some classes to the input fields (class="hoeveel" and class="wat"), you can loop over .ingredientenlijst and output their value like so:

jQuery('.ingredientenlijst').each(function(e)
{
    console.log($(this).find('.hoeveel').val() + ' van ' + $(this).find('.wat').val());
});