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


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

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

User avatar
M004
PHP VIP Members
PHP VIP Members
Posts: 1323
Joined: 01/01/1970 7:00 am

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

Post by M004 » 17/08/2013 2:45 pm

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

ตัวอย่าง
ข้อมูลใน Data Base
Auto Fill ข้อมูลด้วย Ajax บน Booststap 8.png
8.png (7.36 KiB) Viewed 1125 times
กรอก Id_mem ให้ตรงกับ Data base ก็จะแสดง ผล ดังนี้
Auto Fill ข้อมูลด้วย Ajax บน Booststap 5.png
5.png (15.89 KiB) Viewed 1125 times
Auto Fill ข้อมูลด้วย Ajax บน Booststap 6.png
6.png (17.43 KiB) Viewed 1125 times
กรอก Id_mem ไม่ตรงกับ Data base ก็จะไม่แสดงผล
Auto Fill ข้อมูลด้วย Ajax บน Booststap 7.png
7.png (15.04 KiB) Viewed 1125 times
เริ่มต้นแทรก Script bootstrap.js / jquery.min.js ลงใน html
ไฟล์ .Html
แทรก Script ดังนี้

Code: Select all

<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

Code: Select all

<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

Code: Select all

<?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

Return to “Booststap Knowledge”

Users browsing this forum: No registered users and 4 guests