创建动态文本框然后写入文本文件

Question

所以必须有一种更简单的方法来创建它。我有一个带有以下 HTML 的表单：

      <p>Names</p>
        <ul class="container1"  style="list-style-type:none;">
            <li><input type="text" size="10"  name="Name" /></li>
        </ul>
       <input type="button" class="add_form_field" value="+"> 

然后，如果用户需要添加更多名称，我添加了一些 JS 来创建新的文本框： 取自：http://www.sanwebcorner.com/2017/02/dynamically-generate-form-fields-using.html

   $(document).ready(function() {
var max_fields      = 10;
var wrapper         = $(".container1");
var add_button      = $(".add_form_field");

var x = 1;
$(add_button).click(function(e){
    e.preventDefault();
    if(x < max_fields){
        x++;
        $(wrapper).append('<div><input type="text" name="Name"/><a href="#" class="delete">Delete</a></div>'); //add input box
    }
    else
     {
         alert('You Reached the limits')
          }
});

$(wrapper).on("click",".delete", function(e){
    e.preventDefault(); $(this).parent('div').remove(); x--;
})
}); 

$(document).ready(function() {
    var max_fields      = 10;
    var wrapper         = $(".container1");
    var add_button      = $(".add_form_field");
  
    var x = 1;
    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){
            x++;
            $(wrapper).append('<div><input type="text" name="Name"/><a href="#" class="delete">Delete</a></div>'); //add input box
        }
  else
  {
  alert('You Reached the limits')
  }
    });
  
    $(wrapper).on("click",".delete", function(e){
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});


    function check() {
      var temp = document.getElementsByClassName("formElem");
      if (document.getElementById("ckbox").checked) {            
        for (var e = 0; e < temp.length; e++) { // For each element
          var elt = temp[e];
          elt.required = false;
        }
      } else {
        for (var e = 0; e < temp.length; e++) { // For each element
          var elt = temp[e];
          elt.required = true;
        }
      }
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Names</p>
    <ul class="container1"  style="list-style-type:none;">
	    <li><input type="text" size="10"  name="Name" /></li>
		</ul>
									
	<input type="button" class="add_form_field" value="+">

然后我需要使用 PHP 将这些附加值写入 .CSV 文件，这就是我遇到问题的地方：

  <?php
        // Receive form Post data and Saving it in variables
           header('Location: thanks.html'); 
          $Name = "";

          $Name = @$_POST ['Name'];

        // Write the name of text file where data will be store
          $filename = "file.csv";

        // Merge all the variables with text in a single variable. 
            $f_data= '
            Names for people: '.$Name.'                  ';

             $file = fopen($filename, "r+");
             fwrite($file,$f_data);
             fclose($file);
?>

最后一个附加的文本框被写入 csv 文件会发生什么情况。有没有办法传递这些创建的文本框，以便它们可以写入文件？非常相似的问题：Pass dynamic text input to PHP in order to write to text file

但我不确定这是否可以通过文本框完成。

Answer 1

问题是您添加的每个输入都有名称“name”，因此 PHP 只能访问最后一个（覆盖了其他输入）。为了解决这个问题，您可以为输入名称添加一个索引或将它们组成一个数组。可以这样实现：

<input type="text" name="name[]"...>

所以现在，在 PHP 脚本上，您可以遍历该数组以获取所有输入，或将所有元素内爆到一个变量中：

<?php
$names = implode(", ", $_POST["name"]); // all the names, comma-separated 
?>

现在您可以在 $f_data 中使用 $names 来查看所有输入的字段。

（感谢 Fred-ii 提供有关报价单的提示）