javascriptjqueryjquery-steps

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).


Solution

  • 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)
      }
    });