使用JQuery阻止表单提交

我如何阻止一个表单提交使用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>

这里有什么问题吗?

当前回答

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

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

2018-09-04 17:15:53

其他回答

这似乎也有效，而且可能更简单:

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

2019-12-16 15:10:54

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

2017-07-12 09:57:36

防止提交表单数据后再发布。

  $("form").on("submit", function (e) {
   e.preventDefault();
   alert('Ok');
   $( this ).unbind( 'submit' ).submit(); // Release 
  });

它的工作

2022-09-13 18:08:20

有两点很突出:

有可能您的表单名称不是表单。而是指删除#。同样，e.r epreventdefault也是正确的JQuery语法。 / /选择一个 $(“形式”)。submit(函数(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>

2012-02-19 06:36:20

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

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

在我看来，它的优势在于，你可以在任何你想要的时候还原这种情况:

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

2016-08-31 15:33:13

使用JQuery阻止表单提交

推荐文章

最新文章

标签