javascript - Pass html input array values to php script via ajax -

i have html below, idea have add button , can add multiple addresses. add button insert html input same name creating array of html inputs. unable pass multiple inputs php script via ajax.

<form id="addtripform" class="form-horizontal"> <div class="form-group">     <label class="col-xs-4 text-right">address</label>     <div class="col-xs-8"><input type="text" class="form-control" id="deliveryaddress[]" name="deliveryaddress[]" required/></div> </div> </form> 

i have tried way of passing values (here elements name , put in variable formdata).

var deliveryaddress = document.getelementsbyname('deliveryaddress[]'); var formdata = {"deliveryaddress":deliveryaddress}; 

in following way elements , loop through them , push values array , assign array variable formdata

var deliveryaddress = document.getelementsbyname('deliveryaddress[]'); var deliveries = new array(); for(var i=0;i<deliveryaddress.length;i++){         deliveries.push(deliveryaddress[i].value); } var formdata = {"deliveryaddress":deliveries}; 

then use value in variable formdata(from above) , push via ajax

$.ajax({         url : "/admin/phpclasses/addtodb.php?type=trip",         type: "post",         data : formdata,         success: function(data, textstatus, jqxhr)         {             $('.form-group').hide();             $('.bg-success').show();             $('#savechanges').hide();             window.location.reload();          },          error: function (jqxhr, textstatus, errorthrown)          {             $('.bg-danger').show();          } }); 

finally in php script trying access deliveryaddress follows

$deliveryaddress = filter_input(input_post, "deliveryaddress"); 

if show doing wrong , if best approach problem. appreciated.

update: think answers correct, noticed had not closed body , html tag @ bottom of page , causing javascript serialize somehow not work. everyone's help

you can use following approach:

first, can use jquery .serialize()

second, update ajax code serialize()

java-script ajax code:

$(document).ready(function() {     // form submit function     $("#addtripform").on("submit", function(e) {         // stop form submission         e.preventdefault();         $.ajax({             url: "/admin/phpclasses/addtodb.php?type=trip",             type: "post",             data: $("#addtripform").serialize(),             success: function(data, textstatus, jqxhr) {                 $('.form-group').hide();                 $('.bg-success').show();                 $('#savechanges').hide();                 //window.location.reload();             },             error: function(jqxhr, textstatus, errorthrown) {                 $('.bg-danger').show();             }         });     }) }); 

third, use below php code adderss

<?php // filter user input $deliveryaddress = filter_input(input_post, 'deliveryaddress', filter_default, filter_require_array); // join array comma $deliveryaddress = implode(",\n", $deliveryaddress); // show address echo $deliveryaddress; 

here full code html js , php:

$(document).ready(function() {      //maximum input boxes allowed      var max_fields = 10;      //fields wrapper      var wrapper = $(".pure-control-group");      //initlal text box count      var x = 1;      //on add button click      $('body').on("click", ".fa-plus-circle", function(e) {          //max input box allowed          if (x < max_fields) {              //text box increment              x++;              //add input box              var render = '<div class="pure-control-group"> ' + '  <label for="deliveryaddress[]">address</label>' + '      <input name="deliveryaddress[]" type="text" placeholder="address...">' + '      <i class="fa fa-plus-circle"></i> ' + '      <i class="fa fa-trash-o"></i>' + '</div>';              $(wrapper).after(render);          }      });      //on delete button click      $('body').on("click", ".fa-trash-o", function(e) {              //user click on remove text                      $(this).parent('div.pure-control-group').remove();              x--;          })          // form submit function      $("#addtripform").on("submit", function(e) {          // stop form submission          e.preventdefault();          $.ajax({              url: "post.php?type=trip",              type: "post",              data: $("#addtripform").serialize(),              success: function(data, textstatus, jqxhr) {                  $('.form-group').hide();                  $('.bg-success').show();                  $('#savechanges').hide();                  //window.location.reload();              },              error: function(jqxhr, textstatus, errorthrown) {                  $('.bg-danger').show();              }          });      })  });

<!doctype html>  <html lang="en">    <head>      <meta charset="utf-8">      <title>pass html input array values php script via ajax</title>      <meta name="viewport" content="width=device-width, initial-scale=1">      <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">      <style type="text/css">i,i:hover{color:#0078e7;cursor:pointer;}</style>      </head>    <body>      <form class="pure-form pure-form-aligned form-horizontal" id="addtripform">          <fieldset>              <div class="pure-control-group">                  <label for="deliveryaddress[]">address</label>                  <input name="deliveryaddress[]" type="text" placeholder="address...">                  <i class="fa fa-plus-circle"></i>              </div>              <div class="pure-controls">                  <button type="submit" class="pure-button pure-button-primary">submit</button>                              </div>          </fieldset>      </form>      <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>      <script type="text/javascript" src="js.js"></script>  </body>    </html>