Ajax 表单提交、事件监听器和更改提交按钮类型答案

【问题标题】：Ajax form submit, event listener and change submit button typeAjax 表单提交、事件监听器和更改提交按钮类型
【发布时间】：2019-06-25 16:25:34
【问题描述】：

我有一个带有选项卡式表单的单页网站，访问者使用一个按钮进行浏览。在最后一个选项卡上，我想将按钮类型更改为 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 在到达最后一个选项卡时运行 - 但是当我按下提交时 AJAX 没有运行

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：