Warning: file_get_contents(/home/gcms/public_html/skin/datas/users/goro/skin/2017/amp.css): failed to open stream: No such file or directory in /home/gcms/public_html/Gcms/Amp.php on line 32
GAJAX บทที่ 23 GForm submit ฟอร์ม แบบไม่เปลี่ยนหน้าด้วย GAJAX

GORAGOD

GAJAX บทที่ 23 GForm submit ฟอร์ม แบบไม่เปลี่ยนหน้าด้วย GAJAX

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 สามารถเรียกหาฟังก์ชั่นได้เจอ

ตัวอย่าง