Using JQuery - preventing form from submitting

2018-12-31 16:03发布

站内问答 / jQuery
1542 11 5

How do I prevent a form from submitting using jquery?

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

    $(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:

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

标签： jquery forms
举报
11条回答
时光乱了年华
2楼-- · 2018-12-31 16:11

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;');
查看更多
0人赞 添加讨论(0) 举报
何处买醉
3楼-- · 2018-12-31 16:11

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

$('form') looks for the form element

查看更多
0人赞 添加讨论(0) 举报
泪湿衣
4楼-- · 2018-12-31 16:14

You forget the form id, and it works 

$('form#form').submit(function(e){
   e.preventDefault();
   alert('prevent submit');             
});
查看更多
0人赞 添加讨论(0) 举报
余欢
5楼-- · 2018-12-31 16:15

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.

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

查看更多
0人赞 添加讨论(0) 举报
初与友歌
6楼-- · 2018-12-31 16:20

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.

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

Option C should also work. I am not familiar with option 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>
查看更多
0人赞 添加讨论(0) 举报
临风纵饮
7楼-- · 2018-12-31 16:25

Attach the event to the submit element not to the form element. For example in your html do like this

$('input[type=submit]').on('click', function(e) {
    e.preventDefault();
});
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)