Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery form submit, prevent from sending multiple times after first submit

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?

like image 563
Edwin Avatar asked Apr 11 '13 13:04

Edwin


People also ask

How do I stop a form from submitting multiple times?

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.

How do I stop multiple form submission in jQuery?

The code: jQuery. validator. setDefaults({ submitHandler: function(form){ // Prevent double submit if($(form).

How do you submit form only once after multiple clicking on submit?

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.

How to avoid double submits using jQuery?

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.

How to prevent multiple form submits in form?

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.

How to submit a form using jQuery Ajax?

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.

How to stop the event-like form submission to the backend?

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.


2 Answers

"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.

like image 169
nnnnnn Avatar answered Oct 18 '22 11:10

nnnnnn


$("#updatestock_form").submit(function(e){
    $(this).unbind("submit")
    $("#submitButton").attr("disabled", "disabled")
});

Very simple.

like image 21
roydukkey Avatar answered Oct 18 '22 11:10

roydukkey