Stop Mutiplos clicks on Ubmit!

Question

I have a form that registers the name of the person in a database via ajax, but sometimes delay sending and return and give but 2 or 3 clicks it sends the same data! wanted to know how to stop it, already tried:

    <script>
    var statSend = false;
    function checkSubmit() {
    if (!statSend) {
    statSend = true;
    return true;
    } else {
    alert("O formulário esta sendo enviado…");
    return false; }
    }
    </script>

and

    onclick="this.disabled=true; this.value = 'Aguarde…'; this.form.submit();"

and among others, but none of them worked! someone helps!?

             <h4>Cadastro de Nome</h4>
    <form id="cadUsuario" method="post">
        <label>Nome:</label><input required type="text" name="nome" id="nome" />
        <br/><br/>
        <input type="submit" value="Salvar" id="salvar"  />
    </form>
    <script type="text/javascript">
        $(function () {    
            $("#cadUsuario").submit(function (e) {
            e.preventDefault();
            var FormData = $(this).serialize(); 
                $.ajax({
                  type: "POST", 
                  url: "salvar.php",
                  dataType: "json", // Add datatype
                  data: FormData
                }).done(function (data) {
                    $('#cadUsuario').trigger("reset");
                    var mensagem = '';
                    if (!data.insert){
                        mensagem = 'Falha no cadastro';
                    }
                /* if(!data.email){
                    mensagem += 'Falha no envio do email';
                   }*/
                    if(data.insert/* && data.email*/){
                        mensagem = 'Operação realizda com sucesso';
                    }
                    alert(mensagem);
                }, "json");
            return false;
            }); 
        });
    </script>

Answer 1

Just create a variable and within .submit(...); set the value true and with the event jqXHR.ajax.always setar false again, at the beginning of .submit add a if to check if you are already as true.

Before anything, remove this:

onclick="this.disabled=true; this.value = 'Aguarde…'; this.form.submit();"

And this function is also expendable:

var statSend = false;
function checkSubmit() {
if (!statSend) {
statSend = true;
return true;
} else {
alert("O formulário esta sendo enviado…");
return false; }
}

The result should be:

$(function () {
    var enviandoForm = false;

    $("#cadUsuario").submit(function (e) {
        if (enviandoForm) {
              return false;
        }

        /*
        Isto é apenas para desabilitar o form, mas a garantia
        está na variavel booleana
        */
        this.disabled = true;

        enviandoForm = true;

        e.preventDefault();
        var FormData = $(this).serialize(); 

        $.ajax({
          type: "POST", 
          url: "salvar.php",
          dataType: "json", // Add datatype
          data: FormData
        }).done(function (data) {
            $('#cadUsuario').trigger("reset");
            var mensagem = '';
            if (!data.insert){
                mensagem = 'Falha no cadastro';
            }
        /* if(!data.email){
            mensagem += 'Falha no envio do email';
           }*/
            if(data.insert/* && data.email*/){
                mensagem = 'Operação realizda com sucesso';
            }
            alert(mensagem);
        }).always(function() {
            enviandoForm = false; //Libera o form
            this.disabled = false;
        });

        return false;
    }); 
});

Answer 2

I’d do it this way:

 <h4>Cadastro de Nome</h4>
<form id="cadUsuario" method="post">
    <label>Nome:</label><input required type="text" name="nome" id="nome" />
    <br/><br/>
    <input type="submit" value="Salvar" id="salvar"  />
</form>
<script type="text/javascript">
    $(function () {    
        $("#cadUsuario").submit(function (e) {
        $('#salvar').prop('disabled', true);
        e.preventDefault();
        var FormData = $(this).serialize(); 
            $.ajax({
              type: "POST", 
              url: "salvar.php",
              dataType: "json", // Add datatype
              data: FormData
            }).done(function (data) {
                $('#cadUsuario').trigger("reset");
                var mensagem = '';
                if (!data.insert){
                    mensagem = 'Falha no cadastro';
                }
            /* if(!data.email){
                mensagem += 'Falha no envio do email';
               }*/
                if(data.insert/* && data.email*/){
                    mensagem = 'Operação realizda com sucesso';
                }
                alert(mensagem);
                $('#salvar').prop('disabled', false);
            }, "json");
        return false;
        }); 
    });
</script>

Disabling the actual button during the ajax, and releasing again only after the alert, thus ensuring that there is no wrongful duplication of data.