html form button to stop multiple submissions
I have this form that submits to work.php
.
What I want to do is disable the submit button when the form is submitted, then re-enable it after 5 seconds or so, so I don't get multiple posts.
How can I do this?
Also, if I press the enter key in one of the text boxes while the submit button is not clickable then it will redirect me to work.php
which don't want to happen.
<form method="post" action="work.php">
<strong>Message:</strong>
<input type="text" id="message" name="message" class="messa开发者_JS百科ge" />
<input type="submit" id="submit" onClick="this.value='Processing form';this.disabled=true;if(Submitting()){this.form.submit()}else{this.value='Submit';this.disabled=false;}" value="Submit" />
</form>
<form id="your-form">
<input type="submit" id="submit" onclick="doSubmit(this);" value="Submit" />
</form>
<script>
function doSubmit(el) {
var frm = document.getElementById('#your-form');
el.value = 'Processing...';
el.disabled = true;
frm.submit();
setTimeout(function(el) {
el.value = 'Submit';
el.disabled = false;
}, 5000);
}
</script>
This is one way to do it. There are several others.
You don't need to worry about this. If the user spams the form submit in any way (clicking submit or hitting enter), only one complete request is sent to the server - every time the submit is triggered, it resets the POST and starts again.
Do note that using JavaScript to stop this behaviour is pretty bad, considering it's incredibly easy to disable JS and spam away, which is one of the reasons why browsers only allow one POST submission at a time.
If you're using AJAX (which you haven't specified), then you should use @drrcknlsn's answer.
If your using Ajax you use the "Ajax Manager Plugin." It will prevent double requests.
That way you don't have to worry about a person hitting enter or the submit button multiple times. Only one request will go through until it is finished(but by then I would assume a success message and clearing of the form would happen)
精彩评论