Question

好的，我现在一直在寻找和寻找约两周的时间，而且我还没找到我需要弄清楚的东西，所以现在是时候向专家们询问了！

我正在制作广告管理系统，请求表单的其中一部分是选择广告的开始日期和结束日期。用户可以选择添加更多日期。

所以，最初有两个输入......

<input type="text" name="startDate[]" id="startDateInput">
<input type="text" name="enddate[]" id="endDateInput">

然后，在此下面是动态添加更多输入的选项。当用户添加更多输入时，它只是复制那些初始输入，因此我们最终会有更多实例。例如：

<input type="text" name="startDate[]" id="startDateInput">
<input type="text" name="enddate[]" id="endDateInput">

<input type="text" name="startDate[]" id="startDateInput">
<input type="text" name="enddate[]" id="endDateInput">

有没有办法使用.load（）将这些输入的结果作为数组发送？我让它发送和显示一组输入的信息，代码如下......

var startDate = $("#startDateInput").val();
var endDate = $("#endDateInput").val(); 
$("#adBooking").show().load('../scripts/checkSpots.php', { startDate: startDate, endDate: endDate});

我想我不会100％理解如何做到这一点。在过去的两周里，我一直在绞尽脑汁，但我找不到与我正在做的事情完全相关的事情。

但是，我需要做的是从所有startDate和endDate输入中创建一个数据数组，然后将它通过.load（）并进入checkSpots.php页面并让它显示每个集合的信息开始/结束日期。

有不同的方法吗？也许是一种更有效的方式？或者，如果任何人都可以对这个破碎的jQuery菜鸟有所了解，我就会非常谨慎！：d

Answer 1

演示： http://jsbin.com/etihaw/3

$(function() {
    $("#add-date").click(function(e) {
        var i = $('.end-date').length + 1;
        $('<p class="dates">' + 
          '<input class="start-date" name="startDate[' + i + ']" id="startDate' + i + '" />' + 
          '<input class="end-date" name="endDate[' + i + ']" id="endDate' + i + '" />' + 
          '</p>').insertAfter('.dates:last');
          e.preventDefault();
    });
    $('#my-form').submit(function() {
        var post_data = $(this).serialize();
        //$("#adBooking").show().load('../scripts/checkSpots.php', post_data);
        alert(post_data);
        return false;
    });

PHP

<?php
   foreach($_POST['startDate'] as $key => $val ) {
         echo $key;  // 1
         echo $val; // 07/12/2011
    }
   foreach($_POST['endDate'] as $key => $val ) {
         echo $key;  // 1
         echo $val; // 09/12/2011
    }
?>

Answer 2

首先，ID必须是唯一的，所以当添加新的日期对时，在id的末尾添加限定符：

<input type="text" name="startDate[]" id="startDateInput1">
<input type="text" name="enddate[]" id="endDateInput1">

<input type="text" name="startDate[]" id="startDateInput2">
<input type="text" name="enddate[]" id="endDateInput2">

或者更好的是，使用一个类：

<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">

<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">

然后你可以随时应用一些jQuery voodoo（按钮点击，提交等）：

$('#myButton').click(function(){

    // Our ajax post data. For example, $_POST['startDates'][2] would 
    // give you the 3rd start date in your php file.
    var data = {
        startDates: new Array(),
        endDates: new Array()
    };

    // Loop through each date pair, extract its value, and add it to our post data
    $('.startDateInput').each(function(){
        data.startDates.push(this.val());
    });
    $('.endDateInput').each(function(){
        data.endDates.push(this.val());
    });

    // Load it!
    $('#result').load('doSomething.php', data);

});

注意：以上代码未经过测试，只是一个可能解决方案的示例。

希望有所帮助。哦，还有obligatory Family Guy reference。

Answer 3

您的逻辑存在一个主要缺陷：任何id属性在文档中必须是唯一的。由于你不止一次使用多个id，它将无法工作或最多给出意想不到的结果。

Answer 4

首先，您不应在单个html页面中的多个元素上使用相同的ID。这将导致各种不可预测的行为。请改用class：

<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">

<input type="text" name="startDate[]" class="startDateInput">
<input type="text" name="enddate[]" class="endDateInput">

然后，您需要使用jquery循环查询所有输入元素，并将其值分配给相应的数组。

var myEndDateArray = [], myStartDateArray = [];
$(".endDateInput").each(function() {
     myEndDateArray.push($(this).val())

});
$(".startDateInput").each(function() {
     myStartDateArray.push($(this).val())

});

最后，您必须以兼容的帖子格式将数组数据发布到您的页面。

$("#adBooking").show().load('../scripts/checkSpots.php', { 'startdate[]': myStartDateArray, 'enddate[]': myEndDateArray});

Answer 5

我最近碰到了这个问题，我发现 aSeptik 解决方案非常有用。

但是它有一个错误。来自jQuery documentation：

请求方法

如果数据作为对象提供，则使用POST方法;除此以外，   假设GET。

由于.serialze（）函数的结果是字符串，因此.load（）方法将使用GET。

JS代码（相同）：

$(function() {
    $("#add-date").click(function(e) {
        var i = $('.end-date').length + 1;
        $('<p class="dates">' + 
          '<input class="start-date" name="startDate[' + i + ']" id="startDate' + i + '" />' + 
          '<input class="end-date" name="endDate[' + i + ']" id="endDate' + i + '" />' + 
          '</p>').insertAfter('.dates:last');
          e.preventDefault();
    });
    $('#my-form').submit(function() {
        var post_data = $(this).serialize();
        //$("#adBooking").show().load('../scripts/checkSpots.php', post_data);
        alert(post_data);
        return false;
    });

带有_GET的PHP脚本：

<?php
   foreach($_GET['startDate'] as $key => $val ) {
         echo $key;  // 1
         echo $val; // 07/12/2011
    }
   foreach($_GET['endDate'] as $key => $val ) {
         echo $key;  // 1
         echo $val; // 09/12/2011
    }
?>

使用jQuery .load（）从输入到PHP加载数组？

5 个答案: