通过ajax将html输入数组值传递给php脚本

Question

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.

<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 this way of passing the values (Here i just get the elements by the name and put that in the variable formData).

var deliveryAddress = document.getElementsByName('deliveryAddress[]');
var formData = {"deliveryAddress":deliveryAddress};

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

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 I use the value in the variable formData(from above) and push that 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 my PHP script i am trying to access the deliveryAddress as follows

$deliveryAddress = filter_input(INPUT_POST, "deliveryAddress");

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.

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

Answer 1

You can use following approach:

First, you can use jQuery .serialize()

Second, update your ajax code with 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 to get adderss

<?php
// filter user input
$deliveryAddress = filter_input(INPUT_POST, 'deliveryAddress', FILTER_DEFAULT, FILTER_REQUIRE_ARRAY);
// join array with comma
$deliveryAddress = implode(",\n", $deliveryAddress);
// show address
echo $deliveryAddress;

Here is full code html js and 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 to 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> 

Answer 2

Hi Try to use object of formData

var deliveries = new Array();
        $('#addTripForm input[name="deliveryAddress"]').each(function (){
            deliveries.push($(this).val()); 
        });

var formData = new FormData()
formData.append("deliveryAddress",deliveries);

$.ajax({
        url : "/admin/PHPClasses/addToDB.php?type=Trip",
        type: "POST",
        data : formData,
        cache: false,
        contentType: false,
        processData: false
        success: function(data, textStatus, jqXHR)
        {
            $('.form-group').hide();
            $('.bg-success').show();
            $('#saveChanges').hide();
            window.location.reload();
         },
         error: function (jqXHR, textStatus, errorThrown)
         {
            $('.bg-danger').show();
         }
});