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

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

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

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

1 个答案: