Disable Submit Button After Confirm Prompt

Question

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.

Answer 1

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.

Answer 2

As stated in this answer, use $("#btnNotify").prop('disabled', true); to change the disabled property.

Answer 3

I found what I thought to be the answer to my own question, and although the code below works, it isn't the best answer. That was kindly provided by Michael Geary. Please see accepted answer.

<script type="text/javascript">
    $(document).ready(function () {
        $("#btnNotify").click(ConfirmNotify);
        function ConfirmNotify() {
            if (confirm('All available locums will be contacted via text and email. Are you sure you wish to continue?')) {
                $("#btnNotify").attr('disabled', 'disabled');
                $('#myForm').submit();
            } else {
                return false;
            }
        }
    });
</script>

The line $('#myForm').submit(); is what was needed.

Answer 4

Starting with the solution kindly provided by Michael Geary, here is one including custom confirmation message as button attribute:

<button class='once-only' confirm='Please confirm you wish to proceed' type="submit"> GO </button>

$(document).ready(function () {
    $(".once-only").click(ConfirmNotify);
    function ConfirmNotify() {
        if (confirm($(this).attr('confirm'))) {
           this.form.submit();
           this.disabled = true;
           return true;
       } else {
        return false;
    }
}
});