Now a days multi step form is more popular than regular form , as it is more user friendly rather than regular form. The multi step form is the best solution when there are too many fields in a from. So breaking large form into multiple step is more user friendly.
So in this tutorial we will learn , how we can create multi step form using jquery.
Step 1 : Add Html Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Multistep Form In Jquery</title>
<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>
<style type="text/css">
#multistep_form fieldset:not(:first-of-type) {
display: none;
}
</style>
</head>
<body>
<h3 class="text-success" align="center">Multistep Form In Jquery</h3><br>
<div class="container">
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="panel-group">
<div class="panel panel-primary">
<div class="panel-heading">Multistep Form In Jquery</div>
<form class="form-horizontal" action="/action_page.php" id="multistep_form">
<fieldset id="account">
<div class="panel-body"><h4>Step 1: Create your account</h4><br>
<div class="form-group">
<label class="control-label col-sm-2" for="email">Email:</label>
<div class="col-sm-5">
<input type="email" class="form-control" id="email" name="email">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="pwd">Password:</label>
<div class="col-sm-5">
<input type="password" class="form-control" id="pwd" name="pwd">
</div>
</div>
<input type="button" name="password" class="next btn btn-info" value="Next" id="next1" style='margin-left:30%'/>
</div>
</fieldset>
<fieldset id="personal">
<div class="panel-body"><h4>Step 2: Personnel Details</h4><br>
<div class="form-group">
<label class="control-label col-sm-2" for="fname">First Name:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="fname" name="fname">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="lname">Last Name:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="lname" name="lname">
</div>
</div>
<input type="button" name="previous" class="previous btn btn-warning" value="Previous" id="previous1" style='margin-left:30%'/>
<input type="button" name="next" class="next btn btn-info" value="Next" id="next2" style='margin-left:30%'/>
</div>
</fieldset>
<fieldset id="contact">
<div class="panel-body"><h4>Step 3: Contact Details</h4><br>
<div class="form-group">
<label class="control-label col-sm-2" for="mobno">Mobile Number:</label>
<div class="col-sm-5">
<input type="text" class="form-control" id="mobno" name="mobno">
</div>
</div>
<div class="form-group">
<label class="control-label col-sm-2" for="address">Address:</label>
<div class="col-sm-5">
<textarea class="form-control" name="address" id="address"></textarea>
</div>
</div>
<input type="button" name="previous" class="previous btn btn-warning" value="Previous" id="previous2" style='margin-left:30%'/>
<input type="submit" name="submit" class="submit btn btn-success" value="Submit" id="next3" style='margin-left:30%'/>
</div>
</fieldset>
</form>
</div>
</div>
</div>
Step 2 : Add Jquery Code:
<script>
$(document).ready(function(){
var form_count = 1, form_count_form, next_form, total_forms;
total_forms = $("fieldset").length;
$(".next").click(function(){
let previous = $(this).closest("fieldset").attr('id');
let next = $('#'+this.id).closest('fieldset').next('fieldset').attr('id');
$('#'+next).show();
$('#'+previous).hide();
setProgressBar(++form_count);
});
$(".previous").click(function(){
let current = $(this).closest("fieldset").attr('id');
let previous = $('#'+this.id).closest('fieldset').prev('fieldset').attr('id');
$('#'+previous).show();
$('#'+current).hide();
setProgressBar(--form_count);
});
setProgressBar(form_count);
function setProgressBar(curStep){
var percent = parseFloat(100 / total_forms) * curStep;
percent = percent.toFixed();
$(".progress-bar")
.css("width",percent+"%")
.html(percent+"%");
}
});
</script>
</body>
</html>