How to make an array with dynamic jQuery input?

Question

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'}]

Your expected output is invalid. You should have key:value inside object {}. But you are treating the object like its array. Or i think you mistyped , it should be : like {'company':'Apple'} — Maheer Ali
– Maheer Ali, Commented Apr 9, 2019 at 1:43
Hi Maheer, Please tell me how it should be. This is a practice for me I'm newbie :) And yes wrong syntax. Fixed. — Noob Doez
– Noob Doez, Commented Apr 9, 2019 at 1:46
I think you can have a an array of objects. For each row you should use a single object. [{'company':'Apple','address':'USA'},{'company':'Samsung','address':'Korea'}] ` — Maheer Ali
– Maheer Ali, Commented Apr 9, 2019 at 1:57
The data structure you say you want isn't very useful. Can you provide us with a reason for that requirement? — James
– James, Commented Apr 9, 2019 at 2:25

Pepe Lucho · Accepted Answer · 2019-04-09 02:29:08Z

1

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);

});

edited Apr 9, 2019 at 2:29

answered Apr 9, 2019 at 2:03

Pepe Lucho

1295 bronze badges

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

1 Comment

Noob Doez Over a year ago

Hey Pepe thank you for answer but console log is like this. [{'company':'Apple','address':'USA'},{'company':'Samsung','address':'Korea'}] . I want each dynamic input group to get separate array.

Mohammed Messaoudi · Accepted Answer · 2019-04-09 04:28:27Z

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>

Collectives™ on Stack Overflow

How to make an array with dynamic jQuery input?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related