使用JQuery -防止表单提交

How do I prevent a form from submitting using jquery?

如何避免使用jquery提交表单?

I tried everything - see 3 different options I tried below, but it all won't work:

我试过了所有的方法——看看下面我试过的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;
            });
    });

What could be wrong?

可能是错的呢?

Update - here is my html:

更新-这是我的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>

Is there anything wrong here?

这里有什么问题吗?

9 个解决方案

#1

156

Two things stand out:

有两件事情非常引人注目:

It possible that your form name is not form. Rather refer to the tag by dropping the #.
您的表单名称可能不是表单。而是通过删除#来引用标记。
Also the e.preventDefault is the correct JQuery syntax, e.g.

e。preventDefault是正确的JQuery语法，例如。
```
    //option A
    $("form").submit(function(e){
        e.preventDefault();
    });
```

Option C should also work. I am not familiar with option B

选项C也应该有效。我不熟悉选项B

A complete example:

一个完整的例子:

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

#2

You probably have few forms o the page and using $('form').submit() adds this event to the first occurrence of the form on your page. Use class selector instead, or try this:

您可能在页面上使用了很少的表单并使用了$(“form”).submit()将此事件添加到页面上表单的第一次出现。使用类选择器代替，或者尝试:

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

or better version of it:

或者更好的版本:

$(document).on("submit", "form", function(e){
    e.preventDefault();
    alert('it works!');
    return  false;
});

#3

To prevant default/prevent form submission use

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

e.preventDefault();

To stop event bubling use

停止事件的使用。

e.stopPropagation();

To prevent form submission 'return false' should work too.

为了防止表单提交，“返回错误”也应该有效。

#4

I also had the same problem. I also had tried what you had tried. Then I change my method not to use jquery but by using "onsubmit" attribute in the form tag.

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

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

It works.

它的工作原理。

But, when I tried to put the false return value only in "thefunction()", it doesn't prevent the submitting process, so I must put "return false;" in onsubmit attribute. So, I conclude that my form application cannot get the return value from Javascript function. I don't have any idea about it.

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

#5

I had the same problem and I solved this way (not elegant but it works):

我也遇到了同样的问题，我用这种方式解决了(虽然不优雅，但很管用):

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

And it has the advantage, in my opinion, that you can revert the situation any time you want:

在我看来，你可以在任何时候恢复这种情况:

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

#6

When I am using <form> tag without the attribute id="form" and call it by its tag name directly in jquery it works with me.
your code in html file :

当我使用没有属性id="form"的

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

and in Jquery script:

在Jquery脚本:

$(document).ready(function() {
      $('form').submit(function(evt){
          evt.preventDefault();// to stop form submitting
      });
 });

#7

You forget the form id, and it works

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

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

#8

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

from here: https://api.jquery.com/submit-selector/ (interesting page on submit types)

从这里开始:https://api.jquery.com/submit-selector/(提交类型的有趣页面)

#9

-1

$("#form') looks for an element with id="form".

$(“#form”)查找id=“form”的元素。

$('form') looks for the form element

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

#1

156