0

登録フォームを作成しています。#onimg och #offimg は、img を含む 2 つの div です。使用可能なユーザー名を入力すると #offimg が表示され、既に使用されているユーザー名を選択すると #onimg vill が表示されます。

登録欄に何も書かない場合(文字を削除する場合など)、画像を非表示にしたいです。しかし、彼らは=(.

ここにHTMLがあります

<ul>
    <li>Username:</li>
    <li>Password:</li>
</ul>

<ul>

    <li><input type="text" id="user" name="user" value="" /></li>
    <li><input type="text" id="pass" name="pass" value="" /></li>
    <li><input type="checkbox" name="show" value="password">Show password</li>
</ul>

<div id="onimg"></div>
<div id="offimg"></div>


</fieldset>

<button type="button" id="reg" value="" >Register</button>

いくつかのCSS

#onimg {
  z-index:1000;
  position:absolute;
  left:300px;
  top:23px;
  background-image:url('notavailable.png');
  width:20px;
  height:20px;
}

#offimg {
  z-index:1000;
  position:absolute;
  left:300px;
  top:23px;
  background-image:url('available.png');
  width:20px;
  height:20px;
}

そしてここにjqueryがあります

$('#user').focusout(function(){

  var users = $('#user').val();

  $.getJSON( "available.php" ,      //The URL to perform the lookup
     {name: users }, //The data you send
     function (result){     //The function to fire upon return
         if (!result) {       //result is JSON formatted
             $('#onimg').fadeIn('fast');
         } else  {
             $('#offimg').fadeIn('fast');
         }                                             
  });

});

$(function() {
    $('#user').blur(function() {
        if($(this).val() == '') {
            $("#onimge").hide();
            $("#onimge").hide();
        }
    });
});
4

1 に答える 1