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

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

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

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

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

โพสต์โดย M004 » 17/08/2013 2:33 am

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

ตัวอย่าง
ข้อมูลใน database

2.png
2.png (6.4 KiB) เปิดดู 1471 ครั้ง

เมื่อกรอกข้อมูลซ้ำกับ ข้อมูลในdata base จะแจ้งเตือนข้อความดังนี้
1.png
1.png (14.07 KiB) เปิดดู 1471 ครั้ง


เริ่มต้นแทรก Script bootstrap.js / jquery.min.js ลงใน html

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

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

<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

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

<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

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

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

ภาพประจำตัวสมาชิก
gigahertz
PHP Newbie
PHP Newbie
โพสต์: 1
ลงทะเบียนเมื่อ: 26/02/2015 8:41 pm

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

โพสต์โดย gigahertz » 27/02/2015 12:33 pm

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


  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

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

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

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