Search code examples
jqueryform-submitdisabled-input

Disable Submit Button After Confirm Prompt

I've a button within my ASP.Net MVC 5 Razor View

@using (Html.BeginForm("MyAction", "MyController", FormMethod.Post, new { id = "myForm" }))
{
    <button type="submit" class="btn btn_d fl sepV_a" id="btnNotify" name="btnNotify"><span>Notify</span></button>   
}

When it is clicked I call a JQuery function which asks the user whether or not they still wish to continue with the Submit

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnNotify").click(ConfirmNotify);
        function ConfirmNotify() {
            if (confirm('Are you sure you wish to continue?')) {
                $("#btnNotify").attr('disabled', 'disabled');
                return true;
            } else {
                return false;
            }
        }
    });
</script>

If the user clicks OK to confirm with the Submit, I then want to disable the Notify button.

Unfortunately the code above disabled the Notify button when the user clicks OK to the prompt, however, the Submit form does not then occur.

If I swap the lines $("#btnNotify").attr('disabled', 'disabled'); and return true; about to this

function ConfirmNotify() {
    if (confirm('Are you sure you wish to continue?')) {
        return true;
        $("#btnNotify").attr('disabled', 'disabled');
    } else {
        return false;
    }
}

The Form gets Submitted when the user clicks OK, but the button Notify doesn't get disabled, i.e., the user can then click the Notify button multiple times.

Does anyone know how to correct this? Any advice greatly appreciated.

Thanks.

Solution

  • If you want to take an action when a form is submitted - even a single-button form like this one - you should handle the submit event for the form itself, not the click event on the pushbutton. This way your action will be taken when the spacebar or Enter key is used to submit the form. Handling the click event will miss these keyboard interactions.

    This is also the cause of the form not submitting. As you know, clicking on a disabled submit button will not submit a form. But you're disabling the button during the click event, which fires before the submit event. So when the browser gets ready to submit the form as a result of the click, it sees that the submit button is disabled and decides not to submit the form.

    A minor point, I'd suggest using event.preventDefault() instead of return false to prevent form submission. Either one will work, but .preventDefault() makes your intent more clear, and it also allows any other event handlers to run. return false is equivalent to calling both .preventDefault() and .stopPropagation().

    As long as we're at it, let's have some fun and make this code into a jQuery plugin:

    jQuery.fn.confirmSubmit = function( message ) {
    $(this).submit( function( event ) {
        if( confirm(message) ) {
            $(this).find('button[type="submit"]').prop( 'disabled', true );
        } else {
            event.preventDefault();
        }
    });
};

    Now you can use this on any form, so your example code would be:

    $('#myForm').confirmSubmit( 'Are you sure you wish to continue?' );

    If you're using a very old version of jQuery, you'll need to stick with .attr('disabled','disabled') as in your example, but with any newer version it's best to use .prop('disabled',true).

    Two other notes:

    Ordinary JavaScript function names should begin with a lowercase letter, not uppercase. Only constructor functions should begin with a capital letter.

    And be aware that confirm() is not a jQuery function. It is a JavaScript function provided by the browser.