0Pricing
JavaScript Academy · บทเรียน

เหตุการณ์ submit

จัดการการส่งแบบฟอร์มและป้องกันการโหลดหน้าใหม่

เหตุการณ์ submit เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

การส่งฟอร์ม

เหตุการณ์ submit จะเกิดขึ้นเมื่อมีการส่งฟอร์ม ไม่ว่าจะโดยการคลิกปุ่มส่งข้อมูลหรือกด Enter ในช่องข้อมูล ตำแหน่งนี้เหมาะสำหรับจัดการข้อมูลฟอร์ม

การรับฟังเหตุการณ์บน form

ผูกตัวรับฟังเหตุการณ์เข้ากับองค์ประกอบ form โดยตรง ไม่ใช่กับปุ่มส่งข้อมูล เพื่อให้ครอบคลุมทุกวิธีการส่งฟอร์ม

const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
  console.log("submitting");
});

การโหลดหน้าใหม่โดยค่าเริ่มต้น

โดยค่าเริ่มต้น การส่งฟอร์มจะนำทางไปยังหน้าอื่นหรือโหลดหน้าใหม่ สำหรับแอปที่ขับเคลื่อนด้วย JavaScript โดยทั่วไปควรยกเลิกการทำงานนี้

form.addEventListener("submit", (e) => {
  e.preventDefault();
});

เหตุผลที่ใช้ preventDefault ที่นี่

การเรียกใช้ preventDefault จะทำให้หน้ายังคงอยู่ที่เดิม เพื่อให้คุณตรวจสอบและส่งข้อมูลด้วยตนเอง ซึ่งมักทำผ่าน fetch

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const data = new FormData(form);
  // send data without reloading
});

ปุ่ม submit

button ที่มี type="submit" ซึ่งเป็นค่าเริ่มต้นภายในฟอร์ม จะทำให้เกิดการส่งฟอร์ม ให้ใช้ type="button" สำหรับปุ่มที่ไม่ควรส่งฟอร์ม

การกดแป้น Enter จะส่งฟอร์ม

การกด Enter ในช่องข้อความบรรทัดเดียวจะส่งฟอร์ม นี่จึงเป็นเหตุผลสำคัญที่ต้องรับฟังเหตุการณ์บนฟอร์ม

requestSubmit

form.requestSubmit ส่งฟอร์มด้วยโปรแกรม พร้อมทั้งทำให้เกิดเหตุการณ์ submit และเรียกใช้การตรวจสอบความถูกต้อง ต่างจาก form.submit ซึ่งข้ามทั้งสองขั้นตอน

form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the event

การอ่านข้อมูลเมื่อส่งฟอร์ม

ภายในตัวจัดการเหตุการณ์ ให้สร้าง FormData จากฟอร์มเพื่อรวบรวมช่องข้อมูลที่มีชื่อทั้งหมดอย่างเป็นระเบียบ

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const fd = new FormData(form);
  const obj = Object.fromEntries(fd.entries());
  console.log(obj);
});

การปิดใช้งานปุ่ม

เพื่อป้องกันการส่งข้อมูลซ้ำ ให้ปิดใช้งานปุ่มส่งข้อมูลระหว่างประมวลผล แล้วเปิดใช้งานอีกครั้งเมื่อเสร็จสิ้น

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const btn = form.querySelector("[type=submit]");
  btn.disabled = true;
});

การรีเซ็ตฟอร์ม

form.reset จะล้างช่องข้อมูลและคืนค่าเหล่านั้นกลับเป็นค่าเริ่มต้น ส่วนเหตุการณ์ reset ช่วยให้คุณตอบสนองต่อการรีเซ็ตได้

form.addEventListener("reset", () => {
  console.log("cleared");
});

องค์ประกอบปุ่มส่งข้อมูล

พร็อพเพอร์ตี submitter ของเหตุการณ์ submit ระบุว่าปุ่มใดเป็นตัวเรียกเหตุการณ์ ซึ่งมีประโยชน์เมื่อฟอร์มมีปุ่มส่งข้อมูลหลายปุ่ม

form.addEventListener("submit", (e) => {
  console.log(e.submitter && e.submitter.value);
});

ตรวจสอบอย่างรวดเร็ว

เลือกแนวทางปฏิบัติที่ดีที่สุด

สรุปทบทวน

จัดการการส่งฟอร์มด้วยเหตุการณ์ submit ของฟอร์ม โดยเรียกใช้ preventDefault สำหรับแอปที่ขับเคลื่อนด้วย JS รับฟังเหตุการณ์บนฟอร์ม ไม่ใช่บนปุ่ม เพื่อจับการส่งฟอร์มด้วยแป้น Enter ใช้ FormData เพื่ออ่านช่องข้อมูล ใช้ requestSubmit เพื่อส่งฟอร์มด้วยโปรแกรมพร้อมการตรวจสอบความถูกต้อง และปิดใช้งานปุ่มเพื่อป้องกันการส่งซ้ำ

คำถามที่พบบ่อย

บทเรียน “เหตุการณ์ submit” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “เหตุการณ์ submit” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “เหตุการณ์ submit”

จัดการการส่งแบบฟอร์มและป้องกันการโหลดหน้าใหม่ คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “เหตุการณ์ submit” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. การอ่านค่าจากช่องป้อนข้อมูล
  2. เหตุการณ์ submit
  3. การตรวจสอบความถูกต้องฝั่งไคลเอ็นต์
  4. Constraint Validation API
← กลับไปที่ JavaScript Academy