การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap


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

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

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

การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap

Post by M004 » 17/08/2013 2:33 am

การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap
สำหรับการตรวจสอบข้อมูลซ้ำ นั้น จะตรวจข้อมูลจาก Database เพือป้องกันการกรอกข้อมูลซ้ำ

ตัวอย่าง
ข้อมูลใน database
การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap 2.png
2.png (6.4 KiB) Viewed 3529 times
เมื่อกรอกข้อมูลซ้ำกับ ข้อมูลในdata base จะแจ้งเตือนข้อความดังนี้
การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap 1.png
1.png (14.07 KiB) Viewed 3529 times
เริ่มต้นแทรก Script bootstrap.js / jquery.min.js ลงใน html

ไฟล์ index.html
แทรก Script ดังนี้

Code: Select all

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

	$("#txtUser,#txtEmail").change(function(){

			$("#sUser").empty();
			$("#sEmail").empty();

			$.ajax({ 
				url: "ajax.php" ,
				type: "POST",
				data: 'sUser=' +$("#txtUser").val()+'&eMail='+$("#txtEmail").val()
			})
			.success(function(result) { 

					var obj = jQuery.parseJSON(result);

					if(obj != '')
					{
						  $.each(obj, function(key, inval) {

								   if($("#txtUser").val() == inval["user"])
								  {
									   $("#sUser").html(" <font color='red'>ชื่อมีอยู่แล้ว</font>");
								  }

								   if($("#txtEmail").val() == inval["email"])
								  {
									   $("#sEmail").html(" <font color='red'>อีเมล์นี้มีอยู่แล้ว</font>");
								  }

						  });
					}

			});

		});
	});
</script>
ส่วนของ Form

Code: Select all

<table class="table">

  <tr>
    <td>User</td>
    <td><input type="text" id="txtUser" name="txtUser">
	<span id="sUser"></span>
	</td>
  </tr>
  <tr>
    <td>Email <font color="red">*</font></td>
    <td><input type="text" id="txtEmail" name="txtEmail">
	<span id="sEmail"></span>
	</td>
  </tr>
 
</table>
ไฟล์ ajax.php

Code: Select all

<?php
    $strSQL = "SELECT * FROM member WHERE user = '".$_POST["sUser"]."' OR email = '".$_POST["eMail"]."' ";
    $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

User avatar
gigahertz
PHP Newbie
PHP Newbie
Posts: 1
Joined: 26/02/2015 8:41 pm

Re: การตรวจสอบข้อมูลซ้ำด้วย Ajax บน Booststap

Post by gigahertz » 27/02/2015 12:33 pm

ทำไมของหนู มันไม่ขึ้นแจ้งเตือนเลยค่ะ TT

Post Reply

Return to “Booststap Knowledge”

Users browsing this forum: No registered users and 3 guests