การส่งข้อมูลไปตรวจสอบกับฐานข้อมูลขณะพิมพ์ด้วย GAJAX

โค้ดนี้ถูกถามถึงกันมากครับ ซึ่งตัวอย่างการใช้งานที่ถามกันบ่อยๆ คือ การตรวจสอบว่ามีชื่อนี้ลงทะเบียนไว้แล้วหรือไม่ ในขณะกรอก ซึ่ง GAJAX ได้ช่วยให้การทำงานนี้ง่ายขึ้นมากครับ

นอกจากนี้ตัวอย่างนี้ยังแสดงให้เห็นถึงเทคนิคการใช้ซ้ำโค้ดอีกด้วย ด้วยการทำหน้าที่ ตรวจสอบข้อมูลใน input 2 ตัวพร้อมกันด้วยโค้ดชุดเดียว

<form id="check_form" method="post" action="chkarray.php">

<p><input type="text" id="user" /><span id="check_user">&nbsp;</span></p>

<p>ลองพิมพ์ <b>admin</b> ลงใน input</p>

<p><input type="text" id="email" /><span id="check_email">&nbsp;</span></p>

<p>ลองพิมพ์ <b>admin@goragod.com</b> ลงใน input</p>

</form>

โค้ดฟอร์ม ไม่มีอะไรครับแค่ส่วนหนึ่งของฟอร์มธรรมดา การกำหนด id ของ element ต่างๆมีความสัมพันธ์กับการตรวจสอบค่าครับ เช่น ฟิลด์ user ใช้กับ input ที่มี id เป็น user และ แสดงผลลัพท์ ที่ check_user และ ค่าที่ถูกส่งไปตรวจสอบ สามารถอ่านได้จาก $_POST[user] ในทำนองเดียวกันกับ email ครับ

ในโค้ดผมไม่ได้กำหนด name ให้กับ input ต่างๆ เนื่องจากว่ามันไม่ได้มีส่วนเกี่ยวพันใดๆ กับตัวอย่าง ซึ่งสามารถกำหนดเป็นอะไรก็ได้ และจะถูกใช้เมื่อ submit เท่านั้น

<script type="text/javascript">

// ตรวจจับการกรอกข้อความใน input

new $G('user').addEvent('keyup', doCheckUser);

</script>

โค้ด Javascript ของ input สำหรับกำหนด event ให้กับ input โดยจะไปเรียก doCheckUser เมื่อมีการกดคีย์บอร์ด

<script type="text/javascript">

var doCheckUser = function(event){

    // input ที่กำลังพิมพ์

    var input = GEvent.element(event);

    // พื้นที่แสดงข้อมูลตอบกลับ

    var result = $E('check_' + input.id);

    var req = new GAjax();

    // แสดงรูปรอโหลด เพื่อบอกว่ากำลังส่งข้อมูลไปตรวจสอบ

    result.innerHTML = '<img src="https://www.goragod.com/skin/img/wait.gif" alt="" />';

    // ajax ส่งข้อมูลไปตรวจสอบ

    req.send('getuserexists.php' ,  input.id + '=' + encodeURIComponent(input.value) , function(xhr) {

        result.innerHTML = xhr.responseText;

    });

};

</script>

โค้ด Javascript ส่วนนี้ สามารถแยกใส่ไว้ในไฟล์ JS ภายนอกได้ครับ ทำหน้าที่ส่งข้อมูลไปตรวจสอบ และ รับกลับมาแสดงผล

<?php

    if(isset($_POST[user])){

        if($_POST[user] == 'admin'){

            echo 'มีชื่อนี้อยู่แล้ว';

        }else{

            echo 'ใช้งานชื่อนี้ได้';

        }

    }

    if(isset($_POST[email])){

        if($_POST[email] == 'admin@goragod.com'){

            echo 'มีอีเมล์นี้อยู่แล้ว';

        }else{

            echo 'ใช้งานอีเมล์นี้ได้';

        }

    }



?>

โค้ด getuserexists.php ทำหน้าที่ตรวจสอบข้อมูลที่ส่งมา โดยคัดแยกการตรวจสอบจากค่าที่ส่งมา ซึ่งในการตรวจสอบ อาจเขียนโค้ดเพื่อตรวจสอบกับฐานข้อมูลก็ได้ครับ ตามความต้องการของเรา

ตัวอย่าง