CODEWITHSUNDEEP
javascriptjqueryhtml
TimHorton
TimHorton

Reputation: 885

jQuery set button element active and disabled dynamically

I'm currently working on a client side script using jQuery.

I achieve to set a button element disabled or enabled, when i enter or delete text in 1 input field.

However, I need to check if 2 input fields do have a value, otherwise the buttons should be disabled. Though, the buttons always get enabled if I put text in 1 input field...

Html

<button type="button" id="btnSave">Save</button>
<button type="button" id="btnSubmit">Save</button>

<input type="text" id="BusinessLineIdList" />
<input type="text" id="Label" />

JS

$("#BusinessLineIdList").on("keyup", function () {
     checkBusinessLine();
     checkLabel();
});

$("#Label").on("keyup", function () {
     checkLabel();
     checkBusinessLine();
});

function checkLabel() {
    if ($("#Label").val()) {
        setBtnActive();
    } else {
        setBtnDisabled()
    };
}

function checkBusinessLine() {
    if ($("#BusinessLineId").val()) {
        setBtnActive();
    }
    else {
        setBtnDisabled();
    }
}

function setBtnActive() {
    $("#btnSave").removeAttr("disabled");
    $("#btnSubmit").removeAttr("disabled");
};

function setBtnDisabled() {
    $("#btnSave").attr('disabled', true);
    $("#btnSubmit").attr('disabled', true);
};

Do you have an idea how to solve this issue? Thanks

Upvotes: 0

Views: 1215

Answers (2)

lhavCoder
lhavCoder

Reputation: 961

I would do it this way. We'd have to check for both the textboxes value before enabling/ disabling the button. Heres a working fiddle https://jsfiddle.net/71up0zfm/

The jquery code that i changed :

$("#BusinessLineIdList").on("keyup", function () {
 var x=checkBusinessLine();
 var y=checkLabel();
 if(x&&y)
 setBtnActive();
 else
 setBtnDisabled();
 });

 $("#Label").on("keyup", function () {
 var x=checkLabel();
 var y=checkBusinessLine();
 if(x&&y)
 setBtnActive();
 else
 setBtnDisabled();

 });

 function checkLabel() {
 var state=false;
 if ($("#Label").val()) {
    state=true;
 } 
 return state;
 }

 function checkBusinessLine() {
 var state=false;
 if ($("#BusinessLineIdList").val()) {
    state=true;
 }
 return state;
 }

Upvotes: 1

Matansh
Matansh

Reputation: 782

Every time one has changed, check both of them and act according to the result of that:

$("#BusinessLineIdList").on("keyup", callback);
$("#Label").on("keyup", callback);

function callback() {
     if (isLabelHasValue() && isBusinessLineHasValue()) {
        setBtnActive();
     } else {
        setBtnDisabled();
     }
}

function isLabelHasValue() {
    return $("#Label").val() && $("#Label").val().length > 0;
}

function isBusinessLineHasValue() {
    return $("#BusinessLineId").val() && $("#BusinessLineId").val().length > 0;
}

function setBtnActive() {
    $("#btnSave").removeAttr("disabled");
    $("#btnSubmit").removeAttr("disabled");
};

function setBtnDisabled() {
    $("#btnSave").attr('disabled', true);
    $("#btnSubmit").attr('disabled', true);
};

Upvotes: 0

Related Questions