Gửi biểu mẫu Thực thi tốt nhất cho JavaScript?

Question

Tôi muốn chạy một hàm JavaScript khi biểu mẫu được gửi. Vấn đề là, khi biểu mẫu được gửi, trang được tải lại và các giá trị biểu mẫu được nối vào URL dưới dạng tham số GET. Tôi muốn nó ở lại trang hiện tại và chỉ chạy hàm JavaScript.

Tôi đã tự hỏi thực hành tốt nhất (hoặc những gì bạn làm) để tránh việc tải lại trang và các thông số được gửi đi.

Answer 1

Sử dụng sự kiện onsubmit để thực thi mã JavaScript khi biểu mẫu được gửi. Sau đó bạn có thể trả về false hoặc gọi phương thức preventDefault của sự kiện đã qua để vô hiệu hóa việc gửi biểu mẫu.

Ví dụ:

<script> 
function doSomething() { 
    alert('Form submitted!'); 
    return false; 
} 
</script> 

<form onsubmit="return doSomething();" class="my-form"> 
    <input type="submit" value="Submit"> 
</form> 

này hoạt động, nhưng tốt nhất là không để rác HTML của bạn với JavaScript, cũng giống như bạn không nên viết nhiều quy tắc inline CSS. Nhiều khung công tác Javascript tạo thuận lợi cho việc phân tách mối quan tâm này. Trong jQuery, bạn ràng buộc một sự kiện bằng cách sử dụng mã JavaScript như vậy:

<script> 
$('.my-form').on('submit', function() { 
    alert('Form submitted!'); 
    return false; 
}); 
</script> 

<form class="my-form"> 
    <input type="submit" value="Submit"> 
</form> 

Answer 2

Đính kèm trình xử lý sự kiện vào sự kiện gửi biểu mẫu. Đảm bảo hủy bỏ tác vụ mặc định.

Chế độ Quirks có a guide to event handlers, nhưng bạn có thể nên sử dụng thư viện để đơn giản hóa mã và giải quyết sự khác biệt giữa các trình duyệt. Tất cả những cái chính (chẳng hạn như YUI và jQuery) bao gồm các tính năng xử lý sự kiện và có một bộ sưu tập lớn là tiny event libraries.

Đây là cách bạn sẽ làm điều đó trong YUI 3:

<script src="http://yui.yahooapis.com/3.4.1/build/yui/yui-min.js"></script> 
<script> 
    YUI().use('event', function (Y) { 
     Y.one('form').on('submit', function (e) { 
      // Whatever else you want to do goes here 
      e.preventDefault(); 
     }); 
    }); 
</script> 

Hãy chắc chắn rằng the server will pick up the slack nếu thất bại JavaScript vì lý do nào.

Answer 3

Tôi biết đã muộn một chút về điều này. Nhưng tôi luôn nghĩ rằng cách tốt nhất để tạo người nghe sự kiện là trực tiếp từ JavaScript. Không thích áp dụng kiểu CSS nội tuyến.

function validate(){ 
    //do stuff 
} 
function init(){ 
    document.getElementById('form').onsubmit = validate; 
} 
windows.onload = init; 

Bằng cách đó bạn không có nhiều người nghe sự kiện trong suốt HTML của mình.