title: Pass html input array values to php script via ajax
body: <p>I have the HTML below, the idea is that i have an add button and you can add multiple addresses. The add button would simply insert the html for another input with the same name thus creating an array of html inputs. I am unable to pass the multiple inputs to a php script via ajax.</p>
  
  <pre><code>&lt;form id="addTripForm" class="form-horizontal"&gt;
  &lt;div class="form-group"&gt;
      &lt;label class="col-xs-4 text-right"&gt;Address&lt;/label&gt;
      &lt;div class="col-xs-8"&gt;&lt;input type="text" class="form-control" id="deliveryAddress[]" name="deliveryAddress[]" required/&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>I have tried this way of passing the values (Here i just get the elements by the name and put that in the variable formData).</p>
  
  <pre><code>var deliveryAddress = document.getElementsByName('deliveryAddress[]');
  var formData = {"deliveryAddress":deliveryAddress};
  </code></pre>
  
  <p>In the following way I get the elements and then loop through them and push those values to an array and then assign that array to the variable formData</p>
  
  <pre><code>var deliveryAddress = document.getElementsByName('deliveryAddress[]');
  var deliveries = new Array();
  for(var i=0;i&lt;deliveryAddress.length;i++){
          deliveries.push(deliveryAddress[i].value);
  }
  var formData = {"deliveryAddress":deliveries};
  </code></pre>
  
  <p>Then I use the value in the variable formData(from above) and push that via ajax</p>
  
  <pre><code>$.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();
           }
  });
  </code></pre>
  
  <p>Finally in my PHP script i am trying to access the deliveryAddress as follows</p>
  
  <pre><code>$deliveryAddress = filter_input(INPUT_POST, "deliveryAddress");
  </code></pre>
  
  <p>If someone could show what I am doing wrong and also if this is the best approach to this problem. All your help is greatly appreciated.</p>
  
  <blockquote>
    <p><strong>Update: I think all the answers were probably correct, i just noticed i had not closed the body and the html tag at the bottom of the page and that was causing the javascript serialize to somehow not work. Thanks for everyone's help</strong></p>
  </blockquote>