Disable the submit button after clicking and enable it back again after a few seconds
You can do what you wanted like this:
var fewSeconds = 5;
$('#btn').click(function(){
// Ajax request
var btn = $(this);
btn.prop('disabled', true);
setTimeout(function(){
btn.prop('disabled', false);
}, fewSeconds*1000);
});
or you can use jQuery's .complete()
method which is being executed after the ajax receives a response:
$('#btn').click(function(){
var btn = $(this);
$.post(/*...*/).complete(function(){
btn.prop('disabled', false);
});
btn.prop('disabled', true);
});
edit: this is an example with 3 seconds server-side response delay
Edit
Since even the answer is 8 years old, but still getting attention and jQuery is getting less popular I think it's worth adding example without jQuery
const fewSeconds = 3
document.querySelector('#btn').addEventListener('click', (e) => {
e.target.disabled = true
setTimeout(() => {
e.target.disabled = false
}, fewSeconds * 1000)
})
<input type='button' id="btn" value="click me" />
Just place this in your JS for the page the submit button is on
<script type="text/javascript">
$(document).ready(function(){
$("input[type='submit']").attr("disabled", false);
$("form").submit(function(){
$("input[type='submit']").attr("disabled", true).val("Please wait...");
return true;
})
})
</script>
Code source