在 jQuery Steps 中提交步驟更改

Question

這是我擁有的代碼塊：

    $("#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() 但隨后它也阻止了對后端的請求（但我只需要阻止刷新頁面）。

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