Pass input array from modal (bootstrap) with JQuery

Question

I have a form that I want to be filled with a modal dialog. It uses input arrays but as these inputs are outside the < form>< /form> tags, they are not posted.

Here is the modal code :

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
         <div class="modal-body">
            <div class="form-row field" id="auteur1">
               <div class="form-group col-md-5" style="margin-bottom:0">
                  <input autocomplete="off" class="form-control auto_c" name="name_add[]" type="text" />
               </div>
               <div class="form-group col-md-4" style="margin-bottom:0">
                  <input type="text" class="form-control" name="firstname_add[]" />
               </div>
               <input type="hidden" name="id_add[]" value="">
            </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="save btn btn-qvq">Submit</button>
         </div>
      </div>
   </div>
</div>

There can be many lines, here is why arrays are used.

I'd like to fill name[], firstname[] and id[] arrays that are located inside the < form>< /form> tags:

<input type="hidden" id="name" name="name[]" value="">
<input type="hidden" id="firstname" name="firstname[]" value="">
<input type="hidden" id="id" name="id[]" value="">

I guess it souhld be something likre that but it doesn't work. (example for names only)

$(function() {
   $('.save').on('click', function() {
      $.each($("input[name='name_add[]']"), function(idx, value) {
         $("input[name='name[]']").eq(idx).val(value);
      });
   }
}

Any help will be appreciated. Thanks.

Edit

As per Steph74 answer I have tried:

$('.save').on('click', function(){
   $.each($('input[name="name_add[]"]'), function(idx, v) {
      $('input[name="name[]"]').eq(idx).val(v.value)
   })
})

name[] is now filled but only with the first value if there are multiple name_add[] inputs

Answer 1

We are getting only first array value if we submit from modal box, else the same code is working fine. while we are sending the array from modal box we are receiving only first array value. here is our code:

in form page:

<div class="form-group">
    <label class="col-sm-4 control-label">Label-1</label>
      <div class="col-sm-4">
         <input type="number" name="abc[]" class="form-control">
       </div>
      <div class="col-sm-3">
         <input type="number" name="xyz[]" class="form-control">
      </div>
      <div class="col-sm-1">
        <input type="button" onclick="floor();" class="btn btn-default" value="+" />        

       </div>
  </div>
<table>
      <tbody id="atbody"></tbody>
  </table>

Where we receiving the data:

print_r($_REQUEST['abc']);
        print_r($_POST['xyz']);
        die;

Output: Array ( [0] => 2 ) Array ( [0] => 3 )

Answer 2

Hi I don't understand exactly what's the problem, but if you want to add multiple fields using the modal fields you can use something like that:

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <div class="form-row field" id="auteur1">
                <div class="form-group col-md-5" style="margin-bottom:0">
                    <input autocomplete="off" class="form-control auto_c" name="name_add[]" type="text"/>
                </div>
                <div class="form-group col-md-4" style="margin-bottom:0">
                    <input type="text" class="form-control" name="firstname_add[]"/>
                </div>
                <input type="hidden" name="id_add[]" value="">
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="save btn btn-primary" onclick="addItem()">Submit</button>
        </div>
    </div>
</div>

<script>
function addItem() {
    var name = $('#Modal input[name="name_add[]"]').val()
    var firstname = $('#Modal input[name="firstname_add[]"]').val()
    $('form').append($('<input type="hidden" id="name" name="name[]" value="">').val(name))
    $('form').append($('<input type="hidden" id="firstname" name="firstname[]" value="">').val(firstname))
    $('form').append($('<input type="hidden" id="id" name="id[]" value="">'))
}

You must remove hidden fields from the form and you can append them using function javascript. If we add two items:

1. name: jhon , firstname: steeve
2. name: jhon2 , firstname: steeve2

We can get them on php after the submit form using

1. echo $_REQUEST[name][0].$_REQUEST[firstname][0] ==> jhon steeve
2. echo $_REQUEST[name][1].$_REQUEST[firstname][1] ==> jhon2 steeve2

If the issue is fixed else tell me exactly what is the problem

Answer 3

Test this code :

$('.save').on('click', function(){
    $.each($('input[name="name_add[]"]'), function(idx, v) {
        $('input[name="name[]"]').eq(idx).val(v.value)
    })
})