Javascript 通过一个表单提交多个输入并附加到数组_Javascript_Php_Jquery_Html_Forms

Javascript 通过一个表单提交多个输入并附加到数组

javascript php jquery html forms

Javascript 通过一个表单提交多个输入并附加到数组,javascript,php,jquery,html,forms,Javascript,Php,Jquery,Html,Forms,所以我对JavaScript比较陌生，但我有编程经验。我有这个代码，允许用户定义他们想要输入多少地址，这样我就可以查询谷歌地图并找到地理中心。问题是，这看起来非常不专业，因为他们必须在一页上输入字段数，然后在下一页上用那么多框提示他们。有没有办法只生成一个表单（包含一个条目所需的所有参数），然后在他们单击submit之后，我将其附加到一个数组中，然后当他们确定他们有足够的地址时，点击最终提交，这样我就可以使用PHP调用处理数据？任何帮助都会很好，但我是新手，所以我可能需要更多详细的解释，对不起。

所以我对JavaScript比较陌生，但我有编程经验。我有这个代码，允许用户定义他们想要输入多少地址，这样我就可以查询谷歌地图并找到地理中心。问题是，这看起来非常不专业，因为他们必须在一页上输入字段数，然后在下一页上用那么多框提示他们。有没有办法只生成一个表单（包含一个条目所需的所有参数），然后在他们单击submit之后，我将其附加到一个数组中，然后当他们确定他们有足够的地址时，点击最终提交，这样我就可以使用PHP调用处理数据？任何帮助都会很好，但我是新手，所以我可能需要更多详细的解释，对不起。再次感谢

TL；DR：我想创建一个单一条目字段，当单击submit时，页面不会刷新或重定向到新页面，而是将数据条目附加到数组中。从那里，用户可以输入一个新的输入，该输入也将被附加到数组中，直到用户决定不再需要输入，此时他们将单击最终提交，允许我处理数据

以下是我目前掌握的代码：

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


$（函数（）{
var c=0；
$（“#按钮1”）。单击（函数（）{
c=$（“#输入”）.val（）；
$（“#mydiv”）.html（“”）；
对于（i=0；i您不需要创建数组，$\u POST
实际上已经为您完成了所有工作
因此，我建议您执行以下操作：使用javascript（或jQuery），保持按钮单击，但确保表单提交被阻止（在表单上使用preventDefault
）【编辑：您实际上不需要这样做，就好像按钮只是按钮，没有提交输入，表单无论如何都不会提交】，只需确保每次他们单击加号按钮或其他东西时都附加另一个元素；确保增加所创建的每个输入元素的name
属性
当用户创建submit时，通过js使用submit表单，然后在getdata.php
上，您可以简单地循环所有值，并按照您想要的方式使用它们。您甚至可以通过计算一个新的input
元素添加到表单的次数来知道确切的数字
我会试着在一分钟内为你写点东西，但如果我足够清楚的话，你也应该能够做到
编辑：以下是我的想法；试试看这是否适合你
这是表单的外观：
<form id="form1" name="myform" method="post" action="getdata.php">
    Enter address 1: <input type="text" name="address-1" /> <input type="button" value="More" onclick="createNew()" />
    <div id="mydiv"></div>
    <input type="submit" value="Send" />
</form>


输入地址1：

这就是js代码：
var i = 2;

function createNew() {
    $("#mydiv").append('Enter address ' + i +': <input type="text" name="address-' + i +'" /> <input type="button" value="More" onclick="createNew()" /><br />');
    i++;    
}

var i=2；
函数createNew（）{
$（“#mydiv”）.append（'输入地址'+i+'：
'）；
i++；
}

…然后是getdata.php：
foreach ($_POST as $key => $value) {
    echo 'The value for '.$key.' is: '.$value.'<br />';
}

foreach（$\u发布为$key=>$value）{
回显“.$key.”的值为：“.$value”。
；
}

通常我这样做是为了让用户能够在客户端添加许多输入字段，并在提交表单时将它们全部发送到一个数组中。我认为这更专业。试试看我的意思
<input type="text" name="address[]" />

如果您想以一种形式发布动态值，您可以这样做：
<input type="text" name="adress[]" />

要处理输入数组，可以使用以下约定：
HTML：只需在name属性中添加方括号即可
<input type="text" id="data'+i+'" name="data[]" />



PHP:Post返回一个数组
for( $i=0; $i<$_POST["data"] ; $i++){
    echo $_POST["data"][$i]."\n";
}

对于（$i=0；$i以下是代码：
编辑：我重写了代码，因此您也可以删除每个地址

$（文档）.ready（函数（）{
$（“#添加地址”）。单击（功能（e）{
e、 预防默认值（）；
var numberOfAddresses=$（“#form1”）.find（“输入[name^='data[address]']）。长度；
变量标签='地址'+（numberOfAddresses+1）+'；
var输入=“”；
var removeButton='Remove'；
var html=“”+标签+输入+移除按钮+”；
$（“#form1”）.find（#add address”）.before（html）；
});
});
$（文档）。在“单击”、“删除地址”功能（e）上{
e、 预防默认值（）；
$（this.parents（“.address”）.remove（）；
//更新标签
$（“#form1”）.find（“label[for ^='data[address]']”）。每个（函数（）{
$（this.html（“地址”+（$（this.parents）（'.Address'）.index（）+1））；
});
})；

地址1
添加地址


非常感谢您的帮助。如果您能够写一些东西，这将是非常有帮助的，但我也在查找您提到的内容，以便我可以学习。再次感谢！有没有办法稍后删除该字段？是的，这非常有帮助。非常感谢！我在回答中重写了代码，现在您也可以删除每个地址。。没问题，不客气！：）
<input type="text" id="data'+i+'" name="data[]" />

for( $i=0; $i<$_POST["data"] ; $i++){
    echo $_POST["data"][$i]."\n";
}