Question

我有一个带有文本字段的表单来插入用户名。我使用JavaScript来检测用户何时输入名称，然后与PHP文件结合使用，以检查数据库上是否已存在用户名。页面按预期工作，每次用户输入名称时，如果名称可用，则JavaScript显示在某个位置。

我现在的问题是JavaScript只能在浏览器重新加载页面后才能运行。第一次加载页面时，用户输入名称时没有任何反应。重新加载页面后，它可以正常工作。

欢迎任何帮助。这是我的代码：

<!DOCTYPE html> 
<html>
<head>
<meta charset="UTF-8">
<title>RestAppXXI</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="assets/ico/favicon.ico">
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
//function to check username availability   
function check_availability(){

        //get the username
        var username = $('#username').val();

        //use ajax to run the check
        $.post("check_username.php", { username: username },
            function(result){
                console.log(result);
                //if the result is 1
                if(result == 1){

                    //show that the username is available
                    $('#username_availability_result').html(username + ' está disponible');
                }else{

                    //show that the username is NOT available
                    $('#username_availability_result').html(username + ' NO está disponible');
                }
        });

}  
</script>

<script type="text/javascript" src="js/jquery.js"></script>
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
</head> 
<body>
<div data-role="page" id="page" data-theme="a">
    <div data-role="header">


        <h1>Nuevo Personal</h1>
    </div>
  <div data-role="content">
      <div align="center">
        <p><a href="plogin-sp.html" data-ajax="false"></a><img src="logorestappxxi.jpg" width="75" height="75"></p>



        <p>Bienvenid@ <?php echo 
        $_SESSION[myusername]." / ".$_SESSION[Region]?></p>

      </div>
      <section id="c5">
    <div class="page-header">
            <h1 align="center">Nuevo Personal<?php echo "<span class='label label-important'> $count</span>"; ?></h1>
      </div>
     <div align="center">

        <?php
if ( empty( $_POST ) ){
?>
    </div>
    <form name='registration' data-ajax="false" action='nuevomesero.php' method='POST' />

      <div align="center">Alias: </div>

    <div align="center">
      <p>
        <input type="text" name="aliasq"  id='username'  onkeyup="check_availability()"/><div id='username_availability_result'></div>
      </p>
      <p>&nbsp; </p>
      <div align="center">
        <div align="center">Nombre completo: </div>

    <input type="text" name="nombreq" />
  </div>

    <div align="center">
    <div align="center">Restaurante: </div>
    <td><p>
      <select name="restaurante">
        <?php 
do {  
?>
        <option value="<?php echo $row_Recordset1['id_restaurante']?>" ><?php echo $row_Recordset1['nombre_restaurante']?></option>
        <?php
} while ($row_Recordset1 = mysql_fetch_assoc($Recordset1));
?>
      </select>
    </p></td>
    <div align="center">Contraseña: </div>

    <input type="text" name="passq" />
    <button type="submit"  >Añadir el nuevo personal y regresar</button>
      </form>
  <?php
} else {
}


?>
    </div>
  </div>
      </section>
    </div>

</div>



</body>
</html>

Answer 1

发生这种情况是因为您没有将任何事件附加到该函数。是否要在表单提交之前调用该函数或在输入名称

之后立即调用该函数

<script type="text/javascript">
 $(document).ready(function(){
//function to check username availability   
function check_availability(){

  $('#username').keyup(function(){
        //get the username
        var username = $('#username').val();

        //use ajax to run the check
        $.post("check_username.php", { username: username },
            function(result){
                console.log(result);
                //if the result is 1
                if(result == 1){

                    //show that the username is available
                    $('#username_availability_result').html(username + ' está disponible');
                }else{

                    //show that the username is NOT available
                    $('#username_availability_result').html(username + ' NO está disponible');
                }
        });
  });
});

}  
</script>

JavaScript只在重新加载页面后执行

1 个答案: