Sử dụng JQuery - ngăn không cho gửi

177

Làm cách nào để ngăn chặn biểu mẫu gửi bằng jquery?

Tôi đã thử mọi cách - xem 3 tùy chọn khác nhau tôi đã thử bên dưới, nhưng tất cả đều không hoạt động:

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

Điều gì có thể sai?

Cập nhật - đây là html của tôi:

    <form id="form" class="form" action="page2.php" method="post"> 
       <!-- tags in the form -->
       <p class="class2">
           <input type="submit" value="Okay!" /> 
       </p>
    </form>

Có gì sai ở đây?

jquery forms

— Lucy Weatherford
nguồn

Hiển thị HTML của bạn vì không có gì sai với ngăn chặn hoặc trả về sai khi bạn đăng nó, ngoài việc bộ chọn của bạn hoàn toàn sai.

— Sparky

1

return false;Sau khi .submit()làm việc cho tôi! Tôi đã có cùng một vấn đề

— d -_- b

Nếu có lỗi JavaScript xảy ra trong trình xử lý, e.preventDefault();mã sẽ không được tiếp cận / thực thi.

— Tom

263

Hai điều nổi bật:

Có thể tên mẫu của bạn là không form. Thay vì tham khảo thẻ bằng cách bỏ #.

Ngoài ra e.preventDefault, cú pháp JQuery chính xác, vd

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

Tùy chọn C cũng nên hoạt động. Tôi không quen với tùy chọn B

Một ví dụ hoàn chỉnh:

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

— Philip Fourie
nguồn

2

Một cái gì đó khác là sai. Tôi đang sử dụng kỹ thuật này hàng ngày. Dự đoán tốt nhất là có lỗi JavaScript trên trang, có lẽ kiểm tra nó với FireBug?

— Philip Fourie

@LucyWeatherford, tôi đã cập nhật câu trả lời của mình với một mẫu hoạt động. Có thể bạn phát hiện ra đôi khi.

— Philip Fourie

Trong bản cập nhật html của bạn, tôi nhận thấy rằng bạn có thuộc tính lớp cho biểu mẫu của bạn. Thay đổi bộ chọn JQuery của bạn từ $('#form')thành $('.form')các thuộc tính lớp.

— Philip Fourie

1

cảm ơn! Tôi đã kết thúc bằng cách sử dụng mã của bạn trên cùng một trang và nó vẫn hoạt động, vẫn không chắc chắn điều gì đã xảy ra, nhưng giờ mọi thứ đều tốt. cảm ơn!

— Lucy Weatherford

1

@ ÂngeloRigo e chỉ đơn giản là tên bạn đặt cho tham số, trong trường hợp này là sự kiện gửi.

— squall3d

34

Bạn có thể có một vài biểu mẫu o trang và sử dụng $ ('biểu mẫu'). Submit () thêm sự kiện này vào lần xuất hiện đầu tiên của biểu mẫu trên trang của bạn. Sử dụng bộ chọn lớp thay thế hoặc thử điều này:

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

hoặc phiên bản tốt hơn của nó:

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

— Nữ hoàng Kiselev
nguồn

1

Trong trường hợp của tôi, trả về false là một chìa khóa.

— elquimista

19

Để ngăn chặn mặc định / ngăn chặn sử dụng biểu mẫu

e.preventDefault();

Để ngăn chặn sự kiện sủi bọt

e.stopPropagation();

Để ngăn chặn việc gửi biểu mẫu 'trả lại sai' cũng nên hoạt động.

— Alpha
nguồn

Xem câu trả lời này vì jQuery xử lý chúng khác nhau. stackoverflow.com/questions/1357118/ trên

— Sparky

1

Kiểm tra điều này để hiểu sự kiện sủi bọt quirksmode.org/js/events_order.html

— Alpha

2

Các jQuery trên tiểu bang API: "Về sai từ một event handler sẽ tự động gọi event.stopPropagation()và event.preventDefault()A. falseGiá trị cũng có thể được truyền cho các bộ xử lý như một cách viết tắt cho function(){ return false; }."

— Paul

7

Tôi cũng gặp vấn đề tương tự. Tôi cũng đã thử những gì bạn đã thử. Sau đó, tôi thay đổi phương thức của mình không sử dụng jquery mà bằng cách sử dụng thuộc tính "onsubmit" trong thẻ biểu mẫu.

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

Nó hoạt động.

Nhưng, khi tôi cố gắng đặt giá trị trả về sai chỉ trong "thefeft ()", nó không ngăn quá trình gửi, vì vậy tôi phải đặt "return false;" trong thuộc tính onsubmit. Vì vậy, tôi kết luận rằng ứng dụng biểu mẫu của tôi không thể nhận được giá trị trả về từ hàm Javascript. Tôi không có bất kỳ ý tưởng về nó.

— Luki B. Subekti
nguồn

1

Đó là sự khác biệt giữa false;và return false;. Bạn cần phải cóonsubmit="return thefunction();"

— xr280xr

4

Tôi đã có cùng một vấn đề và tôi đã giải quyết theo cách này (không thanh lịch nhưng nó hoạt động):

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

Và theo tôi, nó có lợi thế là bạn có thể hoàn nguyên tình huống bất cứ lúc nào bạn muốn:

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

— vinxxe
nguồn

Có lẽ sẽ thoải mái hơn một chút khi chỉ xóa thuộc tính khi hoàn nguyên biểu mẫu gửi phòng$('#form').removeAttr('onsubmit');

— barbieswimcrew

4

Đính kèm sự kiện vào phần tử gửi không phải là phần tử biểu mẫu. Ví dụ trong html của bạn làm như thế này

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

— M Weiss
nguồn

2

Bạn có thể chỉ cần kiểm tra xem biểu mẫu có hợp lệ không nếu có chạy logic gửi nếu không hiển thị lỗi.

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

— Mã gián điệp
nguồn

1

Khi tôi đang sử dụng <form>thẻ không có thuộc tính id="form"và gọi nó bằng tên thẻ trực tiếp trong jquery, nó hoạt động với tôi.
mã của bạn trong tệp html:

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

và trong kịch bản Jquery:

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

— Noha Salah
nguồn

1

$('#form')tìm kiếm một yếu tố với id="form".

$('form') tìm kiếm phần tử biểu mẫu

— La Mã
nguồn

0

Bạn quên id mẫu và nó hoạt động

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

— Shintadoniku Alyssa
nguồn

0

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

từ đây: https://api.jquery.com/submit-selector/ (trang thú vị về các loại gửi)

— Chris mạnh mẽ
nguồn

0

Điều này cũng xuất hiện để làm việc và có thể đơn giản hơn một chút:

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

— Ukuser32
nguồn

0

Sử dụng jQuery, bạn có thể làm như sau:

1- Sử dụng sự kiện gửi biểu mẫu gốc bằng nút Gửi, đồng thời ngăn sự kiện bắn, sau đó

2- Kiểm tra biểu mẫu Thuộc tính hợp lệ Điều này có thể được thực hiện như sau:

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

— Mohamed Nagieb
nguồn