Pass dynamic text input to PHP in order to write t

Question

building my very first website but can't figure out this last bit. My RSVP form has the following user inputs: 1) number of guests in a drop down select menu 2) Guest names 3) text area. After user selects the number, Guest name text boxes dynamically appear for name input. Once all is done, user clicks RSVP and PHP code writes it to text file.

Problem: Guest number and text area writes fine but dynamic Guest name boxes don't get passed to PHP.

How should I solve this? Been trying everything. Any help is much appreciated.

<script> //--add numbers to the dropdown select menu and append the options to select--//
$(function() {
  var $select = $("#selectguest");
  for (i=1;i<=10;i++) {
    $select.append($('<option></option>').val(i).html(i))
  }
});
</script>

    <script type='text/javascript'> //--makes Next button responsive to number of guest input--//
        function addFields(){
            // Number of inputs to create
            var number = document.getElementById("selectguest").value;
            // Container <div> where dynamic content will be placed
            var container = document.getElementById("guest_names");
            // Clear previous contents of the container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }
            for (i=0;i<number;i++){
                // Append a node with a random text
                container.appendChild(document.createTextNode("Guest" + (i+1)));
                // Create an <input> element, set its type and name attributes
                var input = document.createElement("input");
                input.type = "text";
                input.name = "guestnames_' + i +'";
                container.appendChild(input);
                // Append a line break 
                container.appendChild(document.createElement("br"));
            }
        }
    </script>

<?php
date_default_timezone_set("America/Vancouver");
//Make sure the file exists.
touch('rsvp.txt');
//Check the length of the comments file.
if ( filesize('rsvp.txt') < 50000 ) {
  //Get the user's message.
  $date = date('l, F jS Y, h:i:s A');
  $guests = substr($_POST['guest_number'], 0, 2);
  $guests = htmlentities($guests);
  $guestnames = substr($_POST['guestnames'], 0, 20);
  $guestnames = htmlentities($guestnames);
  //  Limit it to 2,000 characters.
  $message = substr($_POST['message'], 0, 2000);
  //Convert special characters to HTML entities.
  $message = htmlentities($message);
  //Append message to the RSVP file.
  $f = fopen('rsvp.txt', 'a');
  fwrite($f, "\r\n$date\r\n$guests\r\n$guestnames\r\n$message\r\n");
  fclose($f);
}
//Jump back to whichever page.
header("refresh:3; index.html");
?>

<form class="RSVPform" action="rsvp.php" method="post">
  <div>
    <p>Please select the number of guests and enter their names. Once you're ready, click RSVP and you're all set!</p><br>
    <center>Number of Guests: <select id="selectguest" name="guest_number" onChange="addFields()"></select><br><div id="guest_names" name="guest_names"/></div><br><hr><p align="left"><font size=2>Have dietary preferences? Tell us in the message box below.</font></p><textarea id="text" placeholder="Leave a message for the bride &amp groom!" name="message" id="guest_message" rows="5" cols="48"></textarea><button type="submit" id="RSVP">RSVP</button></center>
  </div>
  </form>

Answer 1

You are not posting $_POST['guestnames'] but a lot of $_POST['guestnames_#'].

On your HTML page change the name of the guestnames inputs to:

input.name = "guestnames[]";

In your PHP script you can now access $_POST['guestnames'].

This will be an array so you have to do something like

$guestnames = "";
foreach ($_POST['guestnames'] as $guest)
{
    $guestnames .= ", ".trim($guest); //trim whitespaces from beginning and end of string.
}

$guestnames = htmlentities(substr($guestnames, 2)); //strip the first comma and space and run through htmlentities.