EDIT: Vui lòng đọc cẩn thận tất cả các cách thông qua câu hỏi trước khi bạn xem xét trả lời câu hỏi. Tôi là không phải là hỏi về khả năng sử dụng trình xử lý sự kiện nội tuyến trong mã sản xuất, cũng như tôi không hỏi về cách tốt nhất để đạt được kết quả được hứa hẹn bởi bài viết tôi tham chiếu. Đây là câu hỏi về ngữ nghĩa Javascript và chi tiết triển khai trình duyệt, không phải về các phương pháp mã hóa tốt nhất.kiểu đầu vào = "gửi", trình xử lý onclick gọi this.form.submit(), và trả về không có giá trị
Cảm ơn bạn.
Nghe như một cơn ác mộng, phải không?
Tuy nhiên, tôi tìm thấy một số online advice rằng chủ trương làm chỉ là một điều như vậy để ngăn chặn đúp nộp một hình thức:
<input type="submit"
onclick="this.disabled=true;
this.value='Sending, please wait...';
this.form.submit();" />
Gác lại bất kỳ cuộc thảo luận về những điều xấu xa của các event handler inline, những vấn đề tôi thấy đây là :
- Loại thẻ là
"submit", do đó gửi biểu mẫu chứa của nó là hành vi mặc định của nó; - Trình xử lý
onclickrõ ràng gửi biểu mẫu có chứa; - Trình xử lý
onclickkhông trả vềfalseđể ngăn chặn hành vi mặc định (xem 1).
trực giác, tôi sẽ nghĩ rằng một nhấp chuột vào mục này sẽ làm chính xác ngược về những gì những tuyên bố bài viết - tức là, gửi biểu mẫu hai lần, một lần như một kết quả của sự rõ ràng submit() cuộc gọi, và sau đó một lần nữa là hành vi mặc định không được nhấn mạnh của điều khiển loại "submit".
Mặt khác, tôi đã viết một kịch bản PHP nhỏ (bên dưới) và thử nó với cả Firefox và Safari (tại thời điểm này chỉ có các trình duyệt thuận tiện) và nó chỉ ghi một mục nhập cho mỗi lần nhấp chuột vào nút:
<html>
<head></head>
<body>
<?php
if (isset($_GET['action']) && $_GET['action'] == 'submit') {
$s = 'Got form submission at ' . time();
error_log($s);
echo $s;
}
else {
?>
<form action="http://localhost/~hephaestus/phptests/submittest.php?action=submit"
method="post">
<input type="submit"
onclick="this.disabled=true;
this.value='Sending, please wait...';
this.form.submit();" />
</form>
<?php
}
?>
</body>
</html>
Vì vậy, hai trình duyệt này thực sự thực hiện điều "đúng" (nơi "đúng" được xác định trong một số tài liệu mà tôi chưa thấy hoặc chưa đọc đủ) - có nghĩa là phân tích của tôi về các vấn đề là không đầy đủ hay sai?
Hoặc, phân tích của tôi có đúng hay không - nghĩa là các lần gửi đơn được quan sát là kết quả của những người thực hiện trình duyệt đưa vào trường hợp đặc biệt, để lưu các lập trình viên ngây thơ?
UPDATE:
Trong một nỗ lực để thực nghiệm kiểm tra các yêu cầu bồi thường bởi @sourcecode rằng phương pháp form.submit() là một số loại "nút thứ hai submit" trên một hình thức, và vì thế tùy thuộc vào các quy tắc quy định tại phần 17.13.2 of the HTML4 spec mà chỉ có thể có một "thành công" nút gửi, tôi thực hiện một vài bổ sung vào kịch bản thử nghiệm PHP của tôi:
<?php
if (isset($_GET['action']) && $_GET['action'] == 'submit') {
$s = 'Got form submission at ' . time() . ', tellme = ' . $_POST['tellme'];
error_log($s);
echo $s;
}
else {
?>
<form action="http://localhost/~hephaestus/phptests/submittest.php?action=submit"
method="post">
<input type="hidden" id="tellme" name="tellme" value="0" />
<input type="submit"
onclick="this.disabled=true;
this.value='Sending, please wait...';
this.form.submit();
document.getElementById('tellme')=1;" />
</form>
<?php
}
?>
Trong Firefox, mã này tạo ra single entry lỗi đăng nhập:
Got biểu mẫu gửi tại timestamp, tellme = 1
mà không gợi ý rằng phương pháp-gọi là bằng cách nào đó được thay thế bởi nội tại hành vi hướng sự kiện của điều khiển.
Hơn nữa, nếu tôi bao gồm thêm một return false; sau khi thiết lập giá trị của tellme-1 (do đó ngăn cản sự kiện nhấp chuột từ tuyên truyền, và do đó ngăn ngừa các hành vi nội tại của sự kiểm soát), single lỗi đăng nhập là:
hình thức trình Got tại timestamp, tellme = 0
nghĩa là trong trường hợp này, việc nộp là kết quả của những lời khẩn cầu this.form.submit().
Mặt khác, khi tôi thử hai biến thể tương tự trong Safari, mỗi trong số họ mang lại cho tôi cùng một đơn lỗi đăng nhập:
Got biểu mẫu gửi tại timestamp, tellme = 0
Vì vậy, trong trường hợp của Safari, lời gọi phương thức luôn được ưu tiên hơn việc gửi theo sự kiện - có lẽ vì điều đó xảy ra trước đó.
Đó là. Chỉ. Tuyệt vời. : -/
Cập nhật thêm: Tôi có cơ hội kiểm tra điều này trên IE 8.0 trên Windows NT 5.1.
IE 8 phản ánh hành vi của Safari, tức là phương pháp form.submit() luôn được ưu tiên hơn việc gửi theo định hướng.
Mặc dù ngày nay hầu như không liên quan, tôi cũng nhận ra rằng tôi có một phiên bản IE 5.22 cổ đại trên một chiếc iMac PowerPC thậm chí còn cổ hơn đang chạy OS X 10.4.11. Bit thú vị của đố lịch sử ở đây là IE5 làm việc chính xác đối diện đến cách IE8 hoạt động: sự kiện-driven nộp luôn thay thế các phương pháp form.submit() - ngay cả khi sự kiện click đã bị ức chế từ tuyên truyền bởi một return false; tại kết thúc xử lý onclick! (Tuy nhiên, tôi chưa từng biết liệu đây có phải là lỗi hay tính năng hay không.) Tôi chưa bao giờ - và có thể không bao giờ!- chạy một bài kiểm tra để xác định xem nó có làm hỏng sự kiện ức chế sự kiện hay cố gắng làm một điều gì đó "thông minh".)
Tuy nhiên, cả hai trình duyệt IE chỉ thực hiện một lần gửi đơn.
Kết luận tạm thời của tôi là kết nối chính xác giữa điều khiển "gửi" và phương thức DOM form.submit() không được xác định rõ ràng và người thực hiện trình duyệt, trong trường hợp không có của bất kỳ hướng dẫn rõ ràng nào, thường làm những gì họ nghĩ tốt nhất (xem ví dụ: @Boris Zbarsky's answer).
Ít nhất trong các trường hợp Firefox, Safari và IE, người triển khai của họ thấy trước khả năng cả sự kiện và cuộc gọi phương thức đều có thể cạnh tranh để gửi cùng một biểu mẫu và thực hiện các bước (mặc dù khác nhau) gamut) để đảm bảo rằng chỉ một trong số họ sẽ thành công.
(tôi muốn vẫn chào đón câu trả lời bổ sung từ folks người biết internals trình duyệt khác nhau cũng đủ để bình luận, hoặc những người đã nạp lệnh PHP đơn giản của tôi sử dụng các trình duyệt khác hơn những người tôi đã thử nghiệm.)
Khi JavaScript nội tuyến trông giống như là thời gian để suy nghĩ về tách logic và đánh dấu ... – elclanrs
Phải, nhưng bạn sẽ nhận thấy rằng tôi đã nói "Bỏ qua bất kỳ cuộc thảo luận nào về các tệ nạn của trình xử lý sự kiện nội tuyến ..." là về cái gì khác hoàn toàn, tức là ngữ nghĩa Javascript và triển khai trình duyệt. – Hephaestus