Check validation and disable button on click

Question

I have an ASP.NET application and I have implemented the below code to disable users from double clicking and a submit button and thus the method behind the code is not executed than once.

OnClientClick="this.disabled = true; this.value = 'Submitting...';" UseSubmitBehavior="false" onclick="BtnSubmit_Click"

This was working perfectly, but on one of the pages I had implemented javascript forms validations and the below code is not working:

OnClientClick="return validation(); this.disabled = true;"  UseSubmitBehavior="false"  onclick="BtnAdd_Click"

The validation is to make sure user does not leave any empty fields, however on clicking the button if validation is success, the button is disabled but the onclick method is not being called.

Why exactly is this happening?

Answer 1

Rikket, you'll have to write separate code to prevent double submission of forms, once its submitted, a Jquery function will help probably, something like below, put this after your JavaScript validation function:

jQuery.fn.preventDoubleSubmission = function () {
            var $form = $(this);
            $form.on('submit', function (e) {
                if ($form.data('submitted') === true) {
                    e.preventDefault();
                } else {
                    $form.data('submitted', true);
                }
            }).find('input').on('change', function () {
                $form.data('submitted', false);
            });
            return this;
        };

And can be called after your validation inside the else :

 if (nullFieldTracked == 'true') {
                    alert(nullExceptionMsg);
                    return false;
                }
                else {
                    $('form').preventDoubleSubmission();
                }