Multi-step form processing using PHP with jQuery form validation

  •  
  •  
  •  
  •  
  •  
  •  

This tutorial will help you to understand how multi-step form processing will work. Here in the tutorial, we will achieve this using PHP. Apart from multi-step form processing, you will also learn how to do form validation using the help of jQuery. Multi-step form processing is very useful functionality when users have to input too much data. Then we will divide these fields into several forms and associate these forms using HTML”action” tag. In the last form, we will gather all the form’s data and submit it to the database or do whatever your need.

Multi-step form processing using php with jquery form validation

JS Libraries

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery.Validate/1.6/jQuery.Validate.min.js"></script>

You have to include above mentioned two libraries in each file between the “<head></head> section”.

Form – 1

<form action="form-page2.php" method="post" id="form">
  <table>
    <tr>
    <th colspan="3" scope="row">
      <h3 style="border-bottom:1px solid #000;">Form 1 </h3>
      <div align="center"></div></th>
    </tr>
    <tr>
    <th scope="row"><div align="right">Name</div></th>
    <td><div align="center"><strong>:</strong></div></td>
    <td><input type="text" name="name" class="required" value="" /></td>
    </tr>
    <tr>
    <th scope="row"><div align="right">Email</div></th>
    <td><div align="center"><strong>:</strong></div></td>
    <td><input type="text" name="email" class="required" value="" /></td>
    </tr>
    <tr>
    <th scope="row"><div align="right">Mobile</div></th>
    <td><div align="center"><strong>:</strong></div></td>
    <td><input type="text" name="mobile" value="" /></td>
    </tr>
    <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td><input type="submit" name="submitBtn" id="submitBtn" value="Next" /></td>
    </tr>
  </table>
</form>

Form1 receives the Name, Email and Mobile number from the user and transmits it to the next form. But before sending, it does the form validation.

Form – 1 Validation

$(document).ready(function() {
  $("#form").validate({
     rules: {
       email : {
       	  required: true,
         email: true
       },
       mobile: {
         required : true,
         digits: true,
         minlength: 10,
         maxlength: 10
       }
     },
     
     //Specify the validation error messages here
     messages: {
       email: {
       	required: "Please enter email address",
        email: "Please enter a valid email address"
       },
       mobile: {
       	required : "Please enter your mobile number",
       	digits: "Please enter digits only"
       }
     },
     submitHandler: function(form) {
       form.submit();
     }
  });
});

The form validation part is simple straight forward. Within “rules” section you have to set different properties for each field. Within the “message” section you can set the custom message for each property defined in “rules” section.

Multi-step form processing using hidden input fields

HTML hidden input fields are form fields that are not visible on the web page. Users can’t see this fields. We will use hidden fields for transmitting data from one form to another form.

Form – 2

<form action="form-page3.php" method="post" id="form">
  <?php
  if(!isset($_POST['submitBtn'])) header('location: index.php');
  foreach($_POST as $key => $value) {
    if($key != 'submitBtn') {
    ?>
      <input type="hidden" name="<?php echo $key; ?>" value="<?php echo $value; ?>" />
    <?php	
    }
  }
  ?>
  <table width="500">
    <tr>
      <th colspan="3" scope="row"><h3>Form 2</h3></th>
      </tr>
    <tr>
    <th scope="row"><div align="right">Password</div></th>
    <td><div align="center"><strong>:</strong></div></td>
    <td><input type="password" id="password" name="password" value="" /></td>
    </tr>
    <tr>
    <th scope="row"><div align="right">Confirm Password</div></th>
    <td><div align="center"><strong>:</strong></div></td>
    <td><input type="password" name="confirm_password" id="confirm_password" value="" /></td>
    </tr>
    <tr>
    <th scope="row">&nbsp;</th>
    <td>&nbsp;</td>
    <td><input type="submit" name="submitBtn" id="submitBtn" value="Next" /></td>
    </tr>
  </table>
</form>

At the beginning of form2, you can see a small piece of PHP code.

<?php
    if(!isset($_POST['submitBtn'])) header('location: index.php');
    foreach($_POST as $key => $value) {
      if($key != 'submitBtn') {
      ?>
          <input type="hidden" name="<?php echo $key; ?>" value="<?php echo $value; ?>" />
      <?php	
      }
    }
?>

The first line of PHP code will send back to the index.php page or the previous form of the current page if someone trying to get enter directly on the following page or hit enter in the address bar. Within the foreach loop, we will accept all the form fields except the value of the submit button named “submitBtn” because we don’t need it. Then one by one dynamically we will create hidden fields and assign the name and the value respectively as it was in the previous form.

Form – 2 Validation

$(document).ready(function() {
  $("#form").validate({
     rules: {
       password : {
       	  required: true,
         minlength: 6
       },
       confirm_password: {
         required : true,
         equalTo: '#password'
       }
     },
     submitHandler: function(form) {
       form.submit();
     }
  });
});

Form – 3

  <div class="wrapperDiv">
    <form action="process-complete.php" method="post" id="form">
      <?php
      if(!isset($_POST['submitBtn'])) header('location: form-page2.php');
      foreach($_POST as $key => $value) {
        if($key != 'submitBtn') {
        ?>
          <input type="hidden" name="<?php echo $key; ?>" value="<?php echo $value; ?>" />
        <?php	
        }
      }
      ?>
      <table width="500">
        <tr>
          <th colspan="3" scope="row"><h3>Form 3</h3></th>
          </tr>
        <tr>
        <th scope="row"><div align="right">City</div></th>
        <td><div align="center"><strong>:</strong></div></td>
        <td><input type="text" name="city" value="" class="required" /></td>
        </tr>
        <tr>
        <th scope="row"><div align="right">Street</div></th>
        <td><div align="center"><strong>:</strong></div></td>
        <td><input type="text" name="street" value="" class="required" /></td>
        </tr>
        <tr>
        <th scope="row"><div align="right">District</div></th>
        <td><div align="center"><strong>:</strong></div></td>
        <td><input type="text" name="district" value="" class="required" /></td>
        </tr>
        <tr>
        <th scope="row">&nbsp;</th>
        <td>&nbsp;</td>
        <td><input type="submit" name="submitBtn" id="submitBtn" value="Save" /></td>
        </tr>
      </table>
    </form>
  </div>
  
  <script type="text/javascript">
     $(document).ready(function() {
        $("#form").validate();
     });
</script>

Form3 doesn’t require any special validation except its input fields are mandatory. So we can simply assign a class “required” to the fields. That’s all.

Final step of Multi-step form processing

<?php
if(!isset($_POST['submitBtn'])) header('location: form-page3.php');
?>

<table width="500">
  <tr>
  <th colspan="3" scope="row"><h3>Form Processing Complete </h3></th>
  </tr>
  <tr>
  <th scope="row"><div align="right">Name</div></th>
  <td><div align="center"><strong>:</strong></div></td>
  <td><?php echo $_POST['name'];?></td>
  </tr>
  <tr>
  <th scope="row"><div align="right">Email</div></th>
  <td><div align="center"><strong>:</strong></div></td>
  <td><?php echo $_POST['email'];?></td>
  </tr>
  <tr>
  <th scope="row"><div align="right">Mobile</div></th>
  <td><div align="center"><strong>:</strong></div></td>
  <td><?php echo $_POST['mobile'];?></td>
  </tr>
  <tr>
  <th scope="row"><div align="right">Address</div></th>
  <td><div align="center"><strong>:</strong></div></td>
  <td><?php echo $_POST['city'] . "," . $_POST['street'] . "," . $_POST['district'];?></td>
  </tr>
</table>

In the final step, we will gather data from all the three forms and display it on the web page as a tabular form. Further more you can store it in the database or manipulate these data as your requirement.

You can download the complete source code from the below download link and please like and share the tutorial link to others.

About Mitrajit

2 comments on “Multi-step form processing using PHP with jQuery form validation

  1. Awesome!!
    I want to ask, what if I want to insert data on first button click ( which is on the first page ) and then update the database with new fields on the rest forms.

Leave a Reply

Your email address will not be published. Required fields are marked *

Prove you are a human *