Ngăn chặn chuyển hướng biểu mẫu HOẶC làm mới khi gửi?

Tôi đã tìm kiếm qua nhiều trang, nhưng không thể tìm thấy vấn đề của mình, vì vậy tôi phải đăng một bài.

Tôi có một biểu mẫu có nút gửi và khi được gửi, tôi muốn nó KHÔNG làm mới HOẶC chuyển hướng. Tôi chỉ muốn jQuery thực hiện một chức năng.

Đây là mẫu:

<form id="contactForm">
    <fieldset>
        <label for="Name">Name</label>
        <input id="contactName" type="text" />
    </fieldset>

    <fieldset>
        <label for="Email">Email</label>
        <input id="contactEmail" type="text" />
    </fieldset>

    <fieldset class="noHeight">
        <textarea id="contactMessage" cols="20"></textarea>
        <input id="contactSend" class="submit" type="submit" onclick="sendContactForm()" />
    </fieldset>
</form>        
<small id="messageSent">Your message has been sent.</small>

Và đây là jQuery:

function sendContactForm(){
    $("#messageSent").slideDown("slow");
    setTimeout('$("#messageSent").slideUp();$("#contactForm").slideUp("slow")', 2000);
}

Tôi đã thử có và không có phần tử hành động trên biểu mẫu, nhưng không biết mình đang làm gì sai. Điều khiến tôi khó chịu hơn là tôi có một ví dụ làm điều đó một cách hoàn hảo: Trang Ví dụ

Nếu bạn muốn xem vấn đề của tôi trực tiếp, hãy truy cập vào Stormink.net (trang web của tôi) và xem thanh bên có nội dung "Gửi cho tôi và email" và "Đăng ký RSS". Cả hai đều là những hình thức mà tôi đang cố gắng làm cho nó hoạt động.

Chỉ cần xử lý việc gửi biểu mẫu trong sự kiện gửi và trả về false:

$('#contactForm').submit(function () {
 sendContactForm();
 return false;
});

Bạn không cần thêm bất kỳ sự kiện onclick nào trên nút gửi:

<input class="submit" type="submit" value="Send" />

Đây:

function submitClick(e)
{
     e.preventDefault();
     $("#messageSent").slideDown("slow");
     setTimeout('$("#messageSent").slideUp();
     $("#contactForm").slideUp("slow")', 2000);
}

$(document).ready(function() {
    $('#contactSend').click(submitClick);
});

Thay vì sử dụng sự kiện onClick, bạn sẽ sử dụng liên kết trình xử lý sự kiện 'nhấp chuột' bằng cách sử dụng jQuery với nút gửi (hoặc bất kỳ nút nào), nút này sẽ lấy submitClick làm lệnh gọi lại. Chúng tôi chuyển sự kiện này đến lệnh gọi lại để gọi PreventDefault , đây là điều sẽ ngăn nhấp chuột gửi biểu mẫu.

Trong thẻ mở của biểu mẫu, hãy đặt thuộc tính action như sau:

<form id="contactForm" action="#">

Có vẻ như bạn đang thiếu a return false.

Nếu bạn muốn xem các lỗi trình duyệt mặc định đang được hiển thị , ví dụ: những lỗi được kích hoạt bởi các thuộc tính HTML (hiển thị trước bất kỳ xử lý JS mã máy khách nào):

<input name="o" required="required" aria-required="true" type="text">

Bạn nên sử dụng submitsự kiện thay vì clicksự kiện. Trong trường hợp này, một cửa sổ bật lên sẽ tự động được hiển thị yêu cầu " Vui lòng điền vào trường này ". Ngay cả với preventDefault:

$('form').on('submit', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will show up a "Please fill out this field" pop-up before my_form_treatment

Như ai đó đã đề cập trước đây , return falsesẽ ngừng truyền (nghĩa là nếu có nhiều trình xử lý hơn được đính kèm với việc gửi biểu mẫu, chúng sẽ không được thực thi), nhưng trong trường hợp này, hành động được kích hoạt bởi trình duyệt sẽ luôn thực hiện trước. Ngay cả với một return falseở cuối.

Vì vậy, nếu bạn muốn loại bỏ các cửa sổ bật lên mặc định này , hãy sử dụng clicksự kiện trên nút gửi:

$('form input[type=submit]').on('click', function(event) {
   event.preventDefault();
   my_form_treatment(this, event);
}); // -> this will NOT show any popups related to HTML attributes

Một giải pháp thay thế sẽ là không sử dụng thẻ biểu mẫu và xử lý sự kiện nhấp chuột vào nút gửi thông qua jquery. Bằng cách này sẽ không làm mới trang nào nhưng đồng thời có một nhược điểm là nút "enter" để gửi sẽ không hoạt động và trên điện thoại di động bạn sẽ không nhận được nút bắt đầu (một kiểu trong một số điện thoại di động). Vì vậy, hãy sử dụng thẻ biểu mẫu và sử dụng câu trả lời được chấp nhận.