I am making a webapplication that uses a jquery submit to request some data, but i don't want people submit the form multiple times after they submit the first time. So i want after a submit, that the next submit does nothing for a few seconds.
$("#updatestock_form").submit(function(e){
// requesting my data..
});
How can i achieve this?
To prevent form from submitting multiple times from client side with JavaScript, we can disable the button when the form is being submitted. to add a form element. const checkForm = (e) => { e. preventDefault(); e.
The code: jQuery. validator. setDefaults({ submitHandler: function(form){ // Prevent double submit if($(form).
onsubmit = function () { if (allowSubmit) allowSubmit = false; else return false; } })(); (well, as sure-fire as you can get with JS enabled anyway). You could disabled the button as a visual confirmation to the end user that the form can only be submit once too. Very correct.
To overcome this problem, we are avoiding double submits using jQuery. Let us see this with an example. In this example, we have an HTML form and it is posted via AJAX. On processing the form submit action in server side, the submit button will be hidden to prevent multiple duplicates submits.
So we must have to prevent multiple form submits like prevent double click on submit button. so how we can prevent this. we can do it using jquery. when you click on submit button than it should be disabled so it's click again. I written example for that, you can use bellow php file. you can see bellow full code.
On processing the form submit action in server side, the submit button will be hidden to prevent multiple duplicates submits. This is the HTML form to be submitted via jQuery AJAX. On clicking the submit button, this jQuery script sends form data to PHP page via AJAX.
While the execution of the forms, the submit button is needed to navigate the pages based on the conditions. The above codes are the basic syntax for html form with jQuery selectors to stop the event-like form submission to the backend. With the help of the event.preventDefault () method the event is to be stopped the form execution.
"So i want after a submit, that the next submit does nothing for a few seconds."
If you mean that you want the user's second and subsequent submit attempts to be ignored until after a certain number of seconds you can do that in a number of ways. Here's the first that came to mind:
var allowSubmit = true;
$("#updatestock_form").submit(function(e){
if (!allowSubmit) return false;
allowSubmit = false;
setTimeout(function(){ allowSubmit = true; }, 5000);
// your existing submit code here
// requesting my data..
});
That is, have a flag that indicates whether submit is currently allowed. On the submit event if that flag is false just return false
immediately to cancel the submit event. Otherwise (if it is currently true
) set the flag to false
, set a timeout to change the flag back after, say, 5 seconds, and then carry on with your existing submit code.
$("#updatestock_form").submit(function(e){
$(this).unbind("submit")
$("#submitButton").attr("disabled", "disabled")
});
Very simple.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With