Auto Fill ข้อมูลด้วย Ajax บน Booststap

Booststap Knowledge ความรู้สำหรับการออกเว็บเพื่อให้แสดงผล ได้ดี ทุกหน้าจอ

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
M004
PHP VIP Members
PHP VIP Members
โพสต์: 1323
ลงทะเบียนเมื่อ: 01/01/1970 7:00 am

Auto Fill ข้อมูลด้วย Ajax บน Booststap

โพสต์โดย M004 » 17/08/2013 2:45 pm

Auto Fill ข้อมูลด้วย Ajax บน Booststap
Auto Fill ข้อมูลด้วย Ajax เพียงแค่กรอกข้อมูลที่ตรงกับ database ข้อมูลต่างๆที่กำหนด ก็จะแสดงให้ช่อง Input หรือ ที่อื่นๆ ที่กำหนด

ตัวอย่าง
ข้อมูลใน Data Base
8.png
8.png (7.36 KiB) เปิดดู 596 ครั้ง


กรอก Id_mem ให้ตรงกับ Data base ก็จะแสดง ผล ดังนี้
5.png
5.png (15.89 KiB) เปิดดู 596 ครั้ง

6.png
6.png (17.43 KiB) เปิดดู 596 ครั้ง


กรอก Id_mem ไม่ตรงกับ Data base ก็จะไม่แสดงผล
7.png
7.png (15.04 KiB) เปิดดู 596 ครั้ง


เริ่มต้นแทรก Script bootstrap.js / jquery.min.js ลงใน html
ไฟล์ .Html
แทรก Script ดังนี้

โค้ด: เลือกทั้งหมด

<script type="text/javascript">
$(document).ready(function(){

   $("#txtMemID").change(function(){
         $.ajax({
            url: "ajax_auto.php" ,
            type: "POST",
            data: 'sCusID=' +$("#txtMemID").val()
         })
         .success(function(result) {
                       
                        if(result == ''){
                            $('input[type=text]').val('');
                        } else {
                        $.each(result, function(key, inval) {
                                                     
                        $("#txtMemID").val(inval["id_mem"]);
                        $("#txtUsed").val(inval["user"]);
                                                           $("#txtPass").val(inval["pass"]);
                        $("#txtEmail").val(inval["email"]);
                    });

             }

         });
                       
      });
   });
</script>


ส่วนของ Form

โค้ด: เลือกทั้งหมด

<table class="table">
  <tr>
    <td width="104">Member ID</td>
    <td width="153"><input type="text" id="txtMemID" name="txtMemID" size="5"></td>
  </tr>
  <tr>
    <td>User</td>
    <td><input type="text" id="txtUsed" name="txtUsed" size="20"></td>
  </tr>
  <tr>
    <td>Pass</td>
    <td><input type="text" id="txtPass" name="txtPass" size="25"></td>
  </tr>
  <tr>
    <td>Email</td>
    <td><input type="text" id="txtEmail" name="txtEmail" size="2"></td>
  </tr>

</table>


ไฟล์ Ajax.php

โค้ด: เลือกทั้งหมด

<?php
        $strSQL 
= "SELECT * FROM member WHERE id_mem = '".$_POST["sCusID"]."' ";
        $objQuery = mysql_query($strSQL) or die (mysql_error());
    $intNumField = mysql_num_fields($objQuery);
    $resultArray = array();
    while($obResult = mysql_fetch_array($objQuery))
    {
        $arrCol = array();
        for($i=0;$i<$intNumField;$i++)
        {
            $arrCol[mysql_field_name($objQuery,$i)] = $obResult[$i];
        }
        array_push($resultArray,$arrCol);
    }
    
    echo json_encode
($resultArray);
    
?>


กระทู้เกี่ยวข้อง
Typeahead ทำ Autocomplete บน Booststap
การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap
Auto Fill ข้อมูลด้วย Ajax บน Booststap

ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 10 และ บุคคลทั่วไป 0 ท่าน