weggie weggie - 7 months ago 8
Javascript Question

Disabling Submit button but still getting double submits

I have a form which is using jqueryvalidation and in the submit is being validated. When that happens, it disables the button and changes it to "Submitting.." then submits the form.

The problem is, the button appears to be disabled, but if you continue to click on it, it will submit multiple times resulting in X amount of data going to the database.

This is the code that handles the submitting:

submitHandler: function(form) {
$('#SaveTraining').val('Submitting...');
$('SaveTraining', this).attr('disabled', 'disabled');
form.submit();
// return false;
}


Here is the button:

<input type="submit" id="SaveTraining" name="SaveTraining" class="btn btn-success" <cfif rc.candidateActive EQ 2>disabled</cfif> value="Save Training">


The button has a little bit of CF built in to display or not display if the candidate is active.

Is there another recommended method to make this button to only click once?

Answer

You have a typo in your code and I don't believe , this is needed either:

submitHandler: function(form) {
    $('#SaveTraining').val('Submitting...');
    $('#SaveTraining').attr('disabled', 'disabled');
    form.submit();
   // return false;
}

But as you are working with a form submission there is alternate ways for that submit handler to be called (like hitting enter on the form) that you may want to block as well. You could do that with a global variable such as the below.

submitted = false;
.....
submitHandler: function(form) {
    $('#SaveTraining').val('Submitting...');
    $('#SaveTraining', this).attr('disabled', 'disabled');
    (!submitted) {
        // I will submit only this time...
        submitted = true;
        form.submit();
        return true;
    }
   return false;
}