CODEWITHSUNDEEP
javascriptjqueryjquery-steps
Murakami
Murakami

Reputation: 3760

Submit on step change in jQuery Steps

Here's the chunk of the code I have:

    $("#test-wizard").steps({
        headerTag: 'header',
        bodyTag: '.container',
        transitionEffect: "slideLeft",
        autoFocus: true,
        onStepChanged: function(event, currentIndex) {
            $('#skills-form').submit();
            return true;
        }
    });

So as you can see I'm using jQuery Steps to build up the multistep form. On every step, I'd like to send the results (values) to the backend server. In order to do that, I'm using submit(), but it reloads the page which means it won't go to the next step of the form. What I need is to submit the form on every step but prevent from refreshing the whole page which causes the form to go back to the first step. Of course, I tried to use event.preventDefault() on a submit function but then it blocked request to the backend as well (but I need only to block refreshing the page).

Upvotes: 2

Views: 3478

Answers (1)

Nedko Dimitrov
Nedko Dimitrov

Reputation: 5081

Instead of submitting the form you can serialize it and send the data with AJAX

$("#test-wizard").steps({
  headerTag: 'header',
  bodyTag: '.container',
  transitionEffect: "slideLeft",
  autoFocus: true,
  onStepChanged: function(event, currentIndex) {
    var formData = $('#skills-form').serialize(); // Gets the data from the form fields
    $.post('path_to/form_handler_file', formData)
  }
});

Upvotes: 4

Related Questions