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关于报价的提示）

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

1 个答案: