所以我对 JavaScript 比较陌生，但我有编程经验。我有这段代码，它允许用户定义他们想要输入多少个地址，这样我就可以查询谷歌地图并找到地理中心。这样做的问题是，从某种意义上说，他们必须在一页上输入字段数，然后在下一页提示他们有那么多框，这看起来很不专业。有什么方法可以只制作一种形式(包含我需要的所有参数)，然后在他们单击提交后，我将其附加到一个数组中，然后当他们决定他们有足够的地址时，他们点击了最终提交，然后我可以使用 PHP 调用处理数据吗？任何帮助都会很棒，但我对此很陌生，所以我可能需要更详细的解释，抱歉。再次感谢!
TL;DR:我想创建一个单一的条目字段，当点击提交时，页面不会刷新或重定向到新页面并将数据条目附加到数组。从那里用户可以输入一个新的输入，这个输入也将被附加到数组，直到用户决定不再需要更多的输入，此时他们将单击最终提交允许我处理数据。
这是我目前的代码:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var c = 0;
$("#button1").click(function(){
c = $("#inputs").val();
$("#mydiv").html("");
for(i=0;i<c;i++){
$("#mydiv").append('<input type="text" id="data'+i+'" name="data'+i+'" /><br/>');
}
});
$("#button2").click(function(){
$.post("getdata.php",$("#form1").serialize(),function(data){
});
});
});
</script>
</head>
<body>
<form id="form1">
Type the number of inputs:
<input type="text" id="inputs" name="inputs" />
<input type="button" id="button1" value="Create" />
<div id="mydiv"></div>
<input type="button" id ="button2" value="Send" />
</form>
</body>
</html>
获取数据.php
<?php
for( $i=0; $i<$_POST["inputs"] ; $i++){
echo $_POST["data".$i]."\n";
}
?>
最佳答案
代码如下:
编辑:我重写了代码，所以你也可以删除每个地址
$(document).ready(function(){
$("#add-address").click(function(e){
e.preventDefault();
var numberOfAddresses = $("#form1").find("input[name^='data[address]']").length;
var label = '<label for="data[address][' + numberOfAddresses + ']">Address ' + (numberOfAddresses + 1) + '</label> ';
var input = '<input type="text" name="data[address][' + numberOfAddresses + ']" id="data[address][' + numberOfAddresses + ']" />';
var removeButton = '<button class="remove-address">Remove</button>';
var html = "<div class='address'>" + label + input + removeButton + "</div>";
$("#form1").find("#add-address").before(html);
});
});
$(document).on("click", ".remove-address",function(e){
e.preventDefault();
$(this).parents(".address").remove();
//update labels
$("#form1").find("label[for^='data[address]']").each(function(){
$(this).html("Address " + ($(this).parents('.address').index() + 1));
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post">
<div class="address">
<label for="data[address][0]">Address 1</label>
<input type="text" name="data[address][0]" id="data[address][0]" />
</div>
<button id="add-address">Add address</button>
<br />
<input type="submit" value="Submit" />
</form>表单提交后，您可以像这样遍历地址:
foreach ($_POST['data']['address'] as $address){
...your code
}
希望对您有所帮助! :)
关于javascript - 通过一种形式提交多个输入并附加到数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/22886631/