jcadima
9/9/2016 - 8:42 PM
MultiStep Form
MultiStep Form
<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MultiStep Form Test</title>
<link rel="stylesheet" type="text/css" href="common.css" />
</head>
<body>
<?php
// if
if ( isset( $_POST["step"] ) and $_POST["step"] >= 1 and $_POST["step"] <= 4 ) {
call_user_func( "processStep" . (int)$_POST["step"] ); // our callback # depending on the hidden field step
} else {
displayStep1(); // defaults step 1
}
function processStep1() {
displayStep2();
}
function processStep2() {
if ( isset( $_POST["submitButton"] ) and $_POST["submitButton"] == "Back" ) {
displayStep1();
} else {
displayStep3();
}
}
function processStep3() {
if ( isset( $_POST["submitButton"] ) and $_POST["submitButton"] == "Back" ) {
displayStep2();
} else {
displayStep4();
}
}
function processStep4() {
if ( isset( $_POST["submitButton"] ) and $_POST["submitButton"] == "Back" ) {
displayStep3();
} else {
displayThanks();
}
}
// ========= SET VALUES FOR PREVIOUS STEPS
function setValue( $fieldName ) {
if ( isset( $_POST[$fieldName] ) ) {
echo $_POST[$fieldName];
}
}
function setChecked( $fieldName, $fieldValue ) {
if ( isset( $_POST[$fieldName] ) and $_POST[$fieldName] == $fieldValue ) {
echo ' checked="checked"';
}
}
function setSelected( $fieldName, $fieldValue ) {
if ( isset( $_POST[$fieldName] ) and $_POST[$fieldName] == $fieldValue ) {
echo ' selected="selected"';
}
}
function displayStep1() {
?>
<h1>Member Signup: Step 1</h1>
<form action="registration_multistep.php" method="post">
<div style="width: 30em;">
<input type="hidden" name="step" value="1" />
<input type="hidden" name="gender" value="<?php setValue ( "gender" ) ?>" />
<input type="hidden" name="favoriteWidget" value="<?php setValue ( "favoriteWidget" ) ?>" />
<input type="hidden" name="newsletter" value="<?php setValue ( "newsletter" ) ?>" />
<input type="hidden" name="comments" value="<?php setValue ( "comments" ) ?>" />
<label for="firstName">First name</label>
<input type="text" name="firstName" id="firstName" value="<?php setValue( "firstName" ) ?>" />
<label for="lastName">Last name</label>
<input type="text" name="lastName" id="lastName" value=" <?php setValue ( "lastName" ) ?>" />
<div style="clear: both;">
<input type="submit" name="submitButton" id="nextButton" value= "Next" />
</div>
</div>
</form>
<?php
}
function displayStep2() {
?>
<h1>Member Signup: Step 2</h1>
<form action="registration_multistep.php" method="post">
<div style="width: 30em;">
<input type="hidden" name="step" value="2" />
<input type="hidden" name="firstName" value="<?php setValue ( "firstName" ) ?>" />
<input type="hidden" name="lastName" value="<?php setValue ( "lastName" ) ?>" />
<input type="hidden" name="newsletter" value="<?php setValue ( "newsletter" ) ?>" />
<input type="hidden" name="comments" value="<?php setValue ( "comments" ) ?>" />
<label>Your gender:</label>
<label for="genderMale">Male</label>
<input type="radio" name="gender" id="genderMale" value= "M"<?php setChecked( "gender", "M" )?>/>
<label for="genderFemale">Female</label>
<input type="radio" name="gender" id="genderFemale" value= "F"<?php setChecked( "gender", "F" )?> /><br>
<label for="favoriteWidget">What's your favorite widget? *</label>
<select name="favoriteWidget" id="favoriteWidget" size="1">
<option value="superWidget"<?php setSelected( "favoriteWidget", "superWidget" ) ?>>The SuperWidget</option>
<option value="megaWidget"<?php setSelected( "favoriteWidget", "megaWidget" ) ?>>The MegaWidget</option>
<option value="wonderWidget"<?php setSelected( "favoriteWidget", "wonderWidget" ) ?>>The WonderWidget</option>
</select>
<div style="clear: both;">
<input type="submit" name="submitButton" id="backButton" value="Back" style="margin-right: 20px;" />
<input type="submit" name="submitButton" id="nextButton" value= "Next" />
</div>
</div>
</form>
<?php
}
function displayStep3() {
?>
<h1>Member Signup: Step 3</h1>
<form action="registration_multistep.php" method="post">
<div style="width: 30em;">
<input type="hidden" name="step" value="3" />
<input type="hidden" name="firstName" value="<?php setValue ( "firstName" ) ?>" />
<input type="hidden" name="lastName" value="<?php setValue ( "lastName" ) ?>" />
<input type="hidden" name="gender" value="<?php setValue ( "gender" ) ?>" />
<input type="hidden" name="favoriteWidget" value= "<?php setValue( "favoriteWidget" ) ?>" />
<label for="newsletter">Do you want to receive our newsletter?</label>
<input type="checkbox" name="newsletter" id="newsletter" value= "yes"<?php setChecked( "newsletter", "yes" )?> />
<label for="comments">Any comments?</label>
<textarea name="comments" id="comments" rows="4" cols="50"><?php setValue( "comments" ) ?></textarea>
<div style="clear: both;">
<input type="submit" name="submitButton" id="backButton" value="Back" style="margin-right: 20px;" />
<input type="submit" name="submitButton" id="nextButton" value="Next" />
</div>
</div>
</form>
<?php
}
function displayStep4() {
?>
<h1>Member Signup: Step 4</h1>
<form action="registration_multistep.php" method="post">
<div style="width: 30em;">
<input type="hidden" name="step" value="4" />
<input type="hidden" name="firstName" value="<?php setValue ( "firstName" ) ?>" />
<input type="hidden" name="lastName" value="<?php setValue ( "lastName" ) ?>" />
<input type="hidden" name="gender" value="<?php setValue ( "gender" ) ?>" />
<input type="hidden" name="favoriteWidget" value= "<?php setValue( "favoriteWidget" ) ?>" />
<input type="hidden" name="newsletter" value="<?php setValue("newsletter") ; ?>">
<input type="hidden" name="comments" value="<?php setValue("comments") ; ?>">
<label for="">NickName: </label>
<input type="text" name="nickname" value="<?php setValue( "nickname" )?>">
<div style="clear: both;">
<input type="submit" name="submitButton" id="backButton" value="Back" style="margin-right: 20px;" />
<input type="submit" name="submitButton" id="nextButton" value="Next" />
</div>
</div>
</form>
<?php
}
function displayThanks() {
// this is where we send email
?>
<h1>Thank You</h1>
<p>Thank you, your application has been received.</p>
<?php
echo "The following info will be submitted:";
echo '<pre>';
print_r($_POST) ;
echo '</pre>';
}
?>
</body>
</html>