JavaScript：阻止表单刷新？ [复制]

Question

我试图让我的表单在提交时停止刷新，而是我想进行 ajax 调用，我还没有完成 ajax 部分，但它仍然在刷新？

你试过什么？ 我在论坛上接受了建议并添加了“return false”；函数调用后onSubmit？

$('#message_form').submit(function() {
    postMessage();
    return false;
});

function postMessage() {
    var isValid = true;

    var username = document.forms["post_message_form"]["username"].value;
    var message = document.forms["post_message_form"]["message"].value;

    var errorMessage = "Something went wrong, try again!";

    if (isEmpty(username) || isEmpty(message)) {
        errorMessage = "You can't post with an empty name or message.";
        isValid = false;
    }

    if (!isValid) {
        alert(errorMessage);
    }
    else {
        alert("Your message has been posted.");
    }

    return false;
}

function isEmpty(field) {
    return field == null || field == "";
}

表格：

<form id="message_form" name="post_message_form" method="post">
            <input type="text" class="form-control" placeholder="Whats your name?" name="username">
            <textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
            <input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
        </form>

Answer 1

试试这个：

<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage();">
            <input type="text" class="form-control" placeholder="Whats your name?" name="username">
            <textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
            <input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
        </form>

Answer 2

试试这个代码添加onsubmit="return postMessage()

<form id="message_form" name="post_message_form" method="post" onsubmit="return postMessage()">
        <input type="text" class="form-control" placeholder="Whats your name?" name="username">
        <textarea class="form-control" placeholder="Whats your message?" name="message"></textarea>
        <input type="submit" class="btn btn-info" name="message_form" value="Submit Message">
    </form>

Answer 3

编辑：更新

这类问题可能有某些原因

• postMessage 不可访问

  这条消息可能没有被全局声明

• javascript代码中可能有其他错误

  由于 javascript 代码的其他部分出错，某些代码无法运行

• 有可能是你没有加载jquery核心库文件

  如果没有包含 jquery.min.js 文件，您的上述代码将不起作用（您的情况 - 参见 cmets）

由于 return false 和 event.preventDefault();在这个例子中做同样的工作，你可以使用其中之一

$('#message_form').submit(function(event) {
    event.preventDefault();
    postMessage();
    // return false;
});

要调试代码并找到错误，您可以通过按f12在浏览器中打开开发人员工具，或通过单击页面右键选择选项检查元素

Answer 4

使用 preventDefault 代替 return false;

$('#message_form').submit(function(event) {
    console.log(123);
    event.preventDefault();
});

https://codepen.io/animhotep/pen/bRBmxm?editors=1011

喜欢官方手册 ;) https://api.jquery.com/submit/