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

Lying Dog picture Lying Dog · Oct 12, 2014 · Viewed 10.1k times · Source

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

Mosh Feu picture Mosh Feu · Dec 23, 2015

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