Кнопка включения / выключения - проверка существования имени пользователя - PullRequest
Новая
       1

Кнопка включения / выключения - проверка существования имени пользователя

0 голосов
/ 03 июля 2011

Я пытаюсь проверить существование имени пользователя в БД.

У меня есть одно поле, которое содержит текстовое поле и кнопку отправки. Кнопка отправки отключена.

Как только пользователь вводит правильное имя пользователя и после проверки в БД, кнопка отправки становится активной, а граница текстового поля становится зеленой или же красной.

Просто здесь все в порядке, но когда пользователь передумает и пытается изменить имя пользователя, кнопка отправки все еще включена, несмотря на то, что текстовое поле указывает неправильное имя пользователя или формат.

Как изменить кнопку отправки на отключенную.

Я попробовал в своем коде это document.getElementById('register').disabled = false;

enter image description here

Это полный код. 

<!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=UTF-8" />
<link href="../style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script>
$(document).ready(function()
{
    $('#username').keyup(username_check);
}); 
function username_check()
{   
var username = $('#username').val();
if(username == "" || username.length < 14)
{
    $('#username').css('border', '2px #CCC solid');
    $('#tick').hide();
}
else
{
jQuery.ajax({
   type: "POST",
   url: "check.php",
   data: 'username='+ username,
   cache: false,
   success: function(response){
    if(response == 1){
        $('#username').css('border', '2px #C33 solid'); 
        $('#tick').hide();
        $('#cross').fadeIn();
        document.getElementById('register').disabled = true;
    }
    else
    {
        $('#username').css('border', '2px #090 solid');
        $('#cross').hide();
        $('#tick').fadeIn();
        document.getElementById('register').disabled = false;
     }

}
});
}
}
</script>
<style>
#username
{
    padding:3px;
    font-size:18px;
    border:3px #CCC solid;
}
#tick{display:none}
#cross{display:none}
</style>
</head>

<body>
<form action="" method="get" style="width:500px">
<table width="500" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td width="152">&nbsp;</td>
    <td width="348">&nbsp;</td>
  </tr>
  <tr>
    <td>Username</td>
    <td><input name="username" id="username" type="text" />
          <img id="tick" src="tick.png" width="16" height="16"/>
          <img id="cross" src="cross.png" width="16" height="16"/>
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td><input type="submit" name="register" id="register" value="Submit" disabled="disabled" /></td>
  </tr>
</table>
</form> 
</body>
</html>

Ответы [ 3 ]

1 голос
/ 03 июля 2011

$ ("# register"). Attr ("отключено", "отключено") в случае успеха и $ ("# register"). RemoveAttr ("отключено") при ошибке ...

надеюсь, это поможет

0 голосов
/ 14 января 2015 
document.getElementById('register').disabled = true;

это будет работать

0 голосов
/ 03 июля 2011

Удалить document.getElementById('register').disabled = true; из функции успеха вызова jQuery.ajax.

И измените событие keyup следующим образом: 

$('#username').keyup(function()
{
document.getElementById('register').disabled = true;
username_check();
});
...