CODEWITHSUNDEEP
jquery
eozzy
eozzy

Reputation: 68650

check if textfield is empty

I have this "show password" checkbox that toggles password visibility, it works fine but I just want to disable the checkbox when the password field is empty and enable only when sometime is entered.

http://jsfiddle.net/aaK9E/2/

var showPass=false;
$('#c').change(function(){
    showPass = ($('#c:checked').length>0);
    if (showPass){
        $('#p').hide();
        $('#t').show();
    }else{
        $('#t').hide();
        $('#p').show();
    }
});

$('#p').change(function(){
    if (!showPass) $('#t').val($('#p').val());
});
$('#t').change(function(){
    if (showPass) $('#p').val($('#t').val());
});

I tried keyup and change but it won't help if the user wrote sometime and then deleted it, the checkbox would remain enabled.

Upvotes: 0

Views: 201

Answers (4)

Aditya Singh
Aditya Singh

Reputation: 9612

try this one :-http://jsfiddle.net/aaK9E/52/ This will also work for the first time when the password field is empty.

<input type="text" size="50" id="t" />
<input type="password" size="50" id="p" /><br />
<input type="checkbox" id="c" disabled="true">Show Password



var showPass=false;
$('#c').change(function(){
    showPass = ($('#c:checked').length>=0);
    if (showPass){
        $('#p').hide();
        $('#t').show();
    }else{
        $('#t').hide();
        $('#p').show();
    }
});

$('#p').bind("change keyup keypress keydown",function(){
    if (!showPass) $('#t').val($('#p').val());
  if($(this).val()=='')
    $('#c').attr("disabled","true");
  else
    $('#c').removeAttr("disabled");
});
$('#t').bind("change keyup keypress keydown",function(){
    if (showPass) $('#p').val($('#t').val());
    if($(this).val()=='')
    $('#c').attr("disabled","true");
  else
    $('#c').removeAttr("disabled");
});

Upvotes: 0

Jai
Jai

Reputation: 74738

Try this one: http://jsfiddle.net/aaK9E/51/

var showPass = false;
$('#c').attr('disabled', 'disabled'); // disabled on doc ready
$('#c').change(function () {
   showPass = ($('#c:checked').length > 0);
   if (showPass) {
       $('#p').hide();
       $('#t').show();
   } else {
       $('#t').hide();
       $('#p').show();
   }
});

$('#p').keypress(function () { // use keypress instead of change
   $('#c').removeAttr('disabled'); // remove the attr 'disabled'
   if (!showPass) $('#t').val($('#p').val());
});
$('#t').change(function () {
  if (showPass) $('#p').val($('#t').val());
});

you can change to this if backspace is done and password field doesn't have any value:

$('#p').keyup(function () { 
  $('#c').removeAttr('disabled');
  if (!showPass) {
    $('#t').val($('#p').val());
  }
  if ($(this).val() == '') { // this will check the val if there is not
    $('#c').attr('disabled', 'disabled'); it will disable it again.
  }
});

and if lates jquery is used:

$('#p').on('keyup', function () { // this '.on()' requires latest jquery
  $('#c').removeAttr('disabled');
  if (!showPass) {
    $('#t').val($('#p').val());
  }
  if ($(this).val() == '') { // this will check the val if there is not
    $('#c').attr('disabled', 'disabled'); it will disable it again.
  }
});

and if reqired try to use latest jquery

Upvotes: 2

Wolf
Wolf

Reputation: 2150

Use the following code. JSFiddle demo

It will disable irrespective of the state (ie typing in textbox or password box)

$('#p, #t').keyup(function(){
  if ($(this).val() != "") {
    Enable();
  }
  else
  {
    Disable();
  }
});

function Enable() {
 $("#c").removeAttr("disabled");
}

function Disable() {
  $("#c").attr("disabled", true);
}

Upvotes: 1

chrisbradbury
chrisbradbury

Reputation: 327

You can use keydown to check if the box is empty or not:

$('#p').keydown(function(){
  if( $(this).val() == "" ){
      $('#c').attr("disabled", true);
  }else{
      $('#c').removeAttr("disabled");
  }
});

On a key down, it checks if the text box is empty, if it is, it disables the checkbox. Then you just have to do the if(){ check on page load for the initial state.

Upvotes: 0

Related Questions