Multi-page forms using hidden input fields
Passing PHP form variables from one page to other. The previous post explained how to pass the variables between pages using sessions. This page shows you how to accomplish the same using hidden fields.
Hidden input fields are form fields that are not visible. The user can't see or change this fields, and they are used to transmit state information between different pages. Let's use hidden fields to transport our data across our form, to the final processing script.
We start with the same form for step 1:
<form method="post" action="form2.php">
<input type="text" name="name">
<input type="text" name="email_address">
<input type="submit" value="Go To Step 2">
</form>
Ok, so nothing more than 2 input fields and a submit button to take us to step 2. In the following page, apart from the HTML form to gather membership data, we are going to need code to store the submitted data from step 1 in the session.
<form method="post" action="form3.php">
<input type="radio" group="membership_type" value="Free">
<input type="radio" group="membership_type" value="Normal">
<input type="radio" group="membership_type" value="Deluxe">
<input type="checkbox" name="terms_and_conditions">
<input type="hidden" name="name"
value="<?php echo $_POST['name']; ?>">
<input type="hidden" name="email_address"
value="<?php echo $_POST['email_address']; ?>">
<input type="submit" value="Go To Step 3">
</form>
Please note that although the hidden fields are not visible to the visitor, they are visible in source of the page, so you must not use them to store critical information.
Now our form contains all the data entered so far, which we are going to post to the third part of the form.
<form method="post" action="form_process.php">
<input type="text" name="name_on_card">
<input type="text" name="credit_card_number">
<input type="text" name="credit_card_expiration_date">
<input type="hidden" name="name"
value="<?php echo $_POST['name']; ?>">
<input type="hidden" name="email_address"
value="<?php echo $_POST['email_address'];
<input type="hidden" name="membership_type"
value="<?php echo $_POST['membership_type']; ?>">
<input type="hidden" name="terms_and_conditions"
value="<?php echo $_POST['terms_and_conditions]; ?>">
<input type="submit" value="Finish">
</form>
Now that we have all our fields available, let's proceed to the form processing.
<?php
//let's create the query
$insert_query = "insert into subscriptions (".
"name,".
"email_address,".
"membership_type".
"terms_and_conditions,".
"name_on_card,".
"credit_card_number,".
"credit_card_expiration_data".
") values (".
"'" . $_POST['name'] . "', ".
"'" . $_POST['email_address'] . "',".
"'" . $_POST['membership_type'] . "',".
"'" . $_POST['terms_and_conditions'] . "',".
"'" . $_POST['name_on_card'] . "',".
"'" . $_POST['credit_card_number'] . "',".
"'" . $_POST['credit_card_expiration'] ."' )";
//let's run the query
mysql_query($insert_query);
?>
And that's it. Please note that this time, we have all the data available in the $_POST array.
A good idea would be to use form validation for each step of the form, so you don't end up with incomplete data in the database.
Now you know two methods of creating multipart forms, to create better user-experience for your visitors.
