JavaScript:阻止表单刷新?

时间:2017-06-16 07:39:05

标签: javascript php jquery html ajax

我试图让我的表单在提交时停止刷新,而我想做一个ajax调用,我还没有完成ajax部分,但它仍然令人耳目一新?

你有什么尝试? 我在论坛上提出了建议,并添加了“返回虚假”;'在函数调用onSubmit?

之后
import * as IFooImport from '../foo.d.ts';

// use IFooImport

export import IFoo = IFooImport.IFoo;

形式:

$('#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 == "";
}

4 个答案:

答案 0 :(得分:0)

编辑:已更新

关于此类问题可能有某些原因

  • postMessage无法访问

    此消息可能未全局声明

  • javascript代码中可能存在其他错误

    由于javascript代码的其他部分中的错误,某些代码无法正常工作

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

    如果未包含jquery.min.js文件,您的上述代码将无效(您的情况 - 查看评论

因为返回false和event.preventDefault();在这个例子中做同样的工作你可以使用其中一个

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

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

答案 1 :(得分:0)

尝试添加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>

答案 2 :(得分:0)

试试这个:

<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>

答案 3 :(得分:-1)

使用preventDefault而不是return;

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

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

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