Stop Form Action with Ajax

1

What I want

I add fields dynamically by telling you how many rows I want to add. I wish as soon as the user clicks to submit the form, I do a check using Ajax to see if any of the reported data has already been registered. If this is true, it will open a dialog with the information of the values already registered and will prevent the form from being redirected to the php file.

What I did

I made the Ajax script that calls a PHP and returns (if it exists) an array with the repeated data. The question is: I typed a new number and one repeated. The right thing would be for him to stop sending the form at the very moment he checks all the fields and finds the ones already inserted, showing the dialog. It even shows the dialog, but at the same time it goes to the php file that would do the insertion in the database. How can I make it stop the form if the 'msg' variable in the Javascript file has something?

The function that checks the data is the penultimate of the Javascript file: $('#formBarcodeId').submit(function (evt) { . I added test for the $("#dialog").prepend("<p><b>teste</p>"); line in the function ShowResults(value, index, ar) { function - which adds the values to the dialog -, and yet the dialog has been empty.

Index

    <body>
        <main>
            <header>
                <h1>Ficha de Assinatura de Prestação de Contas</h1>
            </header>

            <div id="dialog" title="Dados Já Inseridos">
            </div>

            <div id="main">
                <div id="content">
                    <input type="text" name="adicionarCamposQtd" id="adicionarCamposQtd" placeholder="Quantidade de novos campos">
                    <button id="adicionarCampo">+ adicionar campo</button>
                    <?php
                        if(isset($_GET['erro'])) {
                            $erro = $_GET['erro'];
                            if($erro == 1) {
                                $mensagemDeErro = "Por favor, preencha todos os campos";
                            }
                            else if($erro == 2) {
                                $mensagemDeErro = "Por favor, verifique se os dados informados já não foram cadastrados";
                            }
                            echo "<p id='mensagemErro'>$mensagemDeErro</p>";
                        }
                    ?>
                    <form method="POST" action="gerarpdf.php" enctype="multipart/form-data" name="formBarcode" id="formBarcodeId">
                        <div id="formulario">
                            <select name="mesReferencia1" required>
                                <option value="" disabled selected>Mês de Referência</option>
                                <option value="02">Feveiro/Março</option>
                                <option value="04">Abril/Maio</option>
                                <option value="06">Junho/Julho</option>
                                <option value="08">Agosto/Setembro</option>
                                <option value="10">Outubro/Novembro</option>
                                <option value="12">Dezembro/Janeiro</option>
                            </select>
                            <select name="anoReferencia1" required>
                                <option value="" disabled selected>Ano de Referência</option>
                                <?php 
                                    $data = date("Y");
                                    for($i = 0; $i < 3; $i++) {
                                        echo '<option value="'.substr($data,2,2).'">'.$data.'</option>';
                                        $data++;
                                    }
                                ?>
                            </select>
                            <br/>
                            <input type="text" placeholder="Código da Entidade" maxlength="5" name="numeroDocumento1" required/>
                            <input type="checkbox" name="criancaIdade1" id="criancaLabel1" value="1"><label for="criancaLabel1">Criança</label>&nbsp;&nbsp;&nbsp;<input type="checkbox" name="idosoIdade1" id="idosoIdade1" value="2"><label for="idosoIdade1">Idoso</label>
                        </div>
                        <input type="hidden" name="quantidadeCampos" value="1" id="quantidadeCampos">
                        <input type="submit" value="Gerar Código" name="submitBarcode" id="submitBarcodeId" required/>
                    </form>
                </div>
            </div>
        </main>
    </body>

Javascript

$(function () {
    //Quando clicar em submit do form ele verifica os campos já inseridos
    $('#formBarcodeId').submit(function (evt) {
        var valoresFormulario = $('#formBarcodeId').serialize();
        evt.preventDefault();
        $.ajax({
            url : 'verificaAjax.php',
            type: 'post',
            data: valoresFormulario,
            success : function(msg){
                $(function() {
                    $("#dialog").empty();
                    msg.forEach(ShowResults);
                    $("#dialog").css('overflow','scroll');
                    $("#dialog").dialog({
                        dialogClass: "no-close",
                        resizable: false,
                        minWidth: 700,
                        minHeight: 400,
                        maxHeight: 600,
                        draggable:false,
                        modal: true,
                            buttons: {
                                Ok: function() {
                                    $( this ).dialog( "close" );
                                }
                            }
                    });
                });
            } 
        });
    });

    // Função para retornar os valores
    function ShowResults(value, index, ar) {
        $("#dialog").prepend("<p><b>Número da Entidade</b>: " + value['codigo_entidade']+ "</p><br/>");
        if(value['codigo_projeto'] == 1) {
            $("#dialog").prepend("<p><b>Projeto</b>: Criança</p>"); 
        }
        else if(value['codigo_projeto'] == 2){
            $("#dialog").prepend("<p><b>Projeto</b>: Idoso</p>"); 
        }
        $("#dialog").prepend("<p><b>Ano: </b>: " + value['ano_ref'] + "</p>");
        $("#dialog").prepend("<p><b>Mês:</b> " + value['mes_ref'] + "</p>");
        $("#dialog").prepend("<p><b>Caminho do Arquivo</b>: " + value['caminho'] + "</p>");
    }

});

checkAjax.php

$bancoDeDados = new Bd();

$mesReferencia = $_POST["mesReferencia1"];    
$anoReferencia = $_POST["anoReferencia1"];

// Verificador de primeiro valor consulta
$verificador = 0;

//Caso o campo de quantidade não existir. Ou seja, só temos uma linha
if(empty($_POST["quantidadeCampos"])) {
    $numeroDocumento = $_POST["numeroDocumento1"];

    if(!empty($_POST["criancaIdade1"])) {
        $mensagemResultado = $bancoDeDados->selectEtiquetaBD($numeroDocumento,$anoReferencia,$mesReferencia,1);
        $verificador+=1;
    }
    if(!empty($_POST["idosoIdade1"])) {
        //Verifica se esse é o primeiro valor procurado, para caso não, então fundir os arrays
        if ($verificador == 0) {
            $mensagemResultado = $bancoDeDados->selectEtiquetaBD($numeroDocumento,$anoReferencia,$mesReferencia,2);
            $verificador+=1;
        }
        else {
            $resultadoConsulta = $bancoDeDados->selectEtiquetaBD($numeroDocumento,$anoReferencia,$mesReferencia,2);
            $mensagemResultado = array_merge($mensagemResultado,$resultadoConsulta);
        }
    }
}
else {
    $limiteFor = $_POST["quantidadeCampos"];
    for($contadorFor = 1; $contadorFor <= $limiteFor; $contadorFor++) {

        //Recebe o número do documento
        $numeroDocumento = $_POST["numeroDocumento$contadorFor"];

        if(!empty($_POST["criancaIdade$contadorFor"])) {
            if ($verificador == 0) {
                $mensagemResultado = $bancoDeDados->selectEtiquetaBD($numeroDocumento,$anoReferencia,$mesReferencia,1);
                $verificador = 1;
            }
            else {
                $resultadoConsulta = $bancoDeDados->selectEtiquetaBD($numeroDocumento,$anoReferencia,$mesReferencia,1);
                $mensagemResultado = array_merge($mensagemResultado,$resultadoConsulta);
            }
        }
        if(!empty($_POST["idosoIdade$contadorFor"])) {
            //Verifica se esse é o primeiro valor procurado, para caso não, então fundir os arrays
            if ($verificador == 0) {
                $mensagemResultado = $bancoDeDados->selectEtiquetaBD($numeroDocumento,$anoReferencia,$mesReferencia,2);
                $verificador = 1;
            }
            else {
                $resultadoConsulta = $bancoDeDados->selectEtiquetaBD($numeroDocumento,$anoReferencia,$mesReferencia,2);
                $mensagemResultado = array_merge($mensagemResultado,$resultadoConsulta);
            }
        }
    }
}

echo json_encode($mensagemResultado);
    
asked by anonymous 28.10.2014 / 13:46

1 answer

1

I've changed submit by button , so you can better control the action of submitting the form. That done was just changing the event to when you clicked the button.

<input type="button" value="Gerar Código" name="submitBarcode" id="submitBarcode" required/>


//Quando clicar em submit do form ele veifica os campos já inseridos
    $('#submitBarcode').click(function () {
        $.ajax({
            type: 'POST',
            url : 'verificaAjax.php',
            data: $('#formBarcodeId').serialize(),
            success : function(msg){
                if (msg.status == 0) {
                    $(function() {
                        $("#dialog").empty();
                        //$("#dialog").html("<p>" + msg.errorMsg + "</p>");
                        retorno = msg.errorMsg;
                        retorno.forEach(ShowResults);
                        $("#dialog").dialog({
                            dialogClass: "no-close",
                            resizable: false,
                            minWidth: 700,
                            minHeight: 400,
                            maxHeight: 600,
                            draggable:false,
                            modal: true,
                                buttons: {
                                    Ok: function() {
                                        $( this ).dialog( "close" );
                                    }
                                }
                        });
                    });
                }
                else{
                    $('#formBarcodeId').submit();
                }
            },
            error:function (xhr, ajaxOptions, thrownError) {
                 alert("Erro no Processamento dos Dados. Entre em contato com o setor de Tecnologia e informe a mensagem abaixo:\n"+xhr.responseText);
            }

        });
    });
    
28.10.2014 / 20:23