การใช้ GFORM ตรวจสอบข้อมูลก่อนการ submit ด้วย Javascript
GForm มีความสามารถในการตรวจสอบฟอร์มก่อนการส่งด้วยครับ ใน parameter ตัวที่ 4 ของ GForm เราสามารถกำหนดฟังก์ชั่นเพื่อตรวจสอบได้ โดยมีรูปแบบการใช้งานเหมือนการใช้ onsubmit ของฟอร์มโดยทั่วๆไปครับ
ผมใช้ตัวอย่างโค้ด login นะครับ โดยการตรวจสอบการกรอก username และ password ก่อนการ submit สำหรับการทำงานในส่วนของ PHP ผมจะไม่กล่าวถึง สามารถดูได้จากบทความอื่นๆของ GForm ได้
โค้ด Javascript ครับ ตัวฟังก์ชั่น doCheck จะเป็นฟังก์ชั่นที่รับค่าก่อนการ submit เหมือนการกำหนด onsubmit ให้กับฟอร์มโดยทั่วไปครับ ถ้า เรา return ค่า true ให้กับฟังก์ชั่นนี้ จะทำให้ฟอร์มทำการ submit ไปครับ
ฟังก์ชั่น doSubmit เป็นฟังก์ชั่นรับค่ากลับ ตามปกติของ GForm
2 ฟังก์ชั่นสามารถนำไปไว้ไฟล์ Javascript ภายนอกได้ครับ
ข้อสังเกตุนิดนึง คือ 2 ฟังก์ชั่นนี้ใช้รูปแบบการเขียนไม่เหมือนกันนะครับ เนื่องจากผมต้องการให้ ฟังก์ชั่น onsubmit ทำงานเข้ากับ onsubmit ในลักษณะเดิม
ตัวอย่าง
<script type="text/javascript" src="https://www.goragod.com/js/gajax.js"></script>
<form method="post" action="login.php" id="login_frm">
<p><label for="user">User : </label><input type="text" name="user" id="user" /></p>
<p><label for="password">Password : </label><input type="password" name="password" id="password" /></p>
<p><input type="submit" /></p>
</form>
<div id="wait" style="visibility:hidden;color:red">Loading...</div>
ผมใช้ตัวอย่างโค้ด login นะครับ โดยการตรวจสอบการกรอก username และ password ก่อนการ submit สำหรับการทำงานในส่วนของ PHP ผมจะไม่กล่าวถึง สามารถดูได้จากบทความอื่นๆของ GForm ได้
<script type="text/javascript">
//<![CDATA[
var doSubmit = function(xhr){
alert(xhr.responseText);
};
function doCheck(form){
if(form.user.value == ''){
alert('กรุณากรอกชื่อ');
form.user.focus(); // ย้ายโฟกัสไปยัง input
new GHighlight(form.user).play(); // ทำ highlight
return false;
}else if(form.password.value == ''){
alert('กรุณากรอกรหัสผ่าน');
form.password.focus(); // ย้ายโฟกัสไปยัง input
new GHighlight(form.password).play(); // ทำ highlight
return false;
};
return true;
};
new GForm('login_frm',false,'wait',false,doCheck).onsubmit(doSubmit);
//]]>
</script>
โค้ด Javascript ครับ ตัวฟังก์ชั่น doCheck จะเป็นฟังก์ชั่นที่รับค่าก่อนการ submit เหมือนการกำหนด onsubmit ให้กับฟอร์มโดยทั่วไปครับ ถ้า เรา return ค่า true ให้กับฟังก์ชั่นนี้ จะทำให้ฟอร์มทำการ submit ไปครับ
ฟังก์ชั่น doSubmit เป็นฟังก์ชั่นรับค่ากลับ ตามปกติของ GForm
2 ฟังก์ชั่นสามารถนำไปไว้ไฟล์ Javascript ภายนอกได้ครับ
ข้อสังเกตุนิดนึง คือ 2 ฟังก์ชั่นนี้ใช้รูปแบบการเขียนไม่เหมือนกันนะครับ เนื่องจากผมต้องการให้ ฟังก์ชั่น onsubmit ทำงานเข้ากับ onsubmit ในลักษณะเดิม
ตัวอย่าง