multi-step form example

by helgatheviking

HTML

<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="" 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"...

CSS

body { background: yellow; }

JavaScript

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+"%");   
  } 
});