การใช้ GFORM ตรวจสอบข้อมูลก่อนการ submit ด้วย Javascript
<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 ในลักษณะเดิม
ตัวอย่าง