0

Tenho um formulário onde preciso interceptar o evento submit, cancela-lo e via Ajax, realizar a requisição necessária. Porém, mesmo utilizando o preventDefault(); e return false; o submit está sendo executado duas vezes.

$("#frmTeste").on('submit', function (e) {
    e.preventDefault();
    alert('teste');
    return false;
});

$("#btnTeste").on('click', function () {
    $("#frmTeste").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="frmTeste">
    <input type="text" name="teste">
    <button id="btnTeste">
        Cadastrar
    </button>
</form>

2 Respostas 2

1

O e.preventDefault(); irá impedir o form de fazer o submit, mas quem está fazendo o submit é o button, uma vez por comportamento padrão, e outra vez por causa do eventListener que você colocou nele.

Você pode tratar isso das seguinte maneiras:

  1. coloque um e.preventDefault(); no eventListener do button também.

  2. declare o button como <button type="button"> para ele não fazer submit como comportamento padrão.

  3. não crie nenhum eventListener para o button, ele já faz submit como padrão

$("#frmTeste").on('submit', function (e) {
    e.preventDefault();
    alert('teste');
    return false;
});

$("#btnTeste1").on('click', function (e) {
    e.preventDefault();
    $("#frmTeste").submit();
});

$("#btnTeste2").on('click', function () {
    $("#frmTeste").submit();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="frmTeste">
    <input type="text" name="teste">
    <button id="btnTeste1">
        Cadastrar1
    </button>
    <button id="btnTeste2" type="button">
        Cadastrar2
    </button>
    <button id="btnTeste3">
        Cadastrar3
    </button>     
</form>

1
  • Entendi, o meu erro foi achar que o button não fazia o submit por padrão! Commented 6/11/2018 às 12:30
1

mesmo utilizando o preventDefault(); e return false; o submit está sendo executado duas vezes.

Repare os comentários:

$("#frmTeste").on('submit', function (e) { // AO SUBMIT
    e.preventDefault(); // NÃO EXECUTAR O PADRÃO (SUBMIT) ????
    alert('teste'); 
    return false;
});

$("#btnTeste").on('click', function () { // AO CLICAR EM #btnTeste
    $("#frmTeste").submit(); // SUBMIT NO FORMULÁRIO
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="frmTeste">
    <input type="text" name="teste">
    <button id="btnTeste">
        Cadastrar
    </button>
</form>

Para isso funcionar, deveria colocar o preventDefault() no bloco que captura o clique no botão, e não no bloco que submete o formulário:

    $("#btnTeste").on('click', function (e) {
        e.preventDefault();
        $("#frmTeste").submit();
    });

Mas, ainda assim, isso está errado! Você pode simplesmente colocar um button com type="submit" que daria no mesmo!

Desvendado o erro no código, vamos a uma solução:

interceptar o evento submit, cancela-lo e via Ajax, realizar a requisição

Isso, talvez, é uma solução para sua pergunta:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<form id="frmTeste" action="" method="post">
    <input type="text" name="teste">
    <button id="btnTeste">
        Cadastrar
    </button>
</form>

<script type="text/javascript">
    $('#btnTeste').on('click', function(e){
        e.preventDefault(); // NÃO EXECUTA O SUBMIT, COMO ACONTECE NORMALMENTE
        e.stopPropagation(); // IMPEDE QUE SEJAM EXECUTADOS OUTROS HANDLERS
        $.ajax({
            url: $('#frmTeste').attr('action'),
            method: $('#frmTeste').attr('method'),
            data: $('#frmTeste').serialize(),
            beforeSend: function(){
                // TUDO QUE ACONTECE ANTES DE EXECUTAR A REQUISIÇÃO AJAX
            },
            success: function(){
                // TUDO QUE ACONTECE APÓS A REQUISIÇÃO (RESPOSTA DA REQUISIÇÃO)
                // SE FOR EXIBIR ALGO REFERENTE A RESPOSTA, DEVE ADICIONAR O PARÂMETRO NA function(<parametro>){ //...
            },
            error: function(){
                // TUDO QUE ACONTECE CASO OCORRA ALGUM ERRO NA REQUISIÇÃO
            }
        });
    });
</script>

Não testei o código, mas eu costumo usar o jQuery 1.2. Acredito que na versão que vc está usando deva reformular a parte do ajax com o .done / .error...

1
  • Entendi, o meu erro foi achar que o button não fazia o submit por padrão! Commented 6/11/2018 às 12:30

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .