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

【问题标题】：Submit multiple inputs through one form and append to array通过一个表单提交多个输入并附加到数组
【发布时间】：2014-05-18 04:10:26
【问题描述】：

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

getdata.php

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

【问题讨论】：

标签： javascript php jquery html forms

【解决方案1】：

您不需要创建数组，$_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++;    
}

...然后是getdata.php：

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

here is a fiddle demo

【讨论】：

非常感谢您的帮助。如果您能够写一些东西，那将有很大帮助，但我也在查找您提到的内容，以便我可以学习。再次感谢！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

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

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

所以在您的情况下，您可以使用 javascript 或 jquery 添加具有相同名称 name="adress[]" 的新字段。在你的 PHP 中你会得到一个数组：

$adresses= $_POST['adress'];

foreach ($adresses as $adress) {
  echo $adress;
}

FIDDLE DEMO

【讨论】：

【解决方案4】：

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

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() 将检索所有输入数据作为名称=值对，即使是动态添加的输入。无需保留一个数组，您可以在最后处理所有这些。

【讨论】：

【解决方案5】：

代码如下：

编辑：我重写了代码，所以你也可以删除每个地址

$(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
}

希望对您有所帮助！ :)

【讨论】：

以后有没有办法删除该字段？是的，这有很大帮助。非常感谢！
我重写了答案中的代码，现在您也可以删除每个地址..没问题，不客气！ :)