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!!!!!!

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!!!!!!

• javascript
• jquery
• django
• django-forms
• django-views

• 2 Just use a normal button instead of a submit button so you have full control over when the form should be posted with jquery. Then the logic bees rather easy: if valid and not is_submitting, submit disable and set submitting to true else do nothing. – Shilly Commented Jan 24, 2019 at 16:14
• Thanks for the response. What do you mean by a normal button? I need to be able to pass the status value when the user clicks submit. – Steve Smith Commented Jan 24, 2019 at 16:28
• A button <button type="submit"> automatically has the event that it submits the form when clicked. So when you use it, you also have to prevent the submit event from triggering before you're ready. So the 'easy' solution is to use a <button type="button">, so it does not have the auto-submit event. That way You can choose when to use form.submit() or $.post() instead of having to fight with the submit button over if it can already send the form or not. – Shilly Commented Jan 24, 2019 at 16:34
• Thank you for the feedback. I'm very new at this...but when I do what you suggest it now no longer submits the form at all. Nothing happens. When I leave the button as is, it works, I just struggle with the double submission. – Steve Smith Commented Jan 24, 2019 at 16:43
• I suggest you to look into JS Promises. I guess that might help u here. – ajc Commented Jan 24, 2019 at 16:57

1 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./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>