在jQuery 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;
        }
    });

因为你可以看到我正在使用jQuery步骤来构建多步骤表单。在每一步，我都想将结果（值）发送到后端服务器。为了做到这一点，我正在使用submit（），但它重新加载页面，这意味着它不会进入表单的下一步。我需要的是在每一步提交表单，但防止刷新整个页面，导致表单返回到第一步。当然，我尝试在提交函数上使用event.preventDefault（），但它也阻止了对后端的请求（但我只需要阻止刷新页面）。

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

推荐答案

您可以序列化表单并使用AJAX发送数据，而不是提交表单

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

这篇关于在jQuery Steps中提交步骤更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！