Multi Step Form Using PHP,Bootstrap and jQuery

This publishes assist to understand multi-step shape submission with progress bar using PHP, jQuery, and bootstrp3.Multi-steps form is very useful functionality when the person enters data is an excessive amount.

 

There are following steps will observe on this text,

we can create multi-steps UI using bootstrap
Navigation subsequent and former steps the use of jquery
submit the all steps form statistics and get into movement.php file

Simple Example of Multi-step form Using jQuery and Bootstrap

Step 1: We will create the fileindex.php, where we need to test this sample example, I need to include jquery and bootstrap library file in a section of theindex.php file.



<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Here i am using cdn and googleapi path for jquery and bootstrap, you can also use these library locally and replace with your path.

Step 2: Creating HTML UI for all steps which you need in multi step form to follow user and added into index.php file.

 


<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<form id="regiration_form" novalidate action="action.php" method="post">
<fieldset>
<h2>Step 1: Create your account</h2>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="password" placeholder="Password">
</div>
<input type="button" name="password" class="next btn btn-info" value="Next" />
</fieldset>
<fieldset>
<h2> Step 2: Add Personnel Details</h2>
<div class="form-group">
<label for="fName">First Name</label>
<input type="text" class="form-control" name="fName" id="fName" placeholder="First Name">
</div>
<div class="form-group">
<label for="lName">Last Name</label>
<input type="text" class="form-control" name="lName" id="lName" placeholder="Last Name">
</div>
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="button" name="next" class="next btn btn-info" value="Next" />
</fieldset>
<fieldset>
<h2>Step 3: Contact Information</h2>
<div class="form-group">
<label for="mob">Mobile Number</label>
<input type="text" class="form-control" id="mob" placeholder="Mobile Number">
</div>
<div class="form-group">
<label for="address">Address</label>
<textarea class="form-control" name="address" placeholder="Communication Address"></textarea>
</div>
<input type="button" name="previous" class="previous btn btn-default" value="Previous" />
<input type="submit" name="submit" class="submit btn btn-success" value="Submit" />
</fieldset>
</form>

 

i have created 3 steps using HTML field-set control for each step, so whenever user click next and previous button we will slide fieldset based on current step.

Step 3: Add css class in section of index.php file to hide fieldset except first fieldset.


 <style type="text/css"> #regiration_form fieldset:not(:first-of-type) { display: none; } </style> 

Step 4: We will use jQuery to hide and show HTML fieldset for navigation between steps,You need to add below code into footer of index.php file.

 


$(document).ready(function(){
var current = 1,current_step,next_step,steps;
steps = $("fieldset").length;
$(".next").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().next();
next_step.show();
current_step.hide();
setProgressBar(++current);
});
$(".previous").click(function(){
current_step = $(this).parent();
next_step = $(this).parent().prev();
next_step.show();
current_step.hide();
setProgressBar(--current);
});
setProgressBar(current);
// Change progress bar action
function setProgressBar(curStep){
var percent = parseFloat(100 / steps) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
});

Step 5: created action.php file added below code into this file.


<div class="row well alert alert-success"><?php echo "<pre>";print_R($_POST);?></div>

So after completion of all steps user will clicked submit button, We will post all steps data and send to action.php file using form action attribute.

Please follow and like us:



Leave a Comment

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