Best way to group multiple elements with the same Name in JQuery?-CodePudding

I currently have a dynamic number of text boxes that great created in groups when a user presses a add button. So for example, let's say I start with a set of 3 text boxes:

name="FirstName[]"
name="LastName[]"
name="Age[]"

If A user clicks the add more, it will create another set of 3 text boxes as the above:

name="FirstName[]"
name="LastName[]"
name="Age[]"

name="FirstName[]"
name="LastName[]"
name="Age[]"

What I like to do in JQuery is create a list object of People. I tried the below but of course its not working as I"m not sure what the best way is to loop through them and create the objects. Any help would be much appreciated. Thanks!

var people = new Array();
$('input[name^="FirstName"]').each( function(index, element) {
    var person = {};
    person.FName = $('input[name^="FirstName"]').val();
    person.LName = $('input[name^="LastName"]').val();
    person.Age = $('textarea[name^="Age"]').val();
    People.push(person);
});

CodePudding user response：

The way you try to loop through the first name input and get the other inputs was correct.
But during the loop since the other inputs are at "sibling" level, so you should get their values using .siblings():

$(element).siblings('input[name="FirstName[]"]').first().val();
$(element).siblings('input[name="LastName[]"]').first().val();
$(element).siblings('textarea[name="Age[]"]').first().val();

instead of this

$('input[name^="FirstName"]').val();
$('input[name^="LastName"]').val();
$('textarea[name^="Age"]').val();

More to mention the JavaScript is case sensitive, since you using var people = new Array() so:
People.push(person) wouldn't works.
people.push(person) is correct.

Following is another example getting input values by using "person" class as parent and find it's children:

/* start by convert jQuery object to JavaScript array, then using array map method to loop though each "person" class elements  */
const people = $('.person').toArray().map((element) => {
    /* convert "person" class to jQuery object */
    const row = $(element)

    /* get input value by using find() */
    const firstname = $(element).find('[name="firstname[]"]').first().val()
    const lastname = $(element).find('[name="lastname[]"]').first().val()
    const age = $(element).find('[name="age[]"]').first().val()

    /* append object data into array */
    return { firstname, lastname, age }
})

Demo:

/* start by convert jQuery object to JavaScript array, then using array map method to loop though each "person" class elements  */
const people = $('.person').toArray().map((element) => {
  /* convert "person" class to jQuery object */
  const row = $(element)

  /* get input value by using find() */
  const firstname = $(element).find('[name="firstname[]"]').first().val()
  const lastname = $(element).find('[name="lastname[]"]').first().val()
  const age = $(element).find('[name="age[]"]').first().val()

  /* append object data into array */
  return {
    firstname,
    lastname,
    age
  }
})

$('#result').html(JSON.stringify(people, null, 2))

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Age</th>
    </tr>
  </thead>
  <tbody>
    <tr >
      <td><input type="text" name="firstname[]" value="Maria"></td>
      <td><input type="text" name="lastname[]" value="Garcia"></td>
      <td><input type="text" name="age[]" value="23"></td>
    </tr>
    <tr >
      <td><input type="text" name="firstname[]" value="Robert"></td>
      <td><input type="text" name="lastname[]" value="Smith"></td>
      <td><input type="text" name="age[]" value="31"></td>
    </tr>
  </tbody>
</table>
<hr />
<pre id="result"></pre>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>