使用 JQuery - 防止表单提交答案

【问题标题】：Using JQuery - preventing form from submitting使用 JQuery - 防止表单提交
【发布时间】：2012-03-09 23:25:46
【问题描述】：

如何防止使用 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>

这里有什么问题吗？

【问题讨论】：

显示您的 HTML，因为 preventDefault 没有任何问题，或者在您发布它时返回 false，除了您的选择器完全错误。
return false; 在.submit() 为我工作之后！我遇到了同样的问题
如果处理程序中出现 JavaScript 错误，则无法到达/执行 e.preventDefault(); 代码。

标签： jquery forms

【解决方案1】：

有两点很突出：

您的表单名称可能不是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>

【讨论】：

还有其他问题。我每天都在使用这种技术。最好的猜测是页面上存在 JavaScript 错误，也许用 FireBug 进行检查？
@LucyWeatherford，我已经用一个有效的样本更新了我的答案。也许你发现了什么。
在您的更新 html 中，我注意到您的表单具有类属性。将您的 JQuery 选择器从 $('#form') 更改为 $('.form') 以获得类属性。
谢谢！我最终在同一页面上使用了您的代码，并且它有效，但仍然不确定出了什么问题，但现在一切都很好。谢谢！
@ÂngeloRigo e 只是您为参数指定的名称，在本例中是提交事件。

【解决方案2】：

您的页面可能很少有表单，并且使用 $('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;
});

【讨论】：

在我的例子中，返回 false 是一个关键。

【解决方案3】：

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

e.preventDefault();

停止事件冒泡使用

e.stopPropagation();

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

【讨论】：

查看这个答案，因为 jQuery 以不同的方式处理这些问题。 stackoverflow.com/questions/1357118/…
检查此以了解事件冒泡quirksmode.org/js/events_order.html
jQuery on API 声明：“从事件处理程序返回 false 将自动调用 event.stopPropagation() 和 event.preventDefault()。false 值也可以作为 @ 的简写传递给处理程序987654329@。”

【解决方案4】：

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

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

它有效。

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

【讨论】：

这是false;和return false;的区别。你需要有onsubmit="return thefunction();"

【解决方案5】：

我遇到了同样的问题，我用这种方式解决了（不优雅但有效）：

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

在我看来，它的优势在于您可以随时恢复情况：

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

【讨论】：

在恢复表单提交预防$('#form').removeAttr('onsubmit');

【解决方案6】：

将事件附加到提交元素而不是表单元素。例如在你的 html 中这样做

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

【讨论】：

【解决方案7】：

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

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>

Javascript

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

【讨论】：

【解决方案8】：

当我使用 <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
      });
 });

【讨论】：

【解决方案9】：

$('#form') 查找带有id="form" 的元素。

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

【讨论】：

【解决方案10】：

使用 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!');
        }
    });

【讨论】：

【解决方案11】：

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

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});

【讨论】：

【解决方案12】：

// Prevent form submission
$( "form" ).submit(function( event ) {
  event.preventDefault();
});

从这里：https://api.jquery.com/submit-selector/（关于提交类型的有趣页面）

【讨论】：

【解决方案13】：

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

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

【讨论】：

【解决方案14】：

信息缺失如何防止表单提交然后还原情况，即。 e.允许稍后提交表单。

这是一个例子：

var savebtn_clicked;

$('form#commentform').submit( function(e) {
    return savebtn_clicked;
});

$('#savebtn').click( function() {
    savebtn_clicked = true;
    $('#form#commentform').submit();
});

在我的例子中，每个按钮都会触发表单。通过上面的代码，我可以控制允许提交表单的按钮。

【讨论】：