使用 JavaScript 提交 HTML 表单

Question

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

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

使用 JavaScript 提交 HTML 表单

Submit HTML Form using JavaScript

javascript

php

html

forms

submit-button