在 jQuery Steps 中提交步骤更改答案

【问题标题】：Submit on step change in jQuery Steps在 jQuery Steps 中提交步骤更改
【发布时间】：2018-10-23 09:52:16
【问题描述】：

这是我的代码块：

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

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

【问题讨论】：

不刷新页面需要ajax

标签： javascript jquery jquery-steps

【解决方案1】：

您可以序列化它并使用 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)
  }
});

【讨论】：