jQuery - 取消表单提交（使用“return false”？）？答案

【问题标题】：jQuery - Cancel form submit (using "return false"?)?jQuery - 取消表单提交（使用“return false”？）？
【发布时间】：2010-08-25 18:28:51
【问题描述】：

我在尝试取消提交表单时遇到了一些麻烦。我一直在关注本教程（即使我没有制作登录脚本），它似乎对他有用。

这是我的表格：

    <form action="index.php" method="post" name="pForm">
        <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
        <input class="submit" type="submit" value="Publicera!" name="submit" />
    </form>

这里是 jquery：

$(document).ready(function() {
    $('form[name=pForm]').submit(function(){

        return false;

    });
});

我已经在标题中导入了 jQuery，我知道它正在工作。我的第一个想法是它可能已经过时了，但实际上它“只是”一年前。

那么有人知道出了什么问题吗？

提前致谢。

编辑：据我所知，中止提交的最简单和最合适的方法是return false？但我似乎无法让它工作。我搜索了论坛，发现了几个有用的主题，但没有一个真正有效。我一定是搞砸了。

【问题讨论】：

是否有任何 JavaScript 错误发生？
您的代码看起来很正常，我会尝试在“return false;”之前发出警报看看那部分是否真的到达了。
没有错误。警报没有出现。 :(
请尝试 alert($('form[name=pForm]').length); 而不是 $(...).submit(.. .，它将显示您的 jquery 选择器是否找到任何东西。（返回的数字是找到的元素数量，所以 0 什么都不是）

标签： jquery request-cancelling

【解决方案1】：

尝试使用event.preventDefault

$(document).ready(function(event) {
    $('form[name=pForm]').submit(function(event){
        event.preventDefault();
        //add stuff here
    });
});

【讨论】：

【解决方案2】：

感谢大家的回复！我的一个朋友提示我添加

onsubmit="return(false)

在表格上。这行得通，但我仍然想知道一个有效的非内联javascript技巧。

【讨论】：

【解决方案3】：

您表示“'return false'之前的警报不显示”。

使用 jQuery 时，提交元素的 id 或名称不能是 'submit' - 如果是，则不会触发提交事件。

【讨论】：

这是正确的。见stackoverflow.com/questions/3117755/jquery-doesnt-submit-a-form

【解决方案4】：

它应该可以正常工作。可能还有更多问题。不幸的是，您问题中的代码不是SSCCE 风格，因此很难确定根本原因。可能你根本没有导入 jQuery 库。或者您在导入 jQuery 库之前调用了 $(document).ready()。或者你有另一个与$() 冲突的 JS 库。或者实际表单没有所需的名称。等等..等等..

为了让您入门，这里有一个完全值得的SSCCE。您需要做的就是复制'n'paste'n'运行它。

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>SO question 3569072</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('form[name=pForm]').submit(function() {
                    alert('Submit blocked!');
                    return false;
                });
            });
        </script>
    </head>
    <body>
        <form action="index.php" method="post" name="pForm">
            <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
            <input class="submit" type="submit" value="Publicera!" name="submit" />
        </form>
    </body>
</html>

如果它有效（至少，它在这里有效，我收到警报并且根本没有提交表单），将它与您自己的代码进行比较，并尝试将您自己的代码缩减为这种风格，以便您可以更好找出差异（以及您的错误）。

无论如何，在我看来，学习一些基本/琐碎的 jQuery（最好还有 JavaScript）教程是值得的，这样您就可以更好地了解幕后发生的事情并学习如何使用工具，例如Firebug.

【讨论】：

【解决方案5】：

我也遇到了这个问题，我的代码（不起作用）是这样的：

$('#upload_form').submit(function(){ before_submit('argument') });

在“before_submit”函数中，我有“return false”来阻止表单提交：

function before_submit() {

.........................................................
return false;
}

我在将事件处理函数绑定到表单时输入了“return”并且它起作用了：

$('#upload_form').submit(function(){ return before_submit('argument') });

附加到提交事件的函数必须返回 false（在我的例子中是匿名函数）。所以...这是解决此问题的原因之一

【讨论】：

【解决方案6】：

只是我对这个（未回答，过时的）问题的谦虚贡献。我已经多次使用相同的解决方案来解决这个问题：

不要使用

<input name="submit" />

随着

$('form').submit(function(){...});

这会触发错误的元素/项目，不会带来错误或警告。因此，只需将您的提交按钮命名为其他名称，一切都会神奇地重新开始工作。

【讨论】：

【解决方案7】：

您尝试访问的表单可能会动态添加到您的页面中。在这种情况下，您需要使用委托来访问该表单

例子：

    $(document).delegate("#myform","submit",function(){
       return false;
});

【讨论】：

【解决方案8】：

name 的值需要用引号引起来。试试这个：

$(document).ready(function() {
    $("form[name='pForm']").submit(function(){
        return false;
    });
});

【讨论】：

如果它需要转义，它只有需要引号:) 在这种情况下，这不应该是一个问题。

【解决方案9】：

我遇到过类似的问题。我通过在验证之前删除表单的操作和方法来解决它们，然后在验证后将它们添加回来。这是我写的验证器：

var Validator = function (formSelector) {
    this.formSelector = formSelector;
//  $(formSelector).submit(function() {return false;});
        this.Action = $(formSelector).attr("action");
        this.Method = $(formSelector).attr("method");
    $(formSelector).attr("action",function(){return ""}).attr("method",function(){return ""});  
        var donotsubmit = false;
        var notjustcheckbox = false;
        var checknotchecked = false;
    this.Required = new Array();
    this.Email = new Array();
    this.validate = function () {
        this.form = $(this.formSelector);
        var i = 0;
        for (i in this.Required){
            $(this.Required[i]).attr("value", function(index,attr){
                // Check on checkboxes...   
                if (this.getAttribute("type") == "checkbox"){
                    if (this.checked == false){ 
                        checknotchecked = true;
                        donotsubmit = true;
                    } else {
                    }       
                } else {    
                    if (attr == "" || attr == undefined){   
                        this.style.border = "1px solid red";
                        notjustcheckbox = true;
                        donotsubmit = true;     
                    } else {
                        this.style.border = "1px solid green";
                    }
                }
            });
        }
        i = 0;
        for (i in this.Email){
            $(this.Email[i]).attr("value", function(index,email){
                var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i ;
                if (filter.test(email) == true || filter.test(email) == "true") {
                    this.style.border = "1px solid green";
                } else if (filter.test(email) == false) {
                    donotsubmit = true;
                    notjustcheckbox = true;
                    this.style.border = "1px solid red";
                }
            });
        }
        if (donotsubmit == true){
            if (checknotchecked == true && notjustcheckbox == true){    
                alert("Please correct the fields in red and check the required checkboxes");
            } else if (checknotchecked == true && notjustcheckbox == false){
                alert("Please check the required checkboxes");
            } else {
                alert("Please correct the fields in red");
            }
            checknotchecked = false;
            notjustcheckbox = false;
            donotsubmit = false;
        } else {
            $(formSelector).attr({action : ''+this.Action+''});
            $(formSelector).attr({method : ''+this.Method+''});
            $(formSelector).submit();   
        }
        return true;
    };
};

你可以这样实现：

$(document).ready(function(){
    var myForm = new Validator("#formId");
        myForm.Required = new Array("input.lightborder");
                myForm.Email = new Array("#email");
                $("#form-submit-button-id").click(function(){
                    myForm.validate();
                });
});

您可以为必填字段添加 CSS 选择器。电子邮件必须是唯一的。

【讨论】：

【解决方案10】：

我也遇到了同样的问题，这要归功于在表单上使用 Rails 和 :remote => true。 Rails jQuery 驱动程序进来并通过 ajax 提交表单，而我自己的函数试图使用 return false 和 event.preventDefault() 停止提交过程。

因此，请注意会干扰您自己的 javascript 的框架和默认操作。 return false 应该可以工作:)

【讨论】：

【解决方案11】：

您必须执行某种“双重返回”，或者换句话说，您必须返回返回的内容。所以，你有你的 html:

<form action="index.php" onsubmit="return cancelSubmit()" method="post" name="pForm">
    <textarea name="comment" onclick="if(this.value == 'skriv här...') this.value='';" onblur="if(this.value.length == 0) this.value='skriv här...';">skriv här...</textarea>
    <input class="submit" type="submit" value="Publicera!" name="submit" />
</form>

如您所见，您只有一个名为 onsubmit 的 jquery 函数：

function cancelSubmit() {
    return false; // return true if you want submission to carry through
}

您可以在上面的函数中放置任何类型的条件。不过，您似乎只是想取消它。希望这对遇到此答案的其他人有所帮助。

【讨论】：

【解决方案12】：

这个怎么样？

$('form[name=pForm]').on('submit',function()
{
    console.log("(^o^)");
    return false;
});

【讨论】：

欢迎来到 Stack Overflow！请不要只用源代码回答。尝试对您的解决方案如何工作提供一个很好的描述。请参阅：How do I write a good answer?。谢谢