[Solved] Bootstrap Wizard Next button not working issue

If you are breaking down a lengthy form into a form wizard containing multiple shorter form groups improve the visual organization of input elements, then the best thing you could do is to use Bootstrap Wizard. It saves your life. I recently implemented Bootstrap Wizard in one of my projects and I faced an issue. The “Next” button was not working after the first time I clicked it. But I was able to navigate to different steps in the form wizard by clicking navigation tabs. This was initially little weird.

Solution to Bootstrap Wizard ‘Next’ button not working issue

I tried a few things. I finally found that it was because of the bootstrap Javascript version. I was using bootstrap version 3.3.4, which was the latest at the time of writing this article. Then I tried version 2.3.2 of bootstrap javascript library. The “Next” button started working fine.

As you can see I had four steps in the form.  The first step was “Personal details”. When the “Next” button on this step is clicked it takes to the second step. That is “Address” step. But the “Next” button and the “Previous” button in the step were not working. The error is basically because, the bootstrap-wizard.js script was designed for bootstrap version 2.x.x and not updated after it. So you can fix this issue by downgrading your Bootstrap javascript version to 2.3.2.

Here is the CDN link to twitter bootstrap version 2.3.2 .

Other solutions to the issue

After downgrading the javascript library, the next button still didn’t work check the following.

  1. Check if the bootstrap-wizard.js is properly included in your HTML document after jQuery (or equivalent library) and Bootsrap.js .
  2. Make sure that you specify which element to be converted as form wizard by adding  $(‘#ID_of_your_bootstrap_wizard_container_element’).bootstrapWizard();
  3. Make sure that you have added the above code after the document ready event.
  4. Make sure that there are no issues like jQuery conflict, etc.
ALSO READ  How to create a Bootstrap Form Wizard with Validation

 

If you are still unable to fix the issue. Please comment below, I will try to help you fix the issue.

2 Comments

  1. wakajob August 24, 2015

Leave a Reply