JQuery Formulário sendo enviado varias vezes

bigbossbr · 20 de fevereiro de 2021

Estou enviando um formulário via jquery ajax e php através de uma modal. A modal por sua vez é com confirmação, ou seja, a primeira modal mostra ao usuário uma previa das informações que ele esta enviando, ele pode cancelar ou confirmar o envio. O problema esta quando ele cancela, ao cancelar para corrigir algum dado e depois enviar, os dados estão sendo cadastrados 2x no banco de dados, se o usuário cancelar mais de 1x, tipo 3x, é feito 3 cadastro no banco, alguém sabe o porque disto ocorrer?

Detalhe, quando ele envia mais de uma vez, ele envia com dados diferentes, manda o primeiro formulário e o segundo, terceiro, etc, cada um com as informações que foram corrigidas.

Código jquery

//##########################################################
//              CADASTRO DE OPERAÇÕES
//##########################################################
$('#formCadOper').submit(function (event) {
    event.preventDefault();
    var idUser = $('#id_user').val();
    var dataOper = $('#data').val();
    var tipoOperacao = $('#tipo_operacao').val();
    var corretora = $('#corretora').val();
    var ladoOperacao = $('#lado_operacao').val();
    var setupOper = $('#setup').val();
    var ativoOper = $('#ativo').val();
    var nCtrs = $('#n_contratos').val();
    var detalhes = $('#detalhes').val();
    var emocional = $('#emocional').val();
    var precoE = $('#preco_entrada').val();
    var precoS = $('#preco_saida').val();

    var precoECalculo = precoE.replace(',', '.');
    precoECalculo = precoECalculo.replace('.', '');

    var precoSCalculo = precoS.replace(',', '.');
    precoSCalculo = precoSCalculo.replace('.', '');

    var text_Status = '';

    var vlrInicial = (precoECalculo * nCtrs);
    var vlrFinal = (precoSCalculo * nCtrs);
    var vlrTotal = (vlrFinal - vlrInicial);
    var vlrBruto = (vlrFinal - vlrInicial);

    if (tipoOperacao == "Swing Trade") {
        pontosOper = 0;
    } else {
        if (ativoOper == "MINI ÍNDICE" || ativoOper == "MINI DÓLAR" || ativoOper == "ÍNDICE CHEIO" || ativoOper == "DÓLAR CHEIO") {
            if (ladoOperacao == "Venda") {
                pontosOper = (precoECalculo - precoSCalculo);
            } else {
                pontosOper = (precoSCalculo - precoECalculo);
            }
        } else {
            vlrInicial = (precoECalculo * nCtrs);
            vlrFinal = (precoSCalculo * nCtrs);
            vlrBruto = (vlrFinal - vlrInicial);
            pontosOper = ((vlrBruto / (precoECalculo * nCtrs)) * 100);
        }
    }

    if (ativoOper == "MINI ÍNDICE" || ativoOper == "MINI DÓLAR" || ativoOper == "ÍNDICE CHEIO" || ativoOper == "DÓLAR CHEIO") {
        if (pontosOper == 0) {
            statusOper = "0x0";
            text_Status = "text-primary";
        } else if (pontosOper > 0) {
            statusOper = "GAIN";
            text_Status = "text-success";
        } else {
            statusOper = "LOSS";
            text_Status = "text-danger";
        }
    }

    if (vlrTotal == 0) {
        statusOper = "0x0";
        text_Status = "text-primary";
    } else if (vlrTotal > 0) {
        statusOper = "GAIN";
        text_Status = "text-success";
    } else {
        statusOper = "LOSS";
        text_Status = "text-danger";
    }

    var info = "<div class=\"card card-warning\">";
    info += "<div class=\"card-header\">";
    info += "<div class=\"alert alert-warning alert-dismissible\">";
    info += "<h5><i class=\"icon faz fa-exclamation-triangle\"></i> Confira os dados de sua operação</h5>";
    info += "</div>";
    info += "</div>";
    info += "<table class=\"table table-sm\">";
    info += "<tr>";
    info += "<th>DATA</th>";
    info += "<td>" + dataOper + "</td>";
    info += "</tr>";
    info += "<tr>";
    info += "<th>TIPO</th>";
    info += "<td>" + tipoOperacao + "</td>";
    info += "</tr>";
    info += "<tr>";
    info += "<th>LADO OPERAÇÃO</th>";
    info += "<td>" + ladoOperacao + "</td>";
    info += "</tr>";
    info += "<tr>";
    info += "<th>CORRETORA</th>";
    info += "<td>" + corretora + "</td>";
    info += "</tr>";
    info += "<tr>";
    info += "<th>SETUP</th>";
    info += "<td>" + setupOper + "</td>";
    info += "</tr>";
    info += "<tr>";
    info += "<th>ATIVO</th>";
    info += "<td>" + ativoOper + "</td>";
    info += "</tr>";
    info += "<tr>";
    info += "<th>Nº CONTRATOS</th>";
    info += "<td>" + nCtrs + "</td>";
    info += "</tr>";
    info += "<tr>";
    info += "<th>EMOCIONAL</th>";
    info += "<td><img src=assets/img/icons_emocional/" + emocional + "></td>";
    info += "</tr>";
    info += "<tr>";
    info += "<th>PREÇO ENTRADA</th>";
    info += "<td>";
    if (ativoOper == "MINI ÍNDICE" || ativoOper == "ÍNDICE CHEIO") {
        info += precoE;
    } else {
        info += "R$ " + precoE;
    }
    info += "</td>";
    info += "</tr>";
    info += "<tr>";
    info += "<th>PREÇO SAÍDA</th>";
    info += "<td>";
    if (ativoOper == "MINI ÍNDICE" || ativoOper == "ÍNDICE CHEIO") {
        info += precoS;
    } else {
        info += "R$ " + precoS
    }
    info += "</td>";
    info += "</tr>";
    info += "<tr>";
    info += "</tbody>";
    info += "</table>";
    info += "<h3 class=\"text-center bg-primary text-light\"\>RESULTADO DA OPERAÇÃO</h3>";

    //Resultado da operação
    info += "<table class=\"table table-sm\">";
    info += "<thead class=\"bg-dark\">";
    info += "<tr align=\"center\">";
    info += "<th>PONTOS/RENT.(%)</th>";
    info += "<th>STATUS</th>";
    info += "<th>RESULTADO BRUTO</th>";
    info += "</tr>";
    info += "</thead>";
    info += "<tbody class=" + text_Status + ">";
    info += "<tr align=\"center\">";
    info += "<td>" + pontosOper + "</td>";
    info += "<td>" + statusOper + "</td>";
    info += "<td>R$ " + vlrBruto.toFixed(2) + "</td>";
    info += "</tr>";
    info += "<tr>";
    info += "</tbody>";
    info += "</table>";
    info += "</div>";

    $("#mostraDados").modal('show');
    //Ativa mover da modal
    $('.modal-dialog').draggable({ handle: ".modal-header" });
    $('.modal-header').css('cursor', 'move')
    $(".modal-body").html(info);

    //#######################################################
    //SÓ DEVE ENTRAR AQUI SE O BOTÃO DE CONFIRMAR FOI CLICADO
    //#######################################################
    $('button[data-confirm]').click(function (event) {
        event.preventDefault();
        $.ajax
            ({
                //Configurações
                type: 'POST',
                dataType: 'html',
                url: 'insert.php?ins=cadOp&confirm=1',
                beforeSend: function () {
                    $("#mostraDados").html("<div class=\"spinner-border text-danger\" role=\"status\"><span class=\"sr-only\"></span></div><br>Carregando...");
                },
                //Dados para consulta
                data: {
                    idUser: idUser,
                    dataOper: dataOper,
                    tipoOperacao: tipoOperacao,
                    corretora: corretora,
                    ladoOperacao: ladoOperacao,
                    setupOper: setupOper,
                    ativoOper: ativoOper,
                    nCtrs: nCtrs,
                    precoE: precoE,
                    precoS: precoS,
                    detalhes: detalhes,
                    emocional: emocional
                },
                success: function (msg) {
                    $('#confirmaAddOperacao').modal('hide');
                    $('#infoSucessoAddOperacao').modal('show');
                    $("#infoSucessoAddOperacao .modal-body").html(msg);
                    $('#infoSucessoAddOperacao').click(function () {
                        location.reload();
                    })
                }
            });
    })
});

Também tentei usar o envio assim

//##########################################################
//              CADASTRO DE OPERAÇÕES
//##########################################################
$('#formCadOper').submit(function (event) {
    event.preventDefault();
    var idUser = $('#id_user').val();
    var dataOper = $('#data').val();
    var tipoOperacao = $('#tipo_operacao').val();
    var corretora = $('#corretora').val();
    var ladoOperacao = $('#lado_operacao').val();
    var setupOper = $('#setup').val();
    var ativoOper = $('#ativo').val();
    var nCtrs = $('#n_contratos').val();
    var detalhes = $('#detalhes').val();
    var emocional = $('#emocional').val();
    var precoE = $('#preco_entrada').val();
    var precoS = $('#preco_saida').val();

    $.ajax
        ({
            //Configurações
            type: 'POST',
            dataType: 'html',
            url: 'insert.php?ins=cadOp&confirm=0',
            beforeSend: function () {
                $("#mostraDados").html("<div class=\"spinner-border text-danger\" role=\"status\"><span class=\"sr-only\"></span></div><br>Carregando...");
            },
            //Dados para consulta
            data: { idUser: idUser, dataOper: dataOper, tipoOperacao: tipoOperacao, corretora: corretora, ladoOperacao: ladoOperacao, setupOper: setupOper, ativoOper: ativoOper, nCtrs: nCtrs, precoE: precoE, precoS: precoS, detalhes: detalhes, emocional: emocional },
            success: function (msg) {
                $("#mostraDados").modal('show');
                //Ativa mover da modal
                $('.modal-dialog').draggable({ handle: ".modal-header" });
                $('.modal-header').css('cursor', 'move')
                $(".modal-body").html(msg);
            }
        });

    //#######################################################
    //SÓ DEVE ENTRAR AQUI SE O BOTÃO DE CONFIRMAR FOI CLICADO
    //#######################################################
    $('button[data-confirm]').click(function (event) {
        event.preventDefault();
        $.ajax
            ({
                //Configurações
                type: 'POST',
                dataType: 'html',
                url: 'insert.php?ins=cadOp&confirm=1',
                beforeSend: function () {
                    $("#mostraDados").html("<div class=\"spinner-border text-danger\" role=\"status\"><span class=\"sr-only\"></span></div><br>Carregando...");
                },
                //Dados para consulta
                data: {
                    idUser: idUser,
                    dataOper: dataOper,
                    tipoOperacao: tipoOperacao,
                    corretora: corretora,
                    ladoOperacao: ladoOperacao,
                    setupOper: setupOper,
                    ativoOper: ativoOper,
                    nCtrs: nCtrs,
                    precoE: precoE,
                    precoS: precoS,
                    detalhes: detalhes,
                    emocional: emocional
                },
                success: function (msg) {
                    $('#confirmaAddOperacao').modal('hide');
                    $('#infoSucessoAddOperacao').modal('show');
                    $("#infoSucessoAddOperacao .modal-body").html(msg);
                    $('#infoSucessoAddOperacao').click(function () {
                        location.reload();
                    })
                }
            });
    })
});

No momento por ainda não ter encontrado um solução, adicionei ao código um reload na pagina caso o usuário clique em cancelar, mais sei que não é a opção correta, pois o formulário fica todo em branco tendo o usuário que preencher tudo novamente.

Código paelativo adicionado

$('#cancelarAddOperacao').click(function () {
        location.reload();
    })

Marcelo Calazans · 21 de fevereiro de 2021

@bigbossbr Olá colega, gostaria de ajudar, mas o ideal era ver o código todo rodando no seu ambiente de trabalho para entender melhor e fazer alguns testes.

Mas olhando o seu código, achei estranha uma coisa, que você com certeza já deve ter notado também.

Abaixo no código, ele só deveria pela lógica, entrar ali uma vez, quando houvesse o clique. Pois parece ser ali que o AJAX direciona para a gravação.

$('button[data-confirm]').click(function (event) {
   console.log('entrou');      
})

Você já tentou colocar ali um console.log para ver em que situações ele entra naquela estrutura?

Vamos esperar para ver se alguém tem outra ideia.

Boa Sorte Irmão!!

bigbossbr · 21 de fevereiro de 2021

@Marcelo Calazans Olá amigo, obrigado por responder.

O que você colocou foi exatamente o que fiquei pensando, ele não pode submeter o formulário se não foi confirmado, mais pelo que notei, o jquery está criando um cachê dos dados que foram tentado enviar no primeiro submit, ai quando o usuário cancela na modal, corrige algum dados, a modal abre e ele confirma, o jquery por algum motivo está enviando 2x os dados, um com valores do primeiro submit e outro com o segundo com dados corrigido.

Achei uma forma de corrigir, não sei se foi a melhor, mais o que fiz foi

7 horas atrás, bigbossbr disse:

$('#cancelarAddOperacao').click(function () { location.reload(); })

Aqui em vez de atualizar a página, foi limpar todas as variaveis caso o usuário clique em cancelar, assim quando ele corrigir e submeter novamente as variáveis iniciam vazias.

Marcelo Calazans · 21 de fevereiro de 2021

@bigbossbr O jquery as vezes faz algumas coisas estranhas mesmo, fica difícil de entender o que acontece. Sua ideia dele estar guardando um cache é bem plausível mesmo.

Não achei a sua solução ruim, mesmo que o usuário tenha que preencher tudo novamente, ele nem vai notar que é algo do código.

No seu lugar, mesmo que eu conseguisse fazer de outra forma, apenas por desencargo de consciência, eu continuaria com o reload. Melhor as vezes se garantir de uma forma mais funcional, do que no seu caso, se arriscar a ficar gravando dados errados.

Mas se caso você descobrir, posta por favor a solução porque fiquei curioso.

Abraço irmão.

bigbossbr · 21 de fevereiro de 2021

@Marcelo Calazans Então, da forma que estou fazendo no momento, não limpo o formulário, somente as variáveis que foram preenchidas no primeiro submit, somente se ele clicar em cancelar, mais vou continuar tentando debugar e achar um forma mais funcional, achando posto sim.

Marcelo Calazans · 21 de fevereiro de 2021

10 horas atrás, bigbossbr disse:

@Marcelo Calazans vou continuar tentando debugar e achar um forma mais funcional, achando posto sim.

Boa sorte na tarefa irmão.

DiF · 22 de fevereiro de 2021

@bigbossbr O que eu geralmente faço é não usar o evento de disparada do submit diretamente.

Por exemplo, eu atribuo o evento de on.('click", function()) ao botão de submit. Dentro do evento, eu testo se os campos estão vazios primeiro. senão estiverem, prossigo e chamo o evento de $ajax Uso o preventDefault() para evitar novas disparadas. Eu na maioria das vezes não uso um preview porque não preciso.

Mas quando há necessidade, você pode montar e disparar o evento dentro do preview, e não antes.

Então basicamente, você pode chamar um on.('click') no form, este evento, monta o preview, seja por tabela ou não.( eu prefiro evitar de usar tabelas) e dentro do preview, adiciono um botão ou link que submete os dados via ajax, sem usar o evento de submit.

Essa é uma das maneiras.. não há uma certa ou errada.

Boa sorte

bigbossbr · 22 de fevereiro de 2021

@DiF verdade, não pensei nesta hipótese, de enviar na modal o form , boa dica, obrigado. Vou testar amanhã.

Inclusive estou com outra treta no momento, mais vou colocar um novo post para não misturar os assuntos, até porque agora a treta é crud com php e MySQL.