Bootstrap Wizard: How can I go to the next step from JavaScript?
I have a upload wizard where one of the steps shows a form with multiple buttons. One of these buttons should trigger an ajax action and if it does, proceed to the next step of the wizard.
From JavaScript bound to the button's onclick event, how can I get the wizard to go to the next step?
+3
source to share
2 answers
If you mean this plugin to call the wizard function like this:
wizard.bootstrapWizard('function_name', someValueIfNeeded);
So, to show the next step, you can do this:
wizard.bootstrapWizard('next')
You can find a complete list of methods 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>
+3
source to share