Javascript 返回 false 不停止表单提交

return false not stopping form submit

提问by Helen Danger Burns

I'm pretty sure this shouldn't be as hard as it is. I have a form that runs the following function onsubmit:

我很确定这不应该像现在这么难。我有一个在提交时运行以下函数的表单：

function FORMVALIDATE_add_rota_entry() {
    var rota_date = $("#rota_date").val();
    var rota_id = $("#rota_id").val();
    var am_pm = $("#am_pm").val();
    if(rota_date == "")
    {
        alert("Please enter a date.");
        return false;
    }
    if(rota_id == "error")
    {
        alert("Please select a rota from the list.");
        return false;
    }
    // check if that rota has already been entered for that date and am/pm
    $.ajax({
        async:false,
        type:"POST",
        url:"/modules/rotas/check_rota_entry_existence",
        data:{rota_date:rota_date, rota_id:rota_id, am_pm:am_pm},
        success: function(result) {
            if(result != "0")
            {
                alert("This rota has already been added to this date, "+am_pm+".");
                return false;
            }
        }
    });
}

It's called in the form tag by the following:

它通过以下方式在表单标签中调用：

onsubmit="return FORMVALIDATE_add_rota_entry();"

And it works fine on the first two, rota_date and rota_id, with the alerts coming up when they should and it stopping the form from submitting but when it get's to the ajax call, it makes it fine, returns the right result, alerts when it should, but the return false doesn't seem to be stopping the form from submitting. Does anyone have any ideas because I'm stumped!

它在前两个，rota_date 和 rota_id 上工作正常，警报在它们应该出现的时候出现并且它阻止表单提交但是当它到达 ajax 调用时，它使它很好，返回正确的结果，当它出现时发出警报应该，但返回 false 似乎并没有阻止表单提交。有没有人有任何想法，因为我很难过！

Thanks!

谢谢！

采纳答案by Helen Danger Burns

Ok, so after trying the above solutions with no absolute success I came upon my own. I ditched the form element entirely and sent the three values onclick as below:

好的，所以在尝试上述解决方案但没有绝对成功之后，我自己来了。我完全放弃了表单元素并发送了三个值 onclick 如下：

 onclick="FORMVALIDATE_add_rota_entry($('#rota_date').val(), $('#rota_id').val(), $('#am_pm').val());"

Then, the function became as follows:

然后，函数变成了这样：

function FORMVALIDATE_add_rota_entry(rota_date, rota_id, am_pm) {
    // check if that rota has already been entered for that date and am/pm
    $.ajax({
        type:"POST",
        url:"/modules/rotas/check_rota_entry_existence",
        data:{rota_date:rota_date, rota_id:rota_id, am_pm:am_pm},
        success: function(result) {
            if(result != "0")
            {
                alert("This rota has already been added to this date, "+am_pm+".");
            }
            else if(rota_date == "")
            {
                alert("Please enter a date.");
            }
            else if(rota_id == "error")
            {
                alert("Please select a rota from the list.");
            }
            else
            {
                $.post('/modules/rotas/add_rota_entry2', {rota_date:rota_date, rota_id:rota_id, am_pm:am_pm});
                parent.$.fn.colorbox.close();
            }
        }
    });
}

All is works as it should!

一切正常！

Thanks for everyones input :) }

感谢大家的投入 :) }

回答by Nicolas Brown

youre doing it incorrectly. The way you are doing it, you should let the function return false always:

你做错了。你这样做的方式，你应该让函数始终返回 false：

function FORMVALIDATE_add_rota_entry() {
    var rota_date = $("#rota_date").val();
    var rota_id = $("#rota_id").val();
    var am_pm = $("#am_pm").val();
    if(rota_date == "")
    {
        alert("Please enter a date.");
        return false;
    }
    if(rota_id == "error")
    {
        alert("Please select a rota from the list.");
        return false;
    }
    // check if that rota has already been entered for that date and am/pm
    $.ajax({
        async:false,
        type:"POST",
        url:"/modules/rotas/check_rota_entry_existence",
        data:{rota_date:rota_date, rota_id:rota_id, am_pm:am_pm},
        success: function(result) {
            if(result != "0")
            {
                alert("This rota has already been added to this date, "+am_pm+".");
                return false;//this is called when the server responds....which in your case isnt happening in the first place

            }
        }
    });

    return false;//this should be at the end so 'false' is always returned to 'onsubmit'
}

the only purpose the return false;in the if statements serve it to prevent the ajax code from running. But there should be one at the end of the function too. This should be an easier fix tho:

return false;if 语句中的唯一目的是防止 ajax 代码运行。但是函数的末尾也应该有一个。这应该是一个更简单的解决方法：

onsubmit="FORMVALIDATE_add_rota_entry();return false;"

onsubmit="FORMVALIDATE_add_rota_entry();return false;"

回答by iambriansreed

Remove:

消除：

onsubmit="return FORMVALIDATE_add_rota_entry();"

Below your function add (where my-formis the id of the form):

在您的函数下方添加（my-form表单的 id在哪里）：

$('#my-form').submit(FORMVALIDATE_add_rota_entry);

Change:

改变：

function FORMVALIDATE_add_rota_entry() {

to:

到：

function FORMVALIDATE_add_rota_entry(event) {

And in your function change:

并在您的功能更改中：

return false;

to

到

event.preventDefault();

This will not always halt the form submission as the ajax request is asynchronous and code inside will not run in time to halt the form process.

这不会总是停止表单提交，因为 ajax 请求是异步的，并且内部代码不会及时运行以停止表单进程。

回答by Oncel Umut TURER

Rather than using

而不是使用

onsubmit="return FORMVALIDATE_add_rota_entry();"

try using

尝试使用

onclick="return FORMVALIDATE_add_rota_entry();"

You might need to add return true;at the end of your function.

您可能需要return true;在函数末尾添加。

回答by Apurv

Try using event.preventDefault()just before the returnstatement.

尝试event.preventDefault()在return语句之前使用。