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

GForm เป็น class สำหรับ ทำการ Submit ฟอร์ม หรือ อัปโหลด แบบ Ajax โดยมีความสามารถในการ Submit ฟอร์ม เหมือน ฟอร์มปกติ แต่สามารถรับค่ากลับได้ในแบบ Ajax โดยที่ไม่จำเป็นต้อง Reload ใหม่ทั้งหน้า

ขั้นแรก ออกแบบฟอร์มเหมือนฟอร์มปกติทั่วไปทุกประการ wait คือ ส่วนของการ แสดง loading ในที่นี้เป็นการกำหนดให้แสดง loading ข้างๆ ฟอร์มเลย

<form id="frm_login" action="login.php" method="post">

<p class="h"><span>เข้าระบบ</span><span id="wait">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><button type=submit>เข้าระบบ</button></p>

</form>

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

<script>

var doLogin = function(xhr){

     alert(xhr.responseText); // รับค่าที่ส่งไป กลับมาดู

};

</script>

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

<script>

new GForm('frm_login', false, 'wait', false).onsubmit(doLogin); // เรียกใช้ GForm

</script>

โค้ด PHP ในหน้า login.php ซึ่งฟอร์มทำการ submit ไป ในตัวอย่าง ผมได้ทำการคืนค่าที่ส่งมาจากฟอร์ม ให้ดูเป็นตัวอย่าง ซึ่งจะเป็นการแสดงค่าที่ submit มาจากฟอร์มให้ดู

<?php

    print_r($_POST);

?>

สุดท้ายโค้ด CSS ของส่วนแสดงข้อความ Loading

#wait {

  color: #f00;

  visibility: hidden;

  margin-left: 10px;

}



#wait.show {

  visibility: visible;

}

ตัวอย่าง