防止多个表单提交jquery

Question

I am building a web app, I am submitting a form with jquery, if I should click on the submit button the first time, it will sub!it once, if I should click it the second time after the first form is submitted, it will submit twice, if I could click it the third time, it will submit 3 times and so on, pls how will I prevent it. Am not talking of disabling the submit button, and I also if I should reload the page if it reset the submission

$.ajax({ type: "POST", url: url, data: data, success: success, dataType: dataType });

Answer 1

This is a classic example. Basically, what you want to do, in your submit method, you want to disable the submit button before you call your ajax. Once the ajax is completed, you will have 2 outcomes, success, or error. In both cases, you want to enable your submit button.

 function buttonSubmit() { let buttonSelector = event.srcElement; buttonSelector.disabled = true; $.post({ url: "your-api", data: { someData: "kjfgkdjfglkdf" }, success: function (result) { // handle your success, do stuff buttonSelector.disabled = false; }, error: function (response) { // handle your error, do stuff buttonSelector.disabled = false; } }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button type="button" onclick="buttonSubmit()">Click Me!</button>