发表新帖
发表新帖

Using JQuery - preventing form from submitting

后端 未结
关注
13 2641
灰色年华
灰色年华 2020-11-22 06:51

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: 

    $(docu
相关标签:
13条回答
  • 难免孤独
    2020-11-22 07:19

    To prevent default/prevent form submission use

    e.preventDefault();

    To stop event bubbling use

    e.stopPropagation();

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

    0 讨论(0)
  • 被撕碎了的回忆
    2020-11-22 07:20

    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)
  • Happy的楠姐
    2020-11-22 07:23

    You may simply check if the form is valid if yes run submit logic otherwise show error.

    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();
        });
    });
    0 讨论(0)
  • 孤城傲影
    2020-11-22 07:29

    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').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;
});
    0 讨论(0)
  • 没有蜡笔的小新
    2020-11-22 07:29

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

    $('form') looks for the form element

    0 讨论(0)
  • 后悔当初
    2020-11-22 07:30

    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)
 看不清?
提交回复
热议问题