Get Multiple Input Values from same class and store it in a json variable

Question

I got here a multiple values that store its data on an array. I expected that the data from the field will be seperated from each line.

Actual Result: ["firstname","middlename","lastname","bday","firstname", ...]

Expected : ["firstname","middlename","lastname","bday"],["firstname","middlename","lastname","bday"]

Please see code below:

$(function() {
  $("#btnAddChild").click(function(e) {
    e.preventDefault();
    $("#childinfo_div").append('<div class="col-xl-3"><div class="form-group child_sub"><p>First Name:</p><input type="text" class="form-control" id="child_fname" /></div></div>');
    $("#childinfo_div").append('<div class="col-xl-3"><div class="form-group child_sub"><p>Middle Name:</p><input type="text" class="form-control" id="child_mname" /></div></div>');
    $("#childinfo_div").append('<div class="col-xl-3"><div class="form-group child_sub"><p>Last Name:</p><input type="text" class="form-control" id="child_lname" /></div></div>');
    $("#childinfo_div").append('<div class="col-xl-3"><div class="form-group child_sub"><p>Birthdate:</p><input type="date" class="form-control" id="child_bday" /></div></div>');

  });
});

function GetInfo() {
  var info = [];
  $(".child_sub").each(function() {

    $(this).children("input").each(function() {
      info.push(this.value);
    });

  });
  console.log(info);
  event.preventDefault();
}

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<button class="btn btn-info btn-sm" id="btnAddChild">ADD</button>
<button class="btn btn-success" onclick="GetInfo();"> GET INFO</button>
<div class="row" id="childinfo_div">

</div>

You need and indexer so that you can create multuple arrays so then you [0] [1] and so on, i would change your append method and use and object builder to then index elements as required. — Callistus Asirvatham
– Callistus Asirvatham, Commented Sep 25, 2019 at 9:04

Rory McCrossan · Accepted Answer · 2019-09-25 09:23:47Z

1

The issue is because you're looping over the input elements in .child_sub directly. As such you're creating a single array containing all values.

To create the structure you want, which is a nested array you need to loop over each collection, then each input within that, something like this:

$(function() {
  $("#btnAddChild").click(function(e) {
    e.preventDefault();
    var $row = $('<div class="child_sub_container"></div>');
    $row.append('<div class="col-xl-3"><div class="form-group child_sub"><p>First Name:</p><input type="text" class="form-control" id="child_fname" /></div></div>');
    $row.append('<div class="col-xl-3"><div class="form-group child_sub"><p>Middle Name:</p><input type="text" class="form-control" id="child_mname" /></div></div>');
    $row.append('<div class="col-xl-3"><div class="form-group child_sub"><p>Last Name:</p><input type="text" class="form-control" id="child_lname" /></div></div>');
    $row.append('<div class="col-xl-3"><div class="form-group child_sub"><p>Birthdate:</p><input type="date" class="form-control" id="child_bday" /></div></div>');
    $row.appendTo('#childinfo_div');
  });

  $('#btnGetInfo').on('click', function() {
    var info = $('.child_sub_container').map(function() {
      return [$(this).find(".child_sub input").map(function() {
        return this.value.trim();
      }).get()];
    }).get();

    console.log(info);
  });
});

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<button class="btn btn-info btn-sm" id="btnAddChild">ADD</button>
<button class="btn btn-success" id="btnGetInfo">GET INFO</button>
<div id="childinfo_div"></div>

Note that I removed the inline onclick attribute they are outdated and should not be used. I changed the logic to use an unobtrusive event handler instead.

I would also suggest you look in to cloning the input elements you add to the DOM when 'Add' is clicked, or using a templating library, as having that much HTML within your JS logic is bad practice.

edited Sep 25, 2019 at 9:23

answered Sep 25, 2019 at 9:03

Rory McCrossan

338k41 gold badges321 silver badges353 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

devmonster Over a year ago

I try the code in my local but the log is giving me a logical error. I dynamically added 2 forms but the console.log results that there is 6 array that includes 3 arrays that is empty and 2 arrays that includes the data i entered

Rory McCrossan Over a year ago

That sounds like the selectors are picking up more elements in the HTML than expected. Check how many .row elements there are in the DOM, and change that class name to something unique if required.

devmonster Over a year ago

I see i have another .row in my html. How can i replace the .row? i change the .row for something unique but the design is ruined because im using bootstrap

Rory McCrossan Over a year ago

I changed the .row class name to .child_sub_container. Hopefully that's now unique within your page.

devmonster Over a year ago

Thank you for your suggestion, i re-constructed the .row and create a new one and used it in the dynamic div. Many thanks!

Collectives™ on Stack Overflow

Get Multiple Input Values from same class and store it in a json variable

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related