Avoid double submit in my form JQuery

Question

JSfiddle : CODE

I was trying to send the info with POST; then I added this code to disable the button after submitting one time:

    $('form').submit(function(){
        $('input[type=submit]', this).attr('disabled', 'disabled');
        return true;
    });

but NOW : the button is disabled and the page is reloaded but the form is not submitting the info ... any solution please

PS: I need a general solution like the code above, my form doesn't have an id, because I need to apply this function to all my forms ....

Maybe your problem is in your server-side code. Also, you don't need to `return true`, it's unnecessary. And instead of `attr()` use `prop()` since `disabled` is a property not an attribute so `.prop('disabled', true)` — elclanrs, Jul 05 '12 at 20:37
i have JQuery 1.2.6 , i can't update at the moment, so i'm using `.attr` , i know that shouldn't use `return true` but i'm really out of ideas :( — Abude, Jul 05 '12 at 20:38

score 7 · Answer 1 · edited May 23 '17 at 10:28

7

You are getting the event passed into that handler function. If you are submitting your form using an .ajax() POST request (consider using .post()), you would need to prevent the default behaviour (i.e. submitting the form).

$("form").on("submit", function(e){
  e.preventDefault();
  // Send the form data using .ajax() or .post()
});

If someone (e.g. me some weeks ago) suggests to put return false at the end of your function, refer them to the article jQuery Events: Stop (Mis)Using Return False (from nearly two years ago).

The above helps when a form is sent using AJAX and also as a regular form submit. But as it seems your problem is hitting the submit button twice (by accident or on purpose). As you pointed out in your answer, the solution to this is deactivating the button after a short (human) / long (computer) time as BalusC pointed out in his answer:

$(document).ready(function () {
    $("form").submit(function () {
        setTimeout(function () {
            $('input[type=submit]').attr('disabled', 'disabled');
        }, 50);
    });
});

edited May 23 '17 at 10:28

Community

1
1

answered Jul 05 '12 at 20:39

Wolfram

8,044
3
45
66

don't understand the commented part, my form has `method="post"`, can you please update the code or JSfiddle to see how it works ? thanks in advance! – Abude Jul 05 '12 at 20:44
I really don't get what `checkDuplicateMessage` is doing, but this is what I meant: http://jsfiddle.net/TKtKq/3/ – Wolfram Jul 05 '12 at 20:51
sorry but really don't understand, `checkDuplicateMessage` checks for the message text if is duplicate with the one before, the idea is that, before i add that disable code that is working perfect, the submit was working, now it doesn't .... – Abude Jul 05 '12 at 20:55
You really need to elaborate on your problem. Are you trying to send the form data using AJAX? What is being duplicated? I can't see what is or isn't working from your jsfiddle example. – Wolfram Jul 05 '12 at 21:00
i posted the solution that worked for my problem, thanks a lot for the provided support! – Abude Jul 05 '12 at 21:07
Does this update help? I tried to clean it up a little... http://jsfiddle.net/TKtKq/6/ – Wolfram Jul 05 '12 at 21:07

score 0 · Accepted Answer · edited May 23 '17 at 11:55

0

this resolved my problem : https://stackoverflow.com/a/2830812/1436998

$(document).ready(function(){
    $("form").submit(function(){
        setTimeout(function() {
            $('input').attr('disabled', 'disabled');
            $('a').attr('disabled', 'disabled');
        }, 50);
    })
});

edited May 23 '17 at 11:55

Community

1
1

answered Jul 05 '12 at 21:06

Abude

2,112
7
35
58

1

Ok, I get it now. I edited my answer to provide some explanation. :) – Wolfram Jul 05 '12 at 21:11

score 0 · Answer 3 · edited Aug 16 '20 at 09:02

I have had issues with people who cannot resist double or triple or multiple clicking. This can can cause all sorts of problems for you. This is how I solved mutiple submit using Jquery. Feel free to copy it if it can help you. Copy and paste to test. Click like mad if you want. This form submits only once!

<%@LANGUAGE="VBSCRIPT"%>
<%Option Explicit%>

<!DOCTYPE html>
 <html>
  <head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

  <style type="text/css">
   body{
        height:100%;
        width:100%;
       }
    h2 {
        font-family:sans-serif;
        font-style:italic;
        font-size:1.4em;
        color:#777;
    }
    #tekst {
        padding:6px;
        border:none;
        border-radius:4px;
        background-color:#666;
        color:#fff;
        opacity:1;
    }
   .loading {
        opacity:0.7;
        background-color:#ddd;
        position:fixed;
        width:100%;
        height:100%;
        top:0px;
        left:0px;
        z-index:1 /*(top)*/;
        visibility:hidden
   }
    .loading-content {
        width: 240px; /* or to your liking.*/
        height: 100px;
        text-align:center;
        margin: 0 auto;
        padding-top:25px;
        position: relative;
        top:20%;
        background-color:#900;
        font-size:1.1em;
        font-weight:bold;
        font-style:italic;
        font-family:sans-serif;
        color:#eee;
        opacity:1;
        z-index:2; /*above . loading*/
        user-select: none; /* Non-prefixed version, currently
                              supported by Chrome, Edge, Opera and Firefox */
    }
    #upload {
        background-color:#000; 
        color:#fff;
        font-style:italic;
        font-weight:bold;
        border-radius:8px;
        border-color:#000;
        padding:3px 8px;
        cursor:pointer;
        z-index:-1;
    }
    p {
        display:inline-block;
        font-size:1em;
        font-style:italic;
        color:#555;
    }
    br {
        line-height:40px;
    }
 </style>

  <title>test</title>
</head>

  <body> 
  <%
    'this is VB script, but use whatever language you want to receive the submitted form
    dim tekst
    tekst=Request.Form("tekst")
    if tekst <> "" then
    Response.Write("<h2>" & tekst & " (Submitted only once).</h2>")
    end if
  %>

  <div class="loading"> 
    <div class="loading-content"></div>
  </div>

  <form action="#" method="post" id="form1">
    <input type="text"  name="tekst"  id="tekst" placeholder="Enter some text"/>
    <input type="submit" value="Submit form" Id="upload" />  <p>Try and double or triple click to check, also during submit.</p>       
  </form>

  <script type="text/javascript">

     $(function () {       
         $(":submit").on('click', function (e) { //this happens when you click, doubleclick or whatever how many clicks you do:
                 e.preventDefault(); //first we prevent a submit to happen
                 $(':submit').attr('disabled', 'disabled'); // then disable the submit button
                 $('.loading').css('visibility', 'visible'); //now the page load message is made visible                    
                 $('.loading-content').html("Page is loading.<br>Please wait a second.");
                 $('.loading').fadeOut(3000); // you do this your own way of course
                 setTimeout(function () { $('#form1').submit();}, 2000); //Here is the important clue. Now, submit the form, with or without a message . Because of the delay, doubleclicks are filtered out and the form submits only once.
         });                   
     });

   </script>

 </body>
</html>

score 0 · Answer 4 · answered Aug 09 '20 at 09:35

0

You can also use

$("form").beforeSubmit(function(){ // function body here.... });

answered Aug 09 '20 at 09:35

Hassan Raza

501
7
8

Avoid double submit in my form JQuery

4 Answers4