Bootstrap wizard: how can I move to the next step from JavaScript?

Question

I have a bootstrap wizard where one of the steps shows a form with several buttons. One of those buttons needs to call an ajax action, and, if that is successful, move on to the next step in the wizard.

From the JavaScript tied to the onclick-Event of the button, how can I tell the wizard to move to the next step?

Answer 1

If you mean to this plugin so you call the wizard function like this:

wizard.bootstrapWizard('function_name', someValueIfNeeded);

So, for showing the next step you can do this:

wizard.bootstrapWizard('next')

The full methods list you can find in the docs

 var wizard = $('#rootwizard').bootstrapWizard(); $('button').click(function(){ wizard.bootstrapWizard('next') }); 

 #page { width:600px; margin:50px auto; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap-wizard/1.2/jquery.bootstrap.wizard.min.js"></script> <div id="page"> <div id="rootwizard"> <div class="navbar"> <div class="navbar-inner"> <div class="container"> <ul> <li><a href="#tab1" data-toggle="tab">First</a></li> <li><a href="#tab2" data-toggle="tab">Second</a></li> <li><a href="#tab3" data-toggle="tab">Third</a></li> <li><a href="#tab4" data-toggle="tab">Forth</a></li> <li><a href="#tab5" data-toggle="tab">Fifth</a></li> <li><a href="#tab6" data-toggle="tab">Sixth</a></li> <li><a href="#tab7" data-toggle="tab">Seventh</a></li> </ul> </div> </div> </div> <div class="tab-content"> <div class="tab-pane" id="tab1"> 1 </div> <div class="tab-pane" id="tab2"> 2 </div> <div class="tab-pane" id="tab3"> 3 </div> <div class="tab-pane" id="tab4"> 4 </div> <div class="tab-pane" id="tab5"> 5 </div> <div class="tab-pane" id="tab6"> 6 </div> <div class="tab-pane" id="tab7"> 7 </div> </div> </div> <button>Next</button> </div> 

http://jsbin.com/mufomov/1

Answer 2

Fortunately, now you have a jQuery plugin for creating a responsive form wizard UI created by Vincent Gabriel.

I have created a complete tutorial on how to create a simple bootstrap form wizard here:

http://codezag.com/bootstrap-form-wizard-with-validation/