2016-04-13 32 views
1

ユーザー名またはパスワードがnullの場合、ログインボタンを無効にする必要があります。jqueryでブラウザのユーザー名とパスワードを保存する方法

以下のコードを見つけてください:

$(document).ready(function(){ 

    $('input').on('keyup blur mouseenter', function(e) { 


     if($("#userName").val().length!==0 && $.trim($('#userName').val()) !== '' && $("#password").val().length!==0 && $.trim($('#password').val())!== ''){ 

      $('#submitLogin').attr('disabled',false); 
     } 
    }); 
}); 

をJSPページ内の下の入力を提出見つけてください:

<input class="button" name="submit" type="submit" id ="submitLogin"value="Login" disabled="true" ></div> 

は、私は上記のようにjQueryでそれを行うために管理が、私の問題は、保存されたユーザ名でありますおよびパスワードを入力します。

これは、ユーザーが最初にログインしたアプリケーションブラウザがユーザー名とパスワードを保存するようにユーザーに要求し、ユーザーが「はい」をクリックしたときです。

ユーザー名とパスワードが保存されると、次にユーザーがログインページを開くときに、ユーザー名とパスワードは既に入力されていますがログインボタンはまだ無効です。

入力ユーザー名とパスワードがすでに入力されていても、jqueryメソッドを呼び出すときに両方の入力テキストの値がnullであるため、無効になります。

ユーザーが再度クリックすると、ユーザー名とパスワードが初期化され、submitLoginが有効になります。

ログイン入力を有効にするためにページが初めて読み込まれたときに、保存されたユーザー名とパスワードの値をどのように取得できますか?

ご協力いただきありがとうございます。

+0

のように入力input class="button" name="submit" type="submit" id="submitLogin" value="Login">を使用し、その呼び出し'document.ready()'で?これは、今のように値が変更されたときと、ページ読み込みの開始時に1回、関数を実行することを意味します。 – Glubus

答えて

0

$.removeAttr()$.change()を試してみて、あなたは無名関数という名前の関数を作るとどうなりますか、この

$(document).ready(function() { 
 

 
    if ($("#userName").val().length !== 0 && $.trim($('#userName').val()) !== '' && $("#password").val().length !== 0 && $.trim($('#password').val()) !== '') { 
 

 
    $('#submitLogin').removeAttr('disabled'); 
 
    } else { 
 
    $('#submitLogin').attr('disabled', ""); 
 
    } 
 

 
    $('input').on('change keyup blur mouseenter ', function(e) { 
 

 

 
    if ($("#userName").val().length !== 0 && $.trim($('#userName').val()) !== '' && $("#password").val().length !== 0 && $.trim($('#password').val()) !== '') { 
 

 
     $('#submitLogin').removeAttr('disabled'); 
 
    } else { 
 
     $('#submitLogin').attr('disabled', ""); 
 
    } 
 

 
    }); 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 

 
<input type='text' id='userName' /> 
 
<input type="password" id="password"/> 
 
<input class="button" name="submit" type="submit" id="submitLogin" value="Login">

+0

こんにちは私は$ .removeAttr()を追加しましたが、ロード時には動作していますが、ユーザー名とパスワードが入力されてもログインページにリダイレクトするユーザーログインとログアウトをクリックすると、 – user1999453

+0

うまく動作し、次回はhmtlでディセーブルを定義しませんが、代わりにjqueryが処理するようにします – user1999453

0

$(document).ready(function(){ 
 

 
     $('input').on('keyup blur mouseenter', function(e) { 
 

 
      if($.trim($('#userName').val()) && $.trim($('#password').val())){ 
 

 
       $('#submitLogin').prop('disabled',false); 
 
      } 
 
     }); 
 
    });
<!DOCTYPE html> 
 
<html lang="en"> 
 
<head> 
 
    <meta charset="UTF-8"> 
 
    <title></title> 
 
    <script src="//cdn.bootcss.com/jquery/2.2.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
<input id="userName"> 
 
<input id="password"> 
 
<input class="button" name="submit" type="submit" id ="submitLogin"value="Login" disabled="disabled" ></div> 
 
</body> 
 
</html>

+0

attrとpropはどちらもokですが、無効にするためにpropを設定することをお勧めします。 – Roger

+0

ようこそ。質問にお返事いただきありがとうございます。良い答えには、OPが何をすべきかに関する説明が含まれていることに留意してください。これは、OPと将来のメンバーが模擬的な問題についての答えを探しているのに役立ちます –

関連する問題