多步骤表格| 用ajax提交表单

Question

我有一个多步骤表格。 该页面有3个容器。 提交第一个容器上的表单时，第一个容器将隐藏，第二个容器将显示。

我想在步骤之间移动（不刷新页面的容器）。 问题是当我使用ajax发送数据并使用event.preventDefault（）或返回false时-数据未发送到我的php页面，我想在此页面中设置从表单到会话的输入值。 如果我删除event.preventDefault，则数据将发布到php页面，但随后也会重新加载该页面，并且不移至下一个“步骤”

这是js的样子：

 $(document).ready(function(e) { $('#myform').submit(function(event) { event.preventDefault(); var formData = { '1': $('select[name=1]').val(), '2': $("#2").val(), '3': $('input[name=3]').val(), '4': $('input[name=4]').val(), '5': $('input[name=5]').val(), '6': $('input[name=6]').val(), '7': $('input[name=7]').val(), }; $.ajax({ type : 'POST', url : 'process.php', data: formData, }) $("#container1").css("display", "none"); $("#container2").css("display", "block"); }); }); 

Answer 1

可以回避提交事件以避免所有这些情况。 不知道您的html是什么样子，但是如果您有一个按钮，则可以执行以下操作，在单击事件而不是Submit事件中通过ajax提交：

<button class="submit-form-btn">Submit</button>

jQuery是这样的：

$('.submit-form-btn').on('click', function () {
  $.ajax({
     type : 'POST',
     url : 'process.php', 
     data: formData
  })

  // do your css to show/hide next form
})