Disable button not woking

Question

I have a function that displays a textbox, but my button is not disable when im not typing in textbox.

$(document).ready(function () {        
    loadData();    
    function loadData(is_category) {   
        $(document).on('click', '.viewdetails', function () {
            var html = '';
            html += '<input type=text id="ConvoDetails">'<input type="submit" class="sendButton">';    
        },

        $('.sendButton').prop('disabled', true);
        $('#ConvoDetails').keyup(function () {
        $('.sendButton').prop('disabled', this.value == "" ? true : false);
    });            
});

Answer 1

Short fix:

$('.sendButton').prop('disabled', 'disabled');

However, you might want to change your code to bind to change event instead of keyup . keyup is fired way too often for your needs and it might cause lags.

Answer 2

In your input html you can catch the key up element like this <input type=text id="ConvoDetails" onkeyup="onInputKeyUp(this) and then a function that handles the event like this onInputKeyUp(element) {} .

Also, you don't need this line of code $('.sendButton').prop('disabled', true); if you set your input button by default as disable like this <input type="submit" class="sendButton" disable>

The full code example:

$(document).ready(function () {

  loadData();

    function loadData(is_category) {

    $(document).on('click', '.viewdetails', function () {

        var html = '';
        html += '<input type=text id="ConvoDetails" onkeyup="onInputKeyUp(this)"><input type="submit" class="sendButton" disable>';
    });
});

onInputKeyUp(element) {
    element.disabled = element.value == "";
}