View updated version with form and validation Multi step form with progress bar and validation
Lets do it step by step
Include bootstrap, jquery javascripts and css
|
1 2 |
<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script> |
Add bootstrap progress bar
|
1 2 3 |
<div class="progress"> <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100"</div> </div> |
Notice class progress-bar-striped and active, they both have roles. progress-bar-striped makes progress bar stripped and class active adds progress animation to it.
HTML for steps widget and buttons
|
1 2 3 4 5 6 7 8 9 |
<div class="step well">Step 1</div> <div class="step well">Step 2</div> <div class="step well">Step 3</div> <div class="step well">Step 4</div> <div class="step well">Step 5</div> <div class="step well">Step 6</div> <pre class="brush:html"><button class="action back btn btn-info">Back</button> <button class="action next btn btn-info">Next</button> <button class="action submit btn btn-success">Submit</button> |
And now the heart of the widget, jQuery code
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
$(document).ready(function(){ var current = 1; widget = $(".step"); btnnext = $(".next"); btnback = $(".back"); btnsubmit = $(".submit"); // Init buttons and UI widget.not(':eq(0)').hide(); hideButtons(current); setProgress(current); // Next button click action btnnext.click(function(){ if(current < widget.length){ widget.show(); widget.not(':eq('+(current++)+')').hide(); setProgress(current); } hideButtons(current); }) // Back button click action btnback.click(function(){ if(current > 1){ current = current - 2; btnnext.trigger('click'); } hideButtons(current); }) }); // Change progress bar action setProgress = function(currstep){ var percent = parseFloat(100 / widget.length) * currstep; percent = percent.toFixed(); $(".progress-bar") .css("width",percent+"%") .html(percent+"%"); } // Hide buttons according to the current step hideButtons = function(current){ var limit = parseInt(widget.length); $(".action").hide(); if(current < limit) btnnext.show(); if(current > 1) btnback.show(); if (current == limit) { btnnext.hide(); btnsubmit.show(); } } |
View updated version with form and validation Multi step form with progress bar and validation
[…] This is continuity of my previous similar post Multi step form with bootstrap and jquery. […]
it gives an error at: if(current < widget.length){
[…] Multi step form with bootstrap and jquery […]