如何通过表单验证防止双重提交

Question

I have been researching this problem for the last day or so. I am trying to prevent the user from double clicking on the submit button for my django project and submitting the form twice. I am also doing form validation so if the form validation fails, I don't want to disable the submit button. My form validation is preventing a double submit in this case because I have a unique field in my form which is preventing the double submit. I am also doing a redirect after the submit, but if I double or triple click the submit button the form fails and never does the redirect.

I've tried various versions of the code below which I found on a similar SO issue...

                  $(document).ready(function (){
                     $('form').submit(function() {
                    $('#status').attr('disabled', true);
                      });
                    });

As an update, I've incorporated code as outlined below:

                $(document).ready(function (){
                  $("#status").click(function() {
                     if(!$("form").hasClass("submitted")){
                       $("form").addClass("submitted");
                       $("form").submit();
                     }
                   });
                 });

This would appear to be working...but maybe I'm missing something. If the user clicks the button like a second after the initial submit, it tries to resubmit the form, perhaps this is as designed above? I guess I'm trying to prevent the double click and allow the redirect to happen as it normally would if the user didn't get in the way :). Under normal cases, this code I'm running works just fine...and redirects after the initial submit. Is there someway to prevent the allow this to happen as expected even if the user clicks again?

In the case of my code, I am trying to pass a value with my submit button, and as such, using the code above prevents the value from being passed when I incorporate it. I am using HTML as shown below:

<button type="submit" class="button15" name="status" id="status" value="Submitted"><h3 class="txtalgn4">Submit</h3></button>

If I use the JQuery above along with the HTML shown, they seem to conflict and it still doesn't prevent the submit.

Thanks in advance for any ideas on how I can incorporate form validation and preventing the user from double clicking the form and submitting it twice. I have also seen some examples of using session specific variables, but was hoping to solve using JQuery/Javascript if possible.

I just tested the code below, and it appears to be executing, but the form is not getting submitted. No errors either.

                $(document).ready(function (){
                  $("#status73").click(function() {
                     if(!$("form").hasClass("submitted")){
                       console.log("hello world");
                       $("form").addClass("submitted");
                       $(window).unbind('beforeunload');
                       $("form").submit();
                     }
                   });
                 });

The hello world was to see if it is executing and in fact it is. However, my django form is not being processed. If I use the code above with this HTML...

<button type="button" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

The form does not get submitted. If I used the code above with this HTML, the form does get submitted....

<button type="submit" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

The difference is the button type. Again I'm new so I'm learning as I go. Thanks for the input.

I'm fairly certain the issue is that I'm not passing the value of Submitted when the button is changed to type button from submit. Is there some way I can submit the value as hidden when the user clicks on the submit button? I tried something like...

<input type="hidden" name="status" value="Submitted"/>
<button type="button" class="button15" name="status" value="Submitted" id="status73"><h3 class="txtalgn4">Submit</h3></button>

But this doesn't seem to pass the status value to the form. Nothing happens.

I just checked my console log and I have the following errors:

Uncaught ReferenceError: checkForm is not defined
    at HTMLFormElement.onsubmit ((index):104)
    at Object.trigger (jquery.min.js:2)
    at HTMLFormElement.<anonymous> (jquery.min.js:2)
    at Function.each (jquery.min.js:2)
    at w.fn.init.each (jquery.min.js:2)
    at w.fn.init.trigger (jquery.min.js:2)
    at w.fn.init.w.fn.(:8000/book/author/anonymous function) [as submit] (http://127.0.0.1:8000/static/jquery/jquery.min.js:2:85786)
    at HTMLButtonElement.<anonymous> ((index):23)
    at HTMLButtonElement.dispatch (jquery.min.js:2)
    at HTMLButtonElement.y.handle (jquery.min.js:2)

I also played around a bit with the hidden values. Exploring errors above.

I had a leftover onsubmit action in my HTML from previous attempts that was causing most of my grief. I also changed the status field to be hidden on the form instead of in the HTML element. Thanks for all of the help!!!!!!

Answer 1

You can change the button type to button, and add a class to the form when it is initially submitted. If the class is present then do not submit the form. This prevents disabling the button.

See the below example using jQuery. Note that this assumes your validation is preventing the form from being submitted.

 $("#status").click(function() { if(!$("form").hasClass("submitted")){ $("form").addClass("submitted"); $("form").submit(); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form action=""> <input type="text"/> <button id="status" type="button" value="Submitted">Submit</button> </form>