使用 JavaScript 提交 HTML 表单答案

【问题标题】：Submit HTML Form using JavaScript使用 JavaScript 提交 HTML 表单
【发布时间】：2018-01-08 15:48:14
【问题描述】：

我在注册前向用户展示terms and conditions modal，但我在提交表单时遇到问题。我想可能是因为提交按钮在表单之外？

HTML

<form method="POST" id="registerUser" autocomplete="signupForm-noFill" action={{url("/register")}}>
    ...
    <button type="submit" id="registerButton" role="button" class="btn btn-hp-modal btn-signup">Sign up</button>
</form>

模态（在上面的表格之外）

....
<button type="submit" id="acceptTerms" class="btn btn-hp-modal underline btn-signup-modal">I Accept</button>

JavaScript

$('#registerButton').click(function() {
    $("#legalModal").modal("show");
    return false;
});

$(document).ready(function () {
    $("#acceptTerms").click(function () {
        $("#registerUser").submit();
  });
});

当我尝试提交表单时会发生什么情况是刷新页面并将? 添加到 url 的末尾：/signup?。如果我尝试在没有模式的情况下提交它，那么它工作正常。

【问题讨论】：

尝试将模态按钮更改为type="button"
文档上DOM的模态部分准备好了吗？
Submit form using a button outside the <form> tag的可能重复
将接受条款设置为表单内的复选框，并验证它在提交时被选中。
模态按钮是否为其他形式？

标签： javascript php html forms submit-button

【解决方案1】：

您的按钮是提交类型，因此它将发送表单的数据，正如父 form 标记告诉他的那样，并且不会考虑您的 click 函数，因为它会更改页面。您需要防止提交按钮的自然行为。

这样做的方法是preventDefault:

$("#acceptTerms").click(function (event) {
    event.preventDefault(); //prevent from natural behaviour
    $("#registerUser").submit();
});

【讨论】：

OP 返回 false 应该做的基本相同