Question

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

Answer 1

这是代码：

编辑：我重写了代码，因此您也可以删除每个地址

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

希望这有帮助！：）

Answer 2

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

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

Answer 3

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

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

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

$adresses= $_POST['adress'];

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

FIDDLE DEMO

Answer 4

您不需要创建数组，$_POST实际上已经为您完成了所有操作。

所以我建议您执行以下操作：使用javascript（或jQuery），按住按钮，~~但确保阻止表单提交（使用表单上的preventDefault）~~ < em> [编辑：你实际上不需要这个，好像按钮只是按钮，没有提交输入，表单也不会提交] ，并确保你每次点击一个时附加另一个元素加按钮或其他东西;确保增加每个创建的输入元素的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

Answer 5

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

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 个答案: