JavaScriptJquery

Multi Step Form with Progress Bar Using jQuery

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>

Related Articles

Leave a Reply

Check Also
Close
Back to top button