CODEWITHSUNDEEP
javascriptjquery
Noob Doez
Noob Doez

Reputation: 59

How to make an array with dynamic jQuery input?

I have a form with dynamic input. Inputs have same name attributes. So I want to make array for each row.

Like this;

[{'company':'Apple'},{'address':'USA'}],
[{'company':'Samsung'},{'address':'Korea'}]

I am using this simple form (it's dynamic);

<form id='companies'>
  <input name='company[]'>
  <input name='address[]'>
</form>

And this;

$('form').submit(function(event) {
   var newFormData = $('#companies').serializeArray();
      console.log(newFormData);
   event.preventDefault();
 });

Console Log; (All inputs in same array)

[{'company':'Apple'},{'address':'USA'},{'company':'Samsung'},{'address':'Korea'}]

Upvotes: 1

Views: 74

Answers (2)

Mohammed Messaoudi
Mohammed Messaoudi

Reputation: 106

May help :) more dynamically.

$('#companies').submit(function(event) {
    var $data = [];
    $.each($(this).children("div"),function(){
      obj={};
      $.each($(this).find(":input"),function(){
         obj[$(this).attr("name").replace("[]","")]=$(this).val();
         $data.push(obj);
      });
    })
    console.log($data);
    event.preventDefault();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='companies'>
  <div class="input">
    <input name='company[]'>
    <input name='address[]'>
    <input name='phone[]'>
  </div>
  <div class="input">
    <input name='company[]'>
    <input name='address[]'>
  </div>
  <div class="input">
    <input name='company[]'>
    <input name='address[]'>
  </div>
  <input type="submit"/>
</form>

Upvotes: 0

Pepe Lucho
Pepe Lucho

Reputation: 129

This is an example of solution of your problem :)

<form id='companies'>
  <div class='container-input'> 
     <input name='company[]'>
     <input name='address[]'>
  </div>
  <div class='container-input'> 
     <input name='company[]'>
     <input name='address[]'>
  </div>
  ... -> Now you have dynamic containers
</form>

You could use this approach to solve the problem with jQuery.

$('#companies').submit(function(event) {
    var $data = [];

    var $containers = $(".container-input");

    $containers.each(function() {
        var $contenedor = $(this);
        var $inputCompany = $contenedor.find('input[name^="company"]');
        var $inputAddress = $contenedor.find('input[name^="address"]');

        var $objectInput = [{
            'company': $inputCompany.val()
        }, {
            'address': $inputAddress.val()
        }];

        $data.push($objectInput);

    });

    console.log($data);

});

Upvotes: 1

Related Questions