Question

I have a popup with 1 dropdown list (mandatory), 1 datepicker (mandatory) & 1 textbox (optional). I am checking in 1st two that if they both contain any data and then I am enabling the ‘Save’ button.

However, if the user already has some dropdown item in it and date picked then also, the ‘Save’ button is enabled. I dont want this. So the logic here is:

1. Check the dropdown list and datepicker
2. If they both contain item in it & item has been changed then enable
   the ‘Save’ button.
3. Else, disable the button.

Here is my code:

 function EnableSaveButton() {
    var tempDDL = jQuery("#testPopup SELECT");
    var tempText = jQuery("#testPopup INPUT:text");
    var buttons = jQuery("#testPopup INPUT:button");

    jQuery.each(buttons, function (i, buttonCtl) {
        if (buttonCtl.value.toLowerCase() == "save") {
            if ((tempDDL.find('OPTION:selected').val() !== "-1") && (tempText.val() != ""))
                buttonCtl.disabled = false;
            else
                buttonCtl.disabled = true;
        }
    });
}

Answer 1

Keep track of the dropdown selection on page load and after saves.

var ddlSelection = $('#testPopup select option:selected').val();

When the dropdown changes, check that the current selection is different.

if(tempDDL.find('OPTION:selected').val() !== ddlSelection)

If it is different enable the save button. On a save, update the dropdown selection variable.

ddlSelection = tempDDL.find('OPTION:selected').val()