clone set of form fields and append number to name based on variable

[SF23103]

I have a multi page form, in which the person selects the number of people to register for an event on page 1.  That variable is passed on to page two.  On page two, I would like to take the variable of number of people (ex. "3").  and display that number of sets of registration text fields.  What makes it difficult is that each set needs to have a number appended to their input name in order to work with my database.

 

Can anyone think of a way to do this?  

 

 

Below is an example of the html I have for the form fields I am duplicating. In this case, I have "1" appended to the form input names as an example.

<div class="form_fields_enthusiast_1">
<p><label for="Name">Name:</label>
<input name="First_Name_1" type="text" value="" size="16" maxlength="35" placeholder="First"/>
<input name="Middle_Name_1" type="text" value="" size="16" maxlength="35" placeholder="Middle"/>
<input name="Last_Name_1" type="text" value="" size="16" maxlength="35" placeholder="Last"/><span style="font-size:11px">(Required)</span></p>

<div style="display:none">
<input type="text" name="email_address_1" value="" /> 
</div>

<p><label for="address_1">Address:</label>
<input name="Address_1" type="text" value="" size="25" maxlength="35" placeholder="123 Main Street"/>
<input name="apt_1" type="text" value="" size="4" maxlength="5" placeholder="APT"/><span style="font-size:11px">(Required)</span></p>

<p><label for="City_1">City:</label>
<input name="City_1" type="text" value="" size="16" maxlength="35" placeholder="San Francisco"/>  
State: <input name="State_1" type="text" value="" size="3" maxlength="10" placeholder="CA"/>  
ZIP:<input name="Zip_1" type="text" value="" size="10" maxlength="10" placeholder="12345" /><span style="font-size:11px">(Required)</span></p>

<p><label for="home_phone_1">Home Phone:</label>
<input name="home_phone_1" type="text" value="" size="16" maxlength="18" placeholder="555-555-5555" /><span style="font-size:11px">(Required)</span></p>

<p><label for="cell_phone_1">Cell Phone:</label>
<input name="cell_phone_1" type="text" value="" size="16" maxlength="18" placeholder="555-555-5555" /><span style="font-size:11px"></span></p>

<p><label for="email_1">Email:</label><input name="email" type="text" value="" size="30" maxlength="40" placeholder="you@gmail.com" /><span style="font-size:11px">(Required)</span></p>

<p><label for="birthday_1">Date of Birth:</label>
<input name="birthday" type="text" value="" size="16" maxlength="10" placeholder="MM/DD/YYYY" /><span style="font-size:11px">(Required)</span></p>

<p><label for="student_id_1">Student ID#:</label>
<input name="student_id_1" type="text" value="" size="16" maxlength="16" placeholder="" /></p>

</div>

[benanamen]

You are going about it wrong.

 

Use a for loop to generate the field sets. In the following example, 3 is the number passed from page 1.

<?php 
for ($x = 0; $x <= 3; $x++) {
    echo "<input name="First_Name[]" type="text" value="" size="16" maxlength="35" placeholder="First"/>>";
} 
?>

The element names need [ ], not numbers appended. That will create an indexed array of your form fields.

ie. cell_phone[]

 

If your database "requires" the under_score_numbers you have something else wrong with your DB design. If you post a dump of your DB schema we can tell you if it needs anything.

 

You would use a for loop to insert into your DB

 

<?php
if ($_POST)
    {
    $db = new PDO("mysql:host=localhost;dbname=phphelp_form_array", "user", "pass");
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $insertStmt = $db->prepare("INSERT INTO datatable (field1, field2) VALUES (?,?)");
    
    for ($i = 0; $i < count($_POST['field1']); $i++)
        {
        $insertStmt->execute(array(
            $_POST['field1'][$i],
            $_POST['field2'][$i]
        ));
        }
    }
?>

Edited December 7, 2015 by benanamen

[SF23103]

Thank you for your help.  My database doesn't necessarily need a name_underscore_number, but it needs a unique name associated with the form field.  I am using a third party software that processes the form.  I can then view the responses in an organized way with the backend of the program.

[cyberRobot]

You could do something like this:

<?php
$numOfPeople = $_GET['number'];
for($i=1; $i<=$numOfPeople; $i++) {
    echo "<div style='margin-top:3em;'>Persion $i</div>";
    ?>
    <p><label>Home Phone: <input name="home_phone_<?php print $i; ?>" type="text" value="" size="16" maxlength="18" placeholder="555-555-5555" /></label><span style="font-size:11px">(Required)</span></p>
    <p><label for="cell_phone_<?php print $i; ?>">Cell Phone:</label> <input name="cell_phone_<?php print $i; ?>" id="cell_phone_<?php print $i; ?>" type="text" value="" size="16" maxlength="18" placeholder="555-555-5555" /><span style="font-size:11px"></span></p>
    <?php
}
?>

 

Note that I fixed the <label> tags. For <label> tags to work, they either need to wrap around the label and the corresponding form field. Or the for attribute for the <label> tag needs to match up with the id attribute of the form field. More information can be found here:

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label

[SF23103]

Thanks for catching my label error and for the suggestion.  I ended up doing this:

<?php 
$counter = 0;

for ($x = 1; $x <= 5; $x++) {
	$counter++;
    echo "Student " . $counter . ":";
	echo "<div class=\"form_fields_enthusiast\">
	
<p><label for=\"Name\">Name:</label>
<input name=\"First_Name_" . $counter .
"\" type=\"text\" value=\"\" size=\"16\" maxlength=\"35\" placeholder=\"First\"/>
<input name=\"Middle_Name_" . $counter . "\" type=\"text\" value=\"\" size=\"16\" maxlength=\"35\" placeholder=\"Middle\"/>
<input name=\"Last_Name_" . $counter . "\" type=\"text\" value=\"\" size=\"16\" maxlength=\"35\" placeholder=\"Last\"/><span style=\"font-size:11px\">(Required)</span></p>
<div style=\"display:none\">
<input type=\"text\" name=\"email_address_" . $counter . "\" value=\"\" /> 
</div>

<p><label for=\"address_" . $counter . "\">Address:</label>
<input name=\"Address_" . $counter . "\" type=\"text\" value=\"\" size=\"25\" maxlength=\"35\" placeholder=\"123 Main Street\"/>
<input name=\"apt_" . $counter . "\" type=\"text\" value=\"\" size=\"4\" maxlength=\"5\" placeholder=\"APT\"/><span style=\"font-size:11px\">(Required)</span></label></p>

<p><label for=\"City_" . $counter . "\">City:</label>
<input name=\"City\" type=\"text\" value=\"\" size=\"16\" maxlength=\"35\" placeholder=\"San Francisco\"/>  
State: <input name=\"State\" type=\"text\" value=\"\" size=\"3\" maxlength=\"10\" placeholder=\"CA\"/>  
ZIP:<input name=\"Zip_" . $counter . "\" type=\"text\" value=\"\" size=\"10\" maxlength=\"10\" placeholder=\"94574\" /><span style=\"font-size:11px\">(Required)</span></label></p>

<p><label for=\"home_phone_" . $counter . "\">Home Phone:</label>
<input name=\"home_phone_" . $counter . "\" type=\"text\" value=\"\" size=\"16\" maxlength=\"18\" placeholder=\"555-555-5555\" /><span style=\"font-size:11px\">(Required)</span></label></p>

<p><label for=\"cell_phone_" . $counter . "\">Cell Phone:</label>
<input name=\"cell_phone_" . $counter . "\" type=\"text\" value=\"\" size=\"16\" maxlength=\"18\" placeholder=\"555-555-5555\" /><span style=\"font-size:11px\"></span></label></p>

<p><label for=\"email_" . $counter . "\">Email:</label><input name=\"email\" type=\"text\" value=\"\" size=\"30\" maxlength=\"40\" placeholder=\"you@gmail.com\" /><span style=\"font-size:11px\">(Required)</span></label></p>

<p><label for=\"birthday_" . $counter . "\">Date of Birth:</label>
<input name=\"birthday\" type=\"text\" value=\"\" size=\"16\" maxlength=\"10\" placeholder=\"MM/DD/YYYY\" /><span style=\"font-size:11px\">(Required)</span></label></p>

<p><label for=\"student_id_" . $counter . "\">Student ID#:</label>
<input name=\"student_id_" . $counter . "\" type=\"text\" value=\"\" size=\"16\" maxlength=\"16\" placeholder=\"\" /></label></p>

</div>";
} 
?>

[benanamen]

For that much html you should use heredoc or escape out of php.