JQuery hide/show from textbox

Question

I'm trying to get a password field to be shown/hidden depending on value that of a different input element.

For example if the username is "admin" it should hide the password field.

If you they type in anything else then the password field appears or remains.

function togglePassword() {
  if ($("#j_username").val() == "admin")
    $("#j_password").hide();
}

<label>User Name</label>
<input type='text' id="j_username" name='j_username' style='text-align: Left;' MaxLength='100' size='20' tabindex='1' onkeypress='javascript:return loginIdKeyPress(event);' />

<label>Password</label>
<input type='password' id="j_password" name='j_password' value='' Align='Left' size='20' tabindex='2' onkeypress='javascript:return passwordKeyPress(event);' />
<br/>

Currently this code doesn't work for me, what should I change?

Answer 1

Add jQuery library and do like below:-

$(document).ready(function(){
  $('#j_username').on('input',function(){
    if($(this).val() =='admin'){
      $('#j_password').hide();
    }else{
      $('#j_password').show();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>User Name</label>
     <input type='text' id="j_username" name='j_username' style='text-align: Left;' MaxLength='100' size='20' tabindex='1'/>
       <br/>    
<label>Password</label>
<input type='password' id="j_password" name='j_password' value='' Align='Left' size='20' tabindex='2'/>
<br/>

Note:- You use $ syntax which is jQuery syntax actually.