在 jQuery 步中提交步骤更改

Question

这是我的代码块：

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

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

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

在 jQuery 步中提交步骤更改

Submit on step change in jQuery Steps

javascript

jquery

jquery-steps