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

Question

我有下面的 HTML，想法是我有一个添加按钮，您可以添加多个地址。添加按钮将简单地插入具有相同名称的另一个输入的 html，从而创建一个 html 输入数组。我无法通过 ajax 将多个输入传递给 php 脚本。

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

我尝试过这种传递值的方式(这里我只是通过名称获取元素并将其放入变量 formData 中)。

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

通过以下方式，我获取元素，然后循环遍历它们并将这些值推送到数组，然后将该数组分配给变量 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};

然后我使用变量 formData 中的值(来自上面)并通过 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();
         }
});

最后，在我的 PHP 脚本中，我尝试按如下方式访问 DeliveryAddress

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

如果有人可以展示我做错了什么，以及这是否是解决这个问题的最佳方法。非常感谢您的所有帮助。

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

您可以使用以下方法:

First, you can use jQuery .serialize()

Second, update your ajax code with serialize()

Java 脚本 Ajax 代码:

$(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;

这里是完整的 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 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>