Create dynamic text boxes then write to text file

Question

So there must be an easier way to create this. I have a form with the following 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="+"> 

I then added some JS to create new text boxes if a user needs to add more names: Taken from: 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="+"> 

I then need to write those appended values to a .CSV file using PHP and here is where I am having the issue:

  <?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);
?>

What happens is that the last appended text box gets written into the csv file.Is there a way to pass these created text boxes so they can write to a the file? Really similar question: Pass dynamic text input to PHP in order to write to text file

But I'm not sure if this can be done with text boxes.

Answer 1

The problem is that every input you add has the name “name”, so PHP can only access the last one (which overwrote the others). To get around this, you can add an index to the input name or make an array of them. This can be achieved like so:

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

So now, on the PHP script you can iterate over that array to get all the inputs, or implode all the elements into a variable:

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

Now you can use $names inside $f_data to see all the inputted fields.

(Thanks Fred-ii for the heads up about the quotes)