Stop Form Action with Ajax

Asked

Viewed 254 times

1

What I desire

I add fields dynamically stating how many lines I want to add. I wish that as soon as the user clicks to submit the form, I do a check using Ajax to see if any of the informed data have 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 even made the Ajax script that calls a PHP and returns (if there is)an array with the repeated data. The point is, I typed in a new number and another one repeated. The right thing would be to stop sending the form at the exact moment it checks all the fields and find the already inserted ones, showing the dialog. It even shows the dialog, but at the same time it goes to the php file that would insert in the bancoo. 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 file Javascript: $('#formBarcodeId').submit(function (evt) {. I added for testing the line $("#dialog").prepend("<p><b>teste</p>"); in function function ShowResults(value, index, ar) { - that adds values to the dialog -, and yet the dialog is 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>");
    }

});

verifiAjax.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);

php javascript ajax

  • Is PHP working? I say this because we have no way to test this part. If PHP is working ok, it would be the case if you post an example of output json_encode($mensagemResultado). . . . Doubt: if you already check by AJAX, why not do the submit by AJAX also?

  • @brasofilo Now yes - the table was wrong. It now returns the right data, but one of the problems persists. Let’s say I put a value that is not inserted into the bank and the bottom one that exists. When I click on Submit it still continues Submit - I wanted it to stop Submit and show the dialog.I tried to use an if(msg != null) { to only lock if this variable had something inside, but it didn’t work.

1 answer

1


I switched the submit for button, thus being able to better control the action of sending the form. This was done just change the event for when click 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);
            }

        });
    });

Browser other questions tagged php javascript ajax

You are not signed in. Login or sign up in order to post.