GORAGOD.com

freelance, web developer, web designer, hosting, domain name

การใช้ GFORM ตรวจสอบข้อมูลก่อนการ submit ด้วย Javascript

GForm มีความสามารถในการตรวจสอบฟอร์มก่อนการส่งด้วยครับ ใน parameter ตัวที่ 4 ของ GForm เราสามารถกำหนดฟังก์ชั่นเพื่อตรวจสอบได้ โดยมีรูปแบบการใช้งานเหมือนการใช้ 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 ในลักษณะเดิม

ตัวอย่าง
0SHAREFacebookLINE it!
^