Ngăn chặn mặc định trên biểu mẫu Gửi jQuery

Có chuyện gì với cái này vậy?

HTML:

<form action="http://localhost:8888/bevbros/index.php/test" method="post" accept-charset="utf-8" id="cpa-form" class="forms">        
      <input type="text" name="zip" value="Zip code" id="Zip" class="required valid">      
      <input type="submit" name="Next" value="Submit" class="forms" id="1">
  </form>

jQuery:

$("#cpa-form").submit(function(e){
    e.preventDefault();
  });

Thử cái này:

$("#cpa-form").submit(function(e){
    return false;
});

Sử dụng cú pháp sự kiện "bật" mới.

$(document).ready(function() {
  $('form').on('submit', function(e){
    // validation code here
    if(!valid) {
      e.preventDefault();
    }
  });
});

Trích dẫn: https://api.jquery.com/on/

Tôi tin rằng các câu trả lời trên đều đúng, nhưng điều đó không chỉ ra lý do tại sao submitphương pháp này không hoạt động.

Chà, submitphương thức sẽ không hoạt động nếu jQuery không thể lấy formphần tử và jQuery không đưa ra bất kỳ lỗi nào về điều đó. Nếu kịch bản của bạn được đặt vào đầu của tài liệu, chắc chắn rằng mã chạy sau DOMlà sẵn sàng . Vì vậy, $(document).ready(function () { // your code here // });sẽ giải quyết vấn đề.

Cách thực hành tốt nhất là, luôn đặt tập lệnh của bạn ở dưới cùng của tài liệu.

Đây là một câu hỏi cổ xưa, nhưng câu trả lời được chấp nhận ở đây không thực sự đi đến gốc rễ của vấn đề.

Bạn có thể giải quyết hai cách này. Đầu tiên với jQuery:

$(document).ready( function() { // Wait until document is fully parsed
  $("#cpa-form").on('submit', function(e){

     e.preventDefault();

  });
}

Hoặc không có jQuery:

// Gets a reference to the form element
var form = document.getElementById('cpa-form');

// Adds a listener for the "submit" event.
form.addEventListener('submit', function(e) {

  e.preventDefault();

});

Bạn không cần phải sử dụng return falseđể giải quyết vấn đề này.

$('#cpa-form input[name="Next"]').on('click', function(e){
    e.preventDefault();
});

$(document).ready(function(){
    $("#form_id").submit(function(){
        return condition;
    });
});

Mã của bạn vẫn ổn chỉ cần bạn đặt nó bên trong chức năng sẵn sàng.

$(document).ready( function() {
  $("#cpa-form").submit(function(e){
     e.preventDefault();
  });
}

ĐỔI - phần này đã lỗi thời vì vậy xin vui lòng không sử dụng nó.

Bạn cũng có thể thử mã này, nếu bạn có các biểu mẫu động sau này được thêm vào. Ví dụ: bạn đã tải một cửa sổ không đồng bộ với ajax và muốn gửi biểu mẫu này.

$('#cpa-form').live('submit' ,function(e){
    e.preventDefault();      
    // do something
});

CẬP NHẬT - bạn nên sử dụng phương thức jQuery on () để thử nghe DOM tài liệu nếu bạn muốn xử lý nội dung được thêm động.

Trường hợp 1, phiên bản tĩnh: Nếu bạn chỉ có một vài người nghe và biểu mẫu của bạn cần xử lý được mã hóa cứng, thì bạn có thể nghe trực tiếp trên "cấp độ tài liệu". Tôi sẽ không sử dụng trình nghe ở cấp độ tài liệu nhưng tôi sẽ cố gắng đi sâu hơn vào cây cam chịu vì nó có thể dẫn đến các vấn đề về hiệu suất (tùy thuộc vào kích thước của trang web và nội dung của bạn)

$('form#formToHandle').on('submit'... 

HOẶC LÀ

$('form#formToHandle').submit(function(e) {
    e.preventDefault();      
    // do something
});

Trường hợp 2, phiên bản động: Nếu bạn đã nghe tài liệu trong mã của mình, thì cách này sẽ tốt cho bạn. Điều này cũng sẽ hoạt động đối với mã được thêm sau này thông qua DOM hoặc động với AJAX.

$(document).on('submit','form#formToHandle',function(){
   // do something like e.preventDefault(); 
});

HOẶC LÀ

$(document).ready(function() {
    console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

HOẶC LÀ

$(function() { // <- this is shorthand version
   console.log( "Ready, Document loaded!" );

    // all your other code listening to the document to load 

    $("#formToHandle").on("submit", function(){
        // do something           
    })
});

Hello đã tìm một giải pháp để làm cho biểu mẫu Ajax hoạt động với Trình quản lý thẻ của Google (GTM), việc trả về sai đã ngăn chặn việc hoàn thành và gửi kích hoạt sự kiện trong thời gian thực trên giải pháp phân tích của google là thay đổi trả về false bởi e.preventDefault () ; hoạt động chính xác theo mã:

 $("#Contact-Form").submit(function(e) {
    e.preventDefault();
   ...
});

e.preventDefault () chỉ hoạt động tốt nếu bạn không gặp sự cố với javascripts của mình, hãy kiểm tra javascripts của bạn nếu e.preventDefault () không hoạt động vì một số phần khác trong JS của bạn cũng không hoạt động

Vâng, tôi đã gặp một vấn đề tương tự. Vấn đề đối với tôi là tệp JS được tải trước khi kết xuất DOM xảy ra. Vì vậy, di chuyển của bạn<script> đến cuối<body> thẻ.

hoặc sử dụng trì hoãn.

<script defer src="">

nên yên tâm e.preventDefault()nên làm việc.