使用ajax检查文本输入字段的值

问题描述：

I have a website where the log ins are screen names. On the create user form I want to be able to have ajax check if a screen name exists already as it is typed into the form.

This is the HTML form input field

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

A message should be displayed in the <div class="screenNameError"></div>line if the username matches the database.

This is my Jquery code for this.

$(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);
        }
    })

}

});

This is the PHP file that gets called to make the DB query

$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.";
}

For some reason my Jquery is not firing when I type the username in the form :/

Thanks in advance

我有一个网站，其中登录名是屏幕名称。在创建用户表单上，我希望能够通过ajax检查屏幕名称是否已存在，因为它已在表单中键入。 p>

这是HTML表单输入字段 p>

 ＆lt; label for =“screenName”＆gt;屏幕名称：
＆lt; input type =“text”class =“form-control”name =“screenName  “id =”screenName“size =”28“required＆gt; 
＆lt; div class =”screenNameError“＆gt;＆lt; / div＆gt; 
  code>  pre> 
 
 消息应该是 如果用户名与数据库匹配，则显示在＆lt; div class =“screenNameError”＆gt;＆lt; / div＆gt;  code>行中。   p> 
 
 
 这是我的Jquery代码。 strong>  p> 
 
 
  $（document）.ready（function（）  {
 
if（$（'＃screenName'）。length＆gt; 0）{
 
 var screenName = $（“input”）。keyup（function（）{
 var value = $（this）。  val（）; 
返回值; 
}）
 
 $ .ajax（{
 type：'post'，
 url：'screenNameCheck.php'，
 data：'Screen_Name ='+ screenName  ，
 
成功：function（r）{
 $（'。screenNameError'）。html（r）; 
} 
}）
 
} 
  code>  pre> \  n 
 }）;  p> 
 
 
 这是调用以进行数据库查询的PHP文件 strong>  p> 
 
 
  $ screenName = $ _POST ['Screen_Name']; 
 
 $ screenNameSQL =“SELECT Screen_Name FROM Users WHERE Screen_Name ='$ screenName'”; 
 $ result = $ my_dbhandle-＆gt; query（$ screenNameSQL  ）;  //查询数据库
 $ numResults = $ result-＆gt; num_rows;  //计算结果数
 
 $ resultCount = intval（$ numResults）; 
 
if（$ resultCount＆gt; 0）{
 echo“输入的用户名已经存在。请使用其他用户名。”; \  n} 
  code>  pre> 
 
 由于某种原因，当我在表单中键入用户名时，我的Jquery没有触发：/  p> 
 
 
谢谢 提前 p> 
  div>

答

Try changing your jQuery to this -

$(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);
      }
    });
  });
});

However you probably want to minimise the number of ajax requests being made so I would advise putting your ajax request into a setTimeout functon and clearing it with each subsequent keypress. -

$(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);
  });
});

答

Your ajax call should be inside the keyup handler.

答

Add an event on keyup like this :

Edit

$("#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

答

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

You should change it with

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

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

not sure about the syntax...

使用ajax检查文本输入字段的值

相关推荐