Ajax表单提交，事件侦听器和更改提交按钮类型

Question

我有一个带有选项卡式表单的单页网站，访客使用按钮进行浏览。在最后一个标签上，我想将按钮类型更改为submit，然后使用AJAX提交表单。

每个标签都有一个下一个按钮。

<button type="button" id="nextBtn" onclick="nextPrev(1)">Continue</button>

当访问者到达最后一个标签时，我使用javascript更改了按钮的文本值。

document.getElementById("nextBtn").innerHTML = "Submit";

我想使用AJAX来帮助提交表单而无需重新加载页面。我添加以下内容，将type从button更改为submit。

document.getElementById("nextBtn").type = "submit";

在我的AJAX脚本中，我有此事件侦听器

$(form).submit(function(e) {
  e.preventDefault(); 
  // ...

加载上一个选项卡后，我认为AJAX脚本（以及在表单action中指定的表单处理程序脚本）在单击“提交”按钮之前便已运行。

我知道这是因为我的表单提交错误显示在网页上。

如果我随后提交表单，则AJAX不会运行，但是在表单action中指定的表单处理程序脚本会运行。我知道这是因为表单处理程序脚本会加载到浏览器窗口中，并且我会通过电子邮件通知接收表单内容。

我不明白为什么：  -到达最后一个标签时，AJAX运行  -但是当我按下Submit时AJAX无法运行

Answer 1

我认为单击处理程序返回后，它会注意到该按钮已更改为“提交”按钮，因此它提交了表单。将e.preventDefault()放入更改按钮类型的点击处理程序中。

另一种编码方法是不更改按钮类型，而只需单击处理程序测试您是否在最后一个选项卡上，然后在此处进行AJAX提交。

Answer 2

我通过添加一个提交按钮解决了这个问题，该按钮一直隐藏到最后一张幻灯片。然后也隐藏最后一张幻灯片上的继续按钮。

document.getElementById("nextBtn").style.display = "none"; 
document.getElementById("submit").style.display = "inline";