Question

如何阻止表单使用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>

这里有什么不对吗？

Answer 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>

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

Answer 3

要防止默认/阻止表单提交，请使用

e.preventDefault();

停止事件冒泡使用

e.stopPropagation();

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

Answer 4

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

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

有效。

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

Answer 5

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

$query = $em->createQuery("
    SELECT a, k
    FROM XyzTestBundle:MyPet a
    LEFT JOIN a.animalKind k 
");

在我看来，它有优势，你可以随时恢复这种情况：

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

Answer 6

当我使用不带属性<form>的{{1}}标记并直接在jquery中通过其标记名称调用它时，它适用于我。
你的代码在html文件中：

id="form"

并在Jquery脚本中：

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

Answer 7

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

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

Answer 8

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

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

Answer 9

$('#form')查找包含id="form"的元素。

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

Answer 10

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

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

Answer 11

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

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

Answer 12

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

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

Answer 13

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

Answer 14

缺少信息如何防止表单提交然后恢复情况，i。 e.允许稍后提交表单。

这是一个例子：

var savebtn_clicked;

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

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

就我而言，每个按钮都会触发表单。使用上面的代码，我可以控制哪个按钮允许提交表单。

使用JQuery - 阻止表单提交

14 个答案: