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

Question

Tôi đã tìm kiếm qua một loạt các trang nhưng không thể tìm thấy sự cố của mình, vì vậy tôi phải tạo một bài đăng.

Tôi có biểu mẫu có nút gửi và khi được gửi, tôi muốn biểu mẫu 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.

Dưới đây là các hình thức:

<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 đã cố gắng có và không có một yếu tố hành động về hình thức, nhưng không biết những gì tôi m làm sai. Điều gì đã làm phiền tôi nhiều hơn là tôi có một ví dụ nào đó một cách hoàn hảo: Example Page

Nếu bạn muốn nhìn thấy vấn đề của tôi sống, goto stormink.net (trang web của tôi) và kiểm tra các sidebar nơi nó nói "Hãy gửi cho tôi và email "và" Đăng ký RSS ". Cả hai đều là các hình thức mà tôi đang cố gắng để làm việc này.

Answer 1

Chỉ cần xử lý việc nộp mẫu trên sự kiện submit, và trả về false:

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

Bạn không cần nữa sự kiện onclick trên nút gửi:

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

Answer 2

Có vẻ như bạn đang thiếu một số return false.

Answer 3

đâ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 sự kiện 'nhấp' quản lý bằng cách sử dụng jQuery để gửi nút (hoặc nút bất kỳ), mà sẽ mất submitClick như một cuộc gọi lại. Chúng tôi chuyển sự kiện đến cuộc gọi lại để gọi preventDefault, đó là điều sẽ ngăn nhấp chuột gửi biểu mẫu.

Answer 4

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

Answer 5

Trong thẻ mở của mẫu của bạn, thiết lập thuộc tính một hành động như vậy:

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