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?

A downvote and no comment to explain it? How come? I did read all the documentation I could find, I searched google & stackoverflow and did not find anything... what have I done wrong? — Lying Dog, Oct 12 '14 at 16:04

score 7 · Answer 1 · answered Dec 23 '15 at 13:58

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

What about my question on [Using Step Wizard in Application Form](https://stackoverflow.com/questions/57753630/using-step-wizard-in-application-form)? Thanks in advance... — , Sep 02 '19 at 09:46
Not exactly :) I would prefer to get your valuable opinions and suggestions to my question on that page. Thanks in advance... — , Sep 03 '19 at 16:57

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

1 Answers1