好吧,我已经找了两个星期了,我还没有找到我需要弄清楚的东西,所以现在是时候问专家了!
我正在做一个广告管理系统,请求表单的一个部分是选择广告的开始和结束日期。用户可以选择添加更多的日期。
那么,一开始有两个输入。
<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});
我想我只是不完全明白该怎么做。在过去的两个星期里,我一直在绞尽脑汁,但我找不到任何与我正在做的事情完全相关的东西。
但是,我需要做的是从所有startDate和endDate输入中创建一个数据数组,然后将其通过.load()扔到checkSpots.php页面中,并让它显示每组开始/结束日期的信息。
有别的方法吗?也许是更有效的方法?或者,如果有人能给这个蹩脚的jQuery新手一点启发,我将非常感激!: D
演示:
- 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
}
?>
首先,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巫术(按钮点击,提交等):
$('#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);
});
注意:上面的代码没有经过测试,只是一个可能解决方案的例子。
希望有帮助。哦,还有《恶搞之家》的必备参考
您的逻辑存在一个主要缺陷:任何id属性在文档中都必须是唯一的。当您不止一次使用多个id时,它将无法工作或至多给出意想不到的结果。
首先,你不应该在一个html页面的多个元素上使用相同的id。这会导致各种不可预测的行为。使用class代替so:
<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())
});
最后,您必须以兼容的post格式将数组数据发布到您的页面。
$("#adBooking").show().load('../scripts/checkSpots.php', { 'startdate[]': myStartDateArray, 'enddate[]': myEndDateArray});
我最近碰到了这个问题,我发现aSeptik解决方案非常有用。
但是里面有一个错误。来自jQuery文档:
请求方法
如果数据作为对象提供,则使用POST方法;否则,
由于.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;
});
PHP script with _GET:
<?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
}
?>