วันเสาร์ที่ 6 พฤศจิกายน พ.ศ. 2553

ตรวจสอบว่าชื่อผู้ใช้ว่ามีอยู่ในตารางหรือเปล่าโดยใช้ jquery ajax check username exists

วิธีใช้ให้เปลี่ยนค่าต่างๆ ใน mysql_connect('localhost','root','12345'); และ mysql_select_db('test'); แล้วทดลอง run ใน browser ดูครับ
และถ้าจะให้ดีให้เซฟไฟล์ http://code.jquery.com/jquery-latest.js ไปไว้ในเครื่องเว็บจะโหลดเร็วกว่าครับ

แบบกดปุ่ม


<?php
  //กำหนดชื่อ host/username/password/databasename ก่อน
  mysql_connect('localhost','root','12345') or die(mysql_error());
  mysql_select_db('test') or die(mysql_error());
    
  //create test data
  $r = mysql_query("SHOW TABLES LIKE 'user_test'");  
  if (mysql_num_rows($r) == 0){
    mysql_query(
    'CREATE TABLE `user_test` ('.
      '`id` int(10) unsigned NOT NULL AUTO_INCREMENT,'.
      '`username` varchar(30) NOT NULL,'.
      'PRIMARY KEY (`id`)'.
    ')'
    ) or die(mysql_error());
    echo 'create table successfully.<br>';
    mysql_query(
      "insert  into `user_test`(`id`,`username`) values ".
      "(1,'abc'),".
      "(2,'abc2'),".
      "(3,'abc3'),".
      "(4,'abc4');"
    ) or die(mysql_error());
    echo 'insert data successfully.<br>';
  }
 
  //ajax process
  if (isset($_GET['userExists'])){
    $username = mysql_real_escape_string($_POST['username']);
    $r = mysql_query("SELECT 1 FROM user_test WHERE username='$username'");
    echo mysql_num_rows($r)?'yes':'no';
    exit(0);
  }

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
<title>check user exsits</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script>
//<![CDATA[
$(function(){

  $('#check-user-exists-button').click(function(e){
  var user = $.trim($('#regis input[name=username]').val());
  if (user.length == 0){  
   alert('please enter the username');  
  } else {
   $.ajax({
    url: '?userExists',
    type: 'POST',
    dataType: 'html',
    data: $('#regis').serialize(),
    success: function(data){    
     if (data.indexOf('yes') != -1){
      alert("user '" + user + "' already exists , \nplease choose other name");
     } else {
      alert("you can use name '" + user + "' ");
     }
    }
   });
  }
  e.preventDefault();  
 });
 
});
//]]>
</script>
</head>

<body>

 <div style="background-color:lemonchiffon;border:solid green 2px;margin-top:20px;padding:10px;">
 ทดลองพิมพ์ชื่ออะไรก็ได้แล้วกดปุ่ม cher username<br />
 (จะไม่สามารถใช้ชื่อ abc ได้เพราะมี username นี้ในตารางอยู่ก่อนแล้ว)
 <form id="regis" action="?post" method="post">
  <input type="text" name="username" value="" />
  <input id="check-user-exists-button" type="button" value="check username" />
  <br />
  <input type="submit" value="submit" />
 </form>
 </div>

</body>
</html>



แบบอัตโนมัติเมื่อพิมพ์ชื่อ


<?php
  //กำหนดชื่อ host/username/password/databasename ก่อน
  mysql_connect('localhost','root','12345') or die(mysql_error());
  mysql_select_db('test') or die(mysql_error());

  //create test data
  $r = mysql_query("SHOW TABLES LIKE 'user_test'");
  if (mysql_num_rows($r) == 0){
    mysql_query(
    'CREATE TABLE `user_test` ('.
      '`id` int(10) unsigned NOT NULL AUTO_INCREMENT,'.
      '`username` varchar(30) NOT NULL,'.
      'PRIMARY KEY (`id`)'.
    ')'
    ) or die(mysql_error());
    echo 'create table successfully.<br>';
    mysql_query(
      "insert  into `user_test`(`id`,`username`) values ".
      "(1,'abc'),".
      "(2,'abc2'),".
      "(3,'abc3'),".
      "(4,'abc4');"
    ) or die(mysql_error());
    echo 'insert data successfully.<br>';
  }

  //ajax process
  if (isset($_GET['userExists'])){
    $username = mysql_real_escape_string($_POST['username']);
    $r = mysql_query("SELECT 1 FROM user_test WHERE username='$username'");
    echo mysql_num_rows($r)?'yes':'no';
    exit(0);
  }

?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=tis-620" />
<title>check user exsits</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function(){

  $('#username-input').keyup(function(e){
  var user = $.trim($(this).val());
  if (user.length > 0){
   $.ajax({
    url: '?userExists',
    type: 'POST',
    dataType: 'html',
    data: $(this).serialize(),
    success: function(data){
     if (data.indexOf('yes') != -1){
                                            $('#username-status').html('not ok');
     } else {
                                            $('#username-status').html('ok');
     }
    }
   });
  }
  e.preventDefault();
 });

});
//]]>
</script>
</head>

<body>

 <div style="background-color:lemonchiffon;border:solid green 2px;margin-top:20px;padding:10px;">
 ทดลองพิมพ์ชื่ออะไรก็ได้ แต่จะไม่สามารถใช้ชื่อ abc ได้เพราะมี username นี้ในตารางอยู่ก่อนแล้ว
 <form id="regis" action="?post" method="post">
  <input type="text" id="username-input" name="username" value="" />
                <span id="username-status"></span>
  <br />
  <input type="submit" value="submit" />
 </form>
 </div>

</body>
</html>
เขียนโดย หนุ่ม ที่ 03:09

1 ความคิดเห็น:

สมัครสมาชิก: ส่งความคิดเห็น (Atom)