Disabling forms with javascript on submit to prevent double submit
-
26-09-2019 - |
Question
I'd like to disable a form after it is submitted in order to prevent double submissions. Pretty standard use case I would think, but all of the examples I can find out there are flawed.
Everything I can find is based on disabling the submit button, but this doesn't prevent the form from being re-submitted if the user hits the enter key on the form, which is a pretty common approach.
I'm thinking about modifying one of the existing scripts out there to account for this, but before I reinvent the wheel, does anyone know of a script that already handles this properly that they're able to share? I'm really surprised there doesn't seem to be anything out there yet.
Solution
You could create a boolean variable (or an object with a boolean member variable) and only submit the form when the variable is false. Something like:
function init() {
var submit = false;
var f = document.getElementById("FormID");
f.onsubmit = function() {
if(submit) {
return false;
} else {
submit = true;
return true;
}
}
}
Of course, you would have to call init
following the page load, in whichever flavor you choose to do that (window.onload = ...
, window.addEventListener(...)
, window.attachEvent(...)
, etc.).
OTHER TIPS
var sent = false;
$('#form').submit(function(e) {
if (!sent) {
sent = true;
// do whatever
}
else e.preventDefault();
});
i've tried a lot of solutions but none of them worked for me. I used this one and it is working really fine:
jQuery
<script>
$(document).ready(function(){
$('#buttonSubmit').click(function() {
if ($('#frm-confirm').attr('submitted')){
event.preventDefault();
} else {
$('#frm-confirm').attr('submitted',true);
}
});
});
</script>
HTML/PHP
<form id="frm-confirm" action="" method="post">
<input id="amount" name="amount" value="<?php echo round($_POST['amount'],2); ?>" type="hidden" />
<input id="order_id" name="order_id" value="<?php echo htmlspecialchars($_POST['order_id']);?>" type="hidden" />
<input type="submit" id="buttonSubmit" name="confirm" value="Confirm" />
</form>