通过一个表单提交多个输入并附加到数组 - Submit multiple inputs through one form and append to array

所以我对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
}

希望这有帮助！ :)

通常，

我做这种事情的方式是为用户提供在客户端级别添加许多输入字段的能力，并在提交表单时将它们全部发送到一个数组中。我相信这更专业。试试这个JSFiddle，看看我的意思。

<input type="text" name="address[]" />

如果你想在表单中POST动态值，你可以这样做：

<input type="text" name="adress[]" />

因此，在您的情况下，您可以使用 JavaScript 或 jQuery 添加新字段，名称为 name="adress[]" 。在你的PHP中，你会得到一个数组：

$adresses= $_POST['adress'];
foreach ($adresses as $adress) {
  echo $adress;
}

小提琴演示

若要处理输入数组，可以使用以下约定：

HTML：只需在名称属性中添加方括号

<input type="text" id="data'+i+'" name="data[]" />

PHP：Post返回一个数组

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

JAVASCRIPT：$("#form1").serialize()将检索所有输入数据作为名称=值对，甚至是动态添加的输入。没有必要保留一个数组，你可以在最后处理所有这些数组。

你不需要

创建一个数组，$_POST实际上已经为你完成了这一切。

所以我建议你做以下几点：使用javascript（或jQuery），保持按钮点击，~~但确保阻止表单提交（使用表单上的preventDefault）~~[编辑：你实际上不需要这个，好像按钮只是按钮，没有提交输入，表单无论如何都不会提交]，并确保每次他们单击加号按钮或其他东西时都附加另一个元素;确保增加name 创建的每个输入元素的属性。

当用户创建提交时，使用通过 js 提交表单，然后在您的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>

这将是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++;    
}

。然后获取数据.php：

foreach ($_POST as $key => $value) {
    echo 'The value for '.$key.' is: '.$value.'<br />';
}

这是一个小提琴演示