返回 false 不会阻止表单提交。

Question

我相信这并不像现在这么难。 我有一个表单，当提交时运行以下函数：

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

以下是在表单标签中调用的方法：

onsubmit="return FORMVALIDATE_add_rota_entry();"

这个表单在前两个属性rota_date和rota_id上运行良好，当应该弹出警报时它可以弹出，并且阻止表单提交，但是当到达ajax调用时，它可以正常工作，返回正确的结果，当应该弹出警报时也能够弹出，但是"return false"似乎没有阻止表单提交。有没有人有任何想法？因为我束手无策了！

谢谢！

- Helen Danger Burns

Answer 1

你的做法是错误的。按照你的方式，应该让函数始终返回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'
}

在 if 语句中使用的 `return false;` 的唯一目的是防止 ajax 代码运行。但在函数末尾也应该有一个。这个问题应该很容易解决:

``` onsubmit="FORMVALIDATE_add_rota_entry();return false;" ```

- Nicolas Brown

---

太好了！回答正确。然而，在onsubmit属性中，e.preventDefault()不起作用，因此您可能需要删除该部分（只保留第一个替代方案）。 - Ry-

嗨，谢谢你的回复。我已经将最后一个return false添加到函数中，而不是onsubmit上，但现在即使三个检查都通过了，它也不允许表单提交。有什么想法吗？ - Helen Danger Burns

Answer 2

好的，在尝试了上述解决方案没有绝对成功后，我自己想到了一个解决方法。我完全放弃了表单元素，并像下面一样在 onclick 事件中发送了三个值：

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

然后，该函数变成了以下形式：

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

一切都按照应有的方式运作！

感谢每个人的贡献 :)

- Helen Danger Burns

Answer 3

移除：

onsubmit="return FORMVALIDATE_add_rota_entry();"

在您的函数add下面（其中my-form是表单的id）：

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

更改：

function FORMVALIDATE_add_rota_entry() {

至：

function FORMVALIDATE_add_rota_entry(event) {

在你的函数中修改：

return false;

到

event.preventDefault();

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

- iambriansreed

---

即使我已经添加了 async: false？ - Helen Danger Burns

在花费了相当一段时间研究onsubmit之后，我偶然发现了这个答案，它真的很有效！不过我想知道为什么即使在这个论坛上有很多人建议使用onsubmit，它仍然无法正常工作。 - NecipAllef

Answer 4

不要使用

onsubmit="return FORMVALIDATE_add_rota_entry();"

尝试使用

onclick="return FORMVALIDATE_add_rota_entry();"

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

- Oncel Umut TURER

Answer 5

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

- Apurv

---

甚至没有事件参数，而return false已经实现了这一点。 - Ry-