How To Unable Button If Textbox Suddenly Have Values

Can anyone help me how to make my button disable if my texbox suddenly filled with text without clicking the textbox to input something. My problem is my code wont work. Does anyon

Solution 1:

You can use combination of input, blur and keyup events to be safe:

$('.number').on('keyup blur input', function () {
    $('#send').prop("disabled", !$.trim(this.value));
});

Demo: http://jsfiddle.net/pb9vw/

Solution 2:

$('.number').keyup(function () {
    if ($.trim(this.value) == "") {
      $('#send').addAttr('disabled');
    }
  else {
        $('#send').removeAttr('disabled');
  }
});

Solution 3:

Use keyup instead of blur and prop() instead of attr() The blur is triggered when input gets or loose focus. The prop should be use for boolean attributes like checked disabled etc.

Live Demo

$('.number').keyup(function () {
    if ($.trim(this.value) == "") {
      $('#send').prop("disabled", true);
    }
  else {
        $('#send').prop("disabled", false);
  }
});

As of jQuery 1.6, the .attr() method returns undefined for attributes that have not been set. To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method, reference.

Solution 4:

If you want to make sure the button is only enable when the two textbox are filled, then you can do:

functiondoCheck() {
    var allFilled = true;
    $('input[type=text]').each(function () {
        if ($(this).val() == '') {
            allFilled = false;
            returnfalse;
        }
    });
    $('input[type=submit]').prop('disabled', !allFilled);
}

$(document).ready(function () {
    $('input[type=text]').keyup(doCheck);
});

Fiddle Demo