มีบางสิ่งที่คุณต้องจำไว้
1. มีหลายวิธีในการส่งแบบฟอร์ม
- ใช้ปุ่มส่ง
- โดยกด Enter
- โดยเรียกกิจกรรมส่งใน JavaScript
- อาจมากขึ้นขึ้นอยู่กับอุปกรณ์หรืออุปกรณ์ในอนาคต
ดังนั้นเราควรผูกไว้กับเหตุการณ์ส่งแบบฟอร์มไม่ใช่เหตุการณ์คลิกปุ่ม สิ่งนี้จะทำให้มั่นใจได้ว่าโค้ดของเราทำงานบนอุปกรณ์และเทคโนโลยีการช่วยเหลือทั้งหมดในปัจจุบันและในอนาคต
2. Hijax
ผู้ใช้อาจไม่ได้เปิดใช้งาน JavaScript hijaxรูปแบบเป็นสิ่งที่ดีที่นี่ที่เราเบา ๆ ใช้การควบคุมของรูปแบบการใช้ JavaScript แต่ปล่อยให้มัน submittable ถ้า JavaScript ล้มเหลว
เราควรดึง URL และวิธีการจากแบบฟอร์มดังนั้นหาก HTML เปลี่ยนแปลงเราไม่จำเป็นต้องอัปเดต JavaScript
3. JavaScript ที่ไม่เป็นการรบกวน
การใช้event.preventDefault ()แทนที่จะส่งคืน falseเป็นแนวปฏิบัติที่ดีเนื่องจากช่วยให้เหตุการณ์เพิ่มขึ้น ซึ่งช่วยให้สคริปต์อื่น ๆ ผูกเข้ากับเหตุการณ์ตัวอย่างเช่นสคริปต์การวิเคราะห์ที่อาจตรวจสอบการโต้ตอบของผู้ใช้
ความเร็ว
เราควรใช้สคริปต์ภายนอกแทนการแทรกอินไลน์สคริปต์ของเรา เราสามารถเชื่อมโยงไปยังส่วนนี้ในส่วนหัวของหน้าโดยใช้แท็กสคริปต์หรือเชื่อมโยงไปที่ด้านล่างของหน้าเพื่อความเร็ว สคริปต์ควรปรับปรุงประสบการณ์ผู้ใช้อย่างเงียบ ๆ ไม่ให้เข้าทาง
รหัส
สมมติว่าคุณเห็นด้วยกับทุกอย่างที่กล่าวมาข้างต้นและคุณต้องการติดตามเหตุการณ์ส่งและจัดการผ่าน AJAX (รูปแบบ hijax) คุณสามารถทำสิ่งนี้:
$(function() {
$('form.my_form').submit(function(event) {
event.preventDefault(); // Prevent the form from submitting via the browser
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
});
คุณสามารถเปิดใช้งานการส่งแบบฟอร์มทุกครั้งที่คุณต้องการผ่าน JavaScript โดยใช้สิ่งที่ชอบ:
$(function() {
$('form.my_form').trigger('submit');
});
แก้ไข:
ฉันเพิ่งจะทำสิ่งนี้และจบลงด้วยการเขียนปลั๊กอิน
(function($) {
$.fn.autosubmit = function() {
this.submit(function(event) {
event.preventDefault();
var form = $(this);
$.ajax({
type: form.attr('method'),
url: form.attr('action'),
data: form.serialize()
}).done(function(data) {
// Optionally alert the user of success here...
}).fail(function(data) {
// Optionally alert the user of an error here...
});
});
return this;
}
})(jQuery)
เพิ่ม data-autosubmit attribute ให้กับ form form ของคุณจากนั้นคุณสามารถทำได้:
HTML
<form action="/blah" method="post" data-autosubmit>
<!-- Form goes here -->
</form>
JS
$(function() {
$('form[data-autosubmit]').autosubmit();
});