javascript - 使用 JavaScript 提交 HTML 表单

Question

我在注册前向用户展示了条款和条件模态，但我在提交表单时遇到了问题。我想这可能是因为提交按钮在表单之外？

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?。如果我尝试在没有模式的情况下提交它，那么它工作正常。

Answer 1

你的按钮是提交类型，所以它会发送表单的数据，正如父 form 标签告诉他的那样，并且不会考虑你的 click 功能，因为它改变页面。您需要防止提交按钮的自然行为。

执行此操作的方法是 preventDefault :

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