Submit each step and then next in bootstrap wizard

Question

Actually I have to design a form with multi steps. Using bootstrap wizard I tried alot but it jumps to the first step when one step(form) is submited. How can I prevent it from going to the first step and to go to the next step after successfully saving the current data to the database. I am using php and javascript languages. Any help ? is it possible? or I have to design a page for each step rather than wizard tabs. Thanks in advance.

there are a lot of bootstrap wizard, whic are you using, you don't expect us to guess — Smith, Oct 31 '14 at 03:53
Hi Sahib, please did you get answer to your question. I also have similar challenge, I want to submit or request to/from database on the click of next button, but I have got no idea on how to do it. — Kunbi, Oct 31 '14 at 13:26
try this link http://stackoverflow.com/questions/24599180/how-to-return-the-response-from-jquery-ajax — Parik Tiwari, Nov 21 '14 at 00:29

chriz · Answer 1 · 2014-06-21T09:53:09.600

6

i have worked with bootstrap wizard, i was using the following code for moving to next or previous tab after submitting data..

for moving next tab

$('#form_wizard').bootstrapWizard('next');

for moving previous

$('#form_wizard').bootstrapWizard('previous');

have a look here

edited Jun 21 '14 at 09:53

answered Jun 21 '14 at 09:13

chriz

1,339
2
16
32

And then `$('#form_wizard').bootstrapWizard('next');` is reset again to first – Sahib Jun 21 '14 at 10:30
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:45

score 2 · Answer 2 · edited Oct 03 '14 at 08:47

When you click Submit button you can make an ajax call and send your data to your back-end as a jsonObject. In your back-end you handle your data as you like, and you send back a response. So, On success you return to your page without reloading it, and you continue from the point you were before. Here is a rough example

$('#submit_btn').click(function() {
   $.ajax({
          type: "POST",
          url: "/your/page",
          data: jsonData,
          contentType:'application/json',
          processData: false,              
          error: function(response) {console.log('ERROR '+Object.keys(response)); },
          success: function(response) { console.log('SuCCESS'+Object.keys(response));
});

Note that response is an object and you can get its data like this response.*attribute*

Submit each step and then next in bootstrap wizard

2 Answers2