使用JQuery-阻止表单提交

176

如何防止表单使用jquery提交？

我尝试了所有操作-请在下面查看3个不同的选项，但都无法使用： 

    $(document).ready(function() { 

            //option A
            $("#form").submit(function(e){
                e.preventDefault();
            });

            //option B
            $("#form").submit(function(e){
                stopEvent(e);
            });

            //option C
            $("#form").submit(function(){
                return false;
            });
    });

有什么事吗

更新-这是我的html：

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

这里有什么问题吗？

jquery  forms 
— 露西·韦瑟福德
source
显示HTML，因为preventDefault没什么问题，或者发布时返回false，除了选择器完全错误之外。
— Sparky
1
return false;.submit()为我工作之后！我遇到了同样的问题
— d -_- b
如果处理程序中发生JavaScript错误，则e.preventDefault();代码未到达/未执行。
— 汤姆（Tom）

Answers:

262

两件事脱颖而出：

  • 您的表单名称可能不是form。而是通过删除＃来引用标签。

  • 也是e.preventDefault正确的JQuery语法，例如

        //option A
    $("form").submit(function(e){
        e.preventDefault();
    });

选项C也应起作用。我对选项B不熟悉

一个完整的例子：

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

        <script type='text/javascript'>
         $(document).ready(function() {
            //option A
            $("form").submit(function(e){
                alert('submit intercepted');
                e.preventDefault(e);
            });
        });
        </script>
    </head>

    <body>
        <form action="http://google.com" method="GET">
          Search <input type='text' name='q' />
          <input type='submit'/>
        </form>
    </body>
</html>
— 菲利普·富里
source
2
还有其他问题。我每天都在使用这种技术。最好的猜测是页面上有JavaScript错误，也许可以通过FireBug进行检查？
— 菲利普·富里
@LucyWeatherford，我用一个有效的示例更新了我的答案。也许你发现一些东西。
— 菲利普·弗里
在您的更新html中，我注意到您具有表单的类属性。从改变你的jQuery选择$('#form')来$('.form')为类属性。
— 菲利普·富里
1
谢谢！我最终在同一页面上使用了您的代码，并且可以正常工作，尽管仍然不确定出什么问题，但是现在一切都很好。谢谢！
— 露西·韦瑟福德
1
@ÂngeloRigoe只是您为参数指定的名称，在这种情况下，它是Submit事件。
— squall3d'7
34

您的页面可能没有几个表单，使用$（'form'）。submit（）会将事件添加到页面上第一次出现的表单中。请改用类选择器，或尝试以下操作：

$('form').each(function(){
    $(this).submit(function(e){
        e.preventDefault();
        alert('it is working!');
        return  false;
    })
})

或更好的版本：

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});
— 阿瑟姆·基谢列夫（Artem Kiselev）
source
1
就我而言，返回false是关键。
— elquimista
19

为了防止使用默认/阻止表单提交

e.preventDefault();

停止事件冒泡使用

e.stopPropagation();

为了防止表单提交，“ return false”也应该起作用。

— 阿尔法
source
查看此答案，因为jQuery处理这些问题的方式不同。 stackoverflow.com/questions/1357118/...
— 斯帕克
1
选中此选项可了解事件冒泡quirksmode.org/js/events_order.html
— Alpha版
2
API 上的jQuery指出：“从事件处理程序返回false会自动调用event.stopPropagation()和event.preventDefault()。false还可以为处理程序传递一个值，作为。的简写形式function(){ return false; }。”
— 保罗
7

我也有同样的问题。我也尝试过你尝试过的。然后，我更改了方法以不使用jquery，而是通过在表单标签中使用“ onsubmit”属性。

<form onsubmit="thefunction(); return false;">

有用。

但是，当我尝试仅将假返回值放在“ thefunction（）”中时，它不会阻止提交过程，因此必须将“ return false;”放回去。在onsubmit属性中。因此，我得出结论，我的表单应用程序无法从Javascript函数获取返回值。我对此一无所知。

— 卢基·苏伯蒂
source
1
false;和之间是有区别的return false;。您需要拥有onsubmit="return thefunction();"
— xr280xr
4

我遇到了同样的问题，并且以这种方式解决了（虽然不优雅，但确实可行）：

$('#form').attr('onsubmit','return false;');

我认为，这样做的好处是您可以随时恢复情况：

$('#form').attr('onsubmit','return true;');
— Vinxxe
source
还原表单提交预防时仅删除属性可能会更舒服一些$('#form').removeAttr('onsubmit');
— barbieswimcrew
4

将事件附加到Submit元素而不是form元素。例如在您的html中这样做

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});
— 魏斯
source
2

您可以简单地检查表单是否有效（如果是），则运行提交逻辑，否则显示错误。

的HTML

<form id="form" class="form" action="page2.php" method="post">
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />
    <input type="text" class="check-validity" value="" />

    <input type="submit" value="Okay!" />
</form>

Java脚本

    $(document).ready(function () {
        var isFormValid = true;

        function checkFormValidity(form){
            isFormValid = true;
            $(form).find(".check-validity").each(function(){
                var fieldVal = $.trim($(this).val());
                if(!fieldVal){
                    isFormValid = false;
                }
            });
        }


        //option A
        $("#form").submit(function (e) {
            checkFormValidity("#form");
            if(isFormValid){
                alert("Submit Form Submitted!!! :D");
            }else{
                alert("Form is not valid :(");
            }
            e.preventDefault();
        });
    });
— 代码间谍
source
1

当我使用<form>不带属性的标签id="form"并直接在jquery中通过其标签名称调用它时，它可以与我一起工作。
您在html文件中的代码：

<form action="page2.php" method="post">

并在Jquery脚本中：

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });
— 诺哈萨拉赫
source
1

$('#form')在中寻找元素id="form"。

$('form') 寻找表单元素

— 拉胡尔
source
0

您忘记了表单ID，它可以正常工作 

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});
— Shintadoniku Alyssa
source
0

这似乎也可行，并且可能稍微简单一些：

$('#Form').on('submit',function(){
    return false;
})
— Ukuser32
source
0

使用jQuery，您可以执行以下操作：

1-将本机表单提交事件与“提交”按钮一起使用，同时防止事件触发，然后

2-检查表单有效属性。这可以通过以下方式实现：

1- HTML：

 <form id="yourForm">
    <input id="submit" type="submit" value="Save"/>
</form>

2- Javascript

 $("form").on("submit", function (e) {
        e.preventDefault();
        if ($(this).valid()) {  
           alert('Success!');
        }
    });
— 穆罕默德·纳吉布（Mohamed Nagieb）
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.