A-AA+then

GForm เป็น class สำหรับ ทำการ Submit ฟอร์ม หรือ อัปโหลด แบบ Ajax โดยมีความสามารถในการ Submit ฟอร์ม เหมือน ฟอร์มปกติ แต่สามารถรับค่ากลับได้ในแบบ Ajax โดยที่ไม่จำเป็นต้อง Reload ใหม่ทั้งหน้า
<form id="frm_login" action="login.php" method="post">
<p class="h"><span>เข้าระบบ</span><span id="wait" style="visibility: hidden;color:red;">Loading...</span></p>
<p><label for="user">ชื่อสมาชิก : </label><input type="text" id="user" name="user" size="40" maxlength="20" value="" /></p>
<p><label for="password">รหัสผ่าน : </label><input type="password" id="password" name="password" size="40" maxlength="20" value="" /></p>
<p><input id="submit" type="submit" value="เข้าระบบ" /></p>
</form>

ขั้นแรก ออกแบบฟอร์มเหมือนฟอร์มปกติทั่วไปทุกประการ wait คือ ส่วนของการ แสดง loading ในที่นี้เป็นการกำหนดให้แสดง loading ข้างๆ ฟอร์มเลย
<script type="text/javascript">
new GForm('frm_login', false, 'wait', false).onsubmit(doLogin);// เรียกใช้ GForm
</script>

Javascript ในส่วนของฟอร์ม โค้ดนี้ต้องเอาไว้ในหน้าเดียวกับฟอร์ม ซึ่งจะเป็นการประกาศ class สำหรับจัดการ Submit ของฟอร์ม โดยที่เราไม่ต้องไปยุ่งในส่วนของ HTML เลย
<?php
    print_r($_POST);
?>

โค้ด PHP ในหน้า login.php ซึ่งฟอร์มทำการ submit ไป ในตัวอย่าง ผมได้ทำการคืนค่าที่ส่งมาจากฟอร์ม ให้ดูเป็นตัวอย่าง วึ่งจะเป็นการแสดงค่าที่ submit มาจากฟอร์มให้ดู
<script type="text/javascript">
var doLogin = function(xhr){
     alert(xhr.responseText);// รับค่าที่ส่งไป กลับมาดู
};
</script>

โค้ดส่วนนี้ เป็น Javascript ในส่วนรับค่ากลับจาก GForm เป็นการ alert ค่าที่ส่งกลับมาให้เราดู โค้ดส่วนนี้ สามารถแยกออกเป็นไฟล์ js ต่างหากได้ แต่ถ้าต้องการนำไปไว้หน้าเดียวกับฟอร์มต้องวางโค้ดส่วนนี้ไว้ก่อน การเรียกใช้ GForm เพื่อให้ GForm สามารถเรียกหาฟังก์ชั่นได้เจอ

ตัวอย่าง

Relate

^