使用ajax檢查文本輸入字段的值

Question

我有一個網站，登錄名是屏幕名稱。 在創建用戶表單上，我希望能夠通過ajax檢查在鍵入表單時是否已經存在屏幕名稱。

這是HTML表單輸入字段

<label for="screenName">Screen Name:
<input type="text" class="form-control" name="screenName" id="screenName" size="28" required>
<div class="screenNameError"></div>

如果用戶名與數據庫匹配，則在<div class="screenNameError"></div>行中應顯示一條消息。

這是我的Jquery代碼。

$(document).ready(function(){

if ($('#screenName').length > 0){

    var screenName = $("input").keyup(function(){
        var value = $(this).val();
        return value;
    })

    $.ajax({
        type: 'post',
        url:  'screenNameCheck.php',
        data: 'Screen_Name=' + screenName,

        success: function (r) {
            $('.screenNameError').html(r);
        }
    })

}

}）;

這是被調用以進行數據庫查詢的PHP文件

$screenName = $_POST['Screen_Name'];

$screenNameSQL = "SELECT Screen_Name FROM Users WHERE Screen_Name = '$screenName'";
$result = $my_dbhandle->query($screenNameSQL); //Query database
$numResults = $result->num_rows; //Count number of results

$resultCount = intval($numResults);

if($resultCount > 0){
    echo "The username entered already exists. Please a different user name.";
}

出於某種原因，當我以：/形式輸入用戶名時，我的Jquery無法觸發

提前致謝

Answer 1

嘗試將jQuery更改為此-

$(document).ready(function() {
  $('#screenName').keyup(function() {
    var value = $(this).val();
    $.ajax({
      type: 'post',
      url: 'screenNameCheck.php',
      data: 'Screen_Name=' + value,
      success: function(r) {
        $('.screenNameError').html(r);
      }
    });
  });
});

但是，您可能希望最大程度地減少Ajax請求的數量，因此我建議將您的Ajax請求放入setTimeout函數中，並在以后每次按鍵時將其清除。 --

$(document).ready(function() {
  var ajaxRequest;
  $('#screenName').keyup(function() {
    var value = $(this).val();
    clearTimeout(ajaxRequest);
    ajaxRequest = setTimeout(function(sn) {
      $.ajax({
        type: 'post',
        url: 'screenNameCheck.php',
        data: 'Screen_Name=' + value,
        success: function(r) {
          $('.screenNameError').html(r);
        }
      });
    }, 500, value);
  });
});

Answer 2

在keyup上添加一個事件，如下所示：

編輯

$("#screenName").on("keyup",function(){
  var screenName=$(this).val();

if(screenName!='')
{
 $.ajax({
        type: 'post',
        url:  'screenNameCheck.php',
        data: 'Screen_Name=' + screenName,

        success: function (r) {
            $('.screenNameError').html(r);
        }
    })
}
});

JsFiddle

Answer 3

if ($('#screenName').length > 0){

你應該用

if ($('#screenName').val().length > 0){

要么

var name = $('#screenName').val();
if(name.length >0) {...

不確定語法...

Answer 4

您的ajax調用應該在keyup處理程序中。