Don’t disable the submit button, if the form is not valid.
On the other hand side, you can leave out the JavaScript completely, if after the form processing (on the server) you make a redirect to the following page.
The double-submission should not be a problem if the validation is failing, it wouldn’t be able to submit I presume!
So double-submission is only a problem for when the form submits properly?
I get the feeling this entire flow is just not happening in the right way.
Typically when a form submits, it will refresh to the submission page with the POST, which then refreshes back to the first page (or somewhere). In other words, the page refreshes immediately when submitted.
If you aren’t doing it this way, and are using ajax or something, then that should have a success/fail flow within it. You should be able to check whether the ajax worked or not and process from there.
I don’t see either type here. You are focusing on the submit button itself rather than on the actual form processing logic.
Double submission should not even be a problem. On the very first submit it should fail validation or be submitted. And if it fails, it naturally won’t be submitted (thus no double submission possible), or it will be a success. And when a form is successfully submitted, it would either refresh the page (creating a new blank form) or you would have access to the ajax processing logic in order to reset the form on successful submission.
If users are allowed to just keep pressing Submit and successfully recording the exact same form over and over, then something isn’t programmed right and it doesn’t have to do with disabling the Submit button!
If all you want to do is prevent super fast double-clicking of the Submit button, then I would just do the timeout technique. Immediately disable the button on first click, but set a timeout of a second or two and enable it again.
If the form submission is entirely AJAX-driven, you could disable the button on submit, and just enable it again when an error occurs:
var form = $('#theform')
var submit = $('[type=submit]', form)
form.submit(function (event) {
event.preventDefault()
submit.prop('disabled', true)
$.ajax({
method: 'POST',
url: form.prop('action'),
data: form.serialize(),
success: function () {
// Do something like showing
// a success message
},
error: function () {
// Show an error message and set
submit.prop('disabled', false)
}
})
})
Of course, the same would work for client side validation as well… just instead of sending the data to the server directly, you’d process it with a validator first.
@zack1 i have simple form bit PHP and it does redirect and die(0) but on save without any protection user send outs double message on for multiple clicks
This is your original code. Create a little function that does the timeout. Call this function before return true;. When the function runs, check for the “class error” that you mentioned because this will let you know if it was validation. So now the code might look like this:
<script>
$(function() {
$('#theform').submit(function(){
$("input[type='submit']", this)
.val("Please Wait...")
.attr('disabled', 'disabled');
enableTimer();
return true;
});
});
function enableTimer() {
windows.setTimeout(function() {
if($('#someelement.errorclass').length > 0)) {
// Error class detected, turn button back on so they can try again
} else {
// check here for a success condition and do something if needed
}
// It's possible the form submission hasn't finished yet in 1.5 seconds so other tests may be necessary
}, 1500);
}
</script>
This is untested code, it’s just for giving an idea of what I was thinking you could do. Essentially, set the timeout, but then test for an error condition or success condition before changing the submit button again.
Be mindful where you create and how you call the timeout function to make sure it’s in scope with your other functions.
If you have access to the ajax function that is submitting the form, you should run some of this processing from the success and fail, always events within that call.