JQuery Change() function IE problem

Question

Hi,

I've got an asp.net formview control and I want the Update/Cancel buttons to be disabled until the user makes a change and I've tried using jquery to do this. The following code works in FireFox, and works in IE when the form is opened in insert mode. However, if the form is opened in edit mode (in IE), therefore getting populated when the page opens, the buttons get disabled for a split second but are then reenabled.

This is what im currently using.

// Handle the document.ready event:
    $(document).ready(function() {

        // Disable the save button
        $("input.button")
            .attr("disabled", "disabled")
            .removeClass("button")
            .addClass("button-disabled");

        // Hook up event handler to enable save button when a change is made
        $("input").change(function() {
            $("input.button-disabled")
                .removeAttr("disabled")
                .removeClass("button-disabled")
                .addClass("button");
        });
        // Hook up the cancel confirmation dialog
        $(".cancelEdit").click(function() {
            showCancelConfirmation($(this));
            return false;
        });
    })

I changed the enable event handler code to

$("input").bind("keypress", function() {
            $("input.button-disabled")
                .removeAttr("disabled")
                .removeClass("button-disabled")
                .addClass("button");
        });

which solved the problem momentarily, as the buttons are disabled until the user inputs some text. The problem I have with this method though is that the buttons are not enabled if the user deletes some text (IE only again), and I am also using the AJAX Toolkit calendar and the buttons are not enabled when a date is changed using it.

I know I can use the 'click' keyword in the function to enable the buttons as soon as a field is clicked, but this doesnt help with the ajax calendar input problem.

Any ideas on how I can solve this problem?

Thanks in advance

Answer 1

Ok, I sorted this one by attaching the cssclass for the input boxes to the input string, and by using the keydown and change arguments - keydown activates the buttons if delete is pressed and change activates the buttons if a change is made - including if a change is made via the ajax toolkit calendar.

$("input.input-box-webform").bind("keydown change", function() {
            $("input.button-disabled")
                .removeAttr("disabled")
                .removeClass("button-disabled")
                .addClass("button");
        });