การดักอีเวนต์ onsubmit ของฟอร์ม เมื่อ submit ฟอร์มด้วย Javascrip
เคยพบปัญหาว่า เราไม่สามารถ ตรวจสอบฟอร์มก่อนส่ง เมื่อเราใช้ Javascript ทำการซับมิตฟอร์มด้วย form.submit() หรือไม่ ถ้าไม่เข้าใจ ดูตัวอย่างเลย
จากโค้ดด้านบน หากเราทำการ Submit ด้วยการกดปุ่ม Submit ก็จะมีกรอบแจ้งข้อความใน text ออกมา อันเกิดจากการเข้าไปทำงานใน event onsubmit ตามปกติของฟอร์ม แต่ถ้าเราทำการ Submit ด้วยการกดปุ่ม Test Submit เพื่อไปเรียกฟังก์ชั่น submit() ของฟอร์ม เราจะไม่ได้รับข้อความใดๆ นั่นหมายถึง มันไม่ได้เข้าไปทำงานยังอีเว้นต์ onsubmit ของฟอร์มตามปกติ เอ...แล้วเราจะตรวจฟอร์มก่อนส่งได้ไงถ้าเราต้องตรวจฟอร์มในอีเว้นต์ onsubmit
ข้อเท็จจริงในกรณีนี้คือ event onsubmit ของฟอร์มเกิดเมื่อ ทำการกดปุ่ม submit ภายในฟอร์มครับ ไม่ได้เกิดจากเมื่อฟอร์มทำการ submit ดังนั้นการเรียกฟังก์ชั่น submit() ของฟอร์ม จึงไม่มีการเรียกอีเวนต์ onsubmit
การแก้ไขมี 2 กรณี
1. เมื่อไม่มีปุ่ม submit บนฟอร์ม และใช้ การ submit ด้วย Javascript เท่านั้น ก็ให้ทำการตรวจสอบฟอร์มให้เสร็จก่อน แล้วค่อยเรียกคำสั่ง submit() ของฟอร์ม
2. ใช้วิธีนี้
จะเห็นได้ว่า โค้ดด้านบนนี้ เราสามารถทำการ submit ได้ทั้ง 2 ทาง ไม่ว่าจะผ่านปุ่ม submit ตามปกติ หรือการเรียก Javascript ผ่านปุ่ม button และ หากเราต้องการฟอร์มที่ไม่เห็นปุ่ม submit เราก็อาจทำการซ่อนปุ่ม submit ไว้เลยก็ได้
<form name="frm_test" method="post" action="index.php" onsubmit="doSubmit(this)">
<input type="text" name="test">
<input type="submit" name="btn_submit" />
<input type="button" onclick="doTestClick()" value="Test Submit" />
</form>
<script type="text/javascript">
function doTestClick() {
frm_test.submit(); // submit form ด้วย Javascript
};
function doSubmit(form) {
alert(form.test.value);
};
</script>จากโค้ดด้านบน หากเราทำการ Submit ด้วยการกดปุ่ม Submit ก็จะมีกรอบแจ้งข้อความใน text ออกมา อันเกิดจากการเข้าไปทำงานใน event onsubmit ตามปกติของฟอร์ม แต่ถ้าเราทำการ Submit ด้วยการกดปุ่ม Test Submit เพื่อไปเรียกฟังก์ชั่น submit() ของฟอร์ม เราจะไม่ได้รับข้อความใดๆ นั่นหมายถึง มันไม่ได้เข้าไปทำงานยังอีเว้นต์ onsubmit ของฟอร์มตามปกติ เอ...แล้วเราจะตรวจฟอร์มก่อนส่งได้ไงถ้าเราต้องตรวจฟอร์มในอีเว้นต์ onsubmit
ข้อเท็จจริงในกรณีนี้คือ event onsubmit ของฟอร์มเกิดเมื่อ ทำการกดปุ่ม submit ภายในฟอร์มครับ ไม่ได้เกิดจากเมื่อฟอร์มทำการ submit ดังนั้นการเรียกฟังก์ชั่น submit() ของฟอร์ม จึงไม่มีการเรียกอีเวนต์ onsubmit
การแก้ไขมี 2 กรณี
1. เมื่อไม่มีปุ่ม submit บนฟอร์ม และใช้ การ submit ด้วย Javascript เท่านั้น ก็ให้ทำการตรวจสอบฟอร์มให้เสร็จก่อน แล้วค่อยเรียกคำสั่ง submit() ของฟอร์ม
2. ใช้วิธีนี้
<form name="frm_test" method="post" action="index.php" onsubmit="doSubmit(this)">
<input type="text" name="test">
<input type="submit" name="btn_submit" />
<input type="button" onclick="doTestClick()" value="Test Submit" />
</form>
<script type="text/javascript">
function doTestClick() {
frm_test.btn_submit.click(); // ไปจำลองการกดปุ่มบน ปุ่ม submit แทน
};
function doSubmit(form) {
alert(form.test.value);
};
</script>จะเห็นได้ว่า โค้ดด้านบนนี้ เราสามารถทำการ submit ได้ทั้ง 2 ทาง ไม่ว่าจะผ่านปุ่ม submit ตามปกติ หรือการเรียก Javascript ผ่านปุ่ม button และ หากเราต้องการฟอร์มที่ไม่เห็นปุ่ม submit เราก็อาจทำการซ่อนปุ่ม submit ไว้เลยก็ได้
<input type="submit" name="btn_submit" style="display:none" />