How to clear the data of the fields that were requested by JSON when the client is not selected?

Asked

Viewed 258 times

3

My JSON code makes a data request through a query by the client ID, only that I realized that when it does not select the client the data of the previous request still remain in the fields. That is to say, every time the client is chosen the data request is made, when the option is empty all fields are automatically cleared. even when the page is updated.

You see, even if there is no ID selection the data request still keeps the data of the previous selection in the fields

inserir a descrição da imagem aqui

  • ID query code
<?php
    // Inclusão do arquivo conexao.php ao select_cliente.php
    require_once '../conexao/conexao.php';
    // Variável $cd_cliente que recebe a coluna cd_cliente da tabela cliente
    $cd_cliente = $_GET["cd_cliente"];  
    // Se a seleção for possível de realizar
    try {
        // variável que faz a seleção do cd_cliente
        $selecao = "SELECT * FROM cliente where cd_cliente='".$cd_cliente."'";
        // $seleciona_dados recebe $conexao que prepare a operação para selecionar
        $seleciona_dados = $conexao->prepare($selecao);
        // Executa a operação
        $seleciona_dados->execute();
        // Retorna uma matriz contendo todas as linhas do conjunto de resultados
        $linhas = $seleciona_dados->fetchAll(PDO::FETCH_ASSOC);
        // Função que converte um array PHP em dados para JSON 
        echo json_encode($linhas);
    // Se a seleção não for possível de realizar
    } catch (PDOException $falha_selecao) {
        echo "A listagem de dados não foi feita".$falha_selecao->getMessage();
    }
?>
  • Form code requesting the request code
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="utf-8">
    <title> UPDATE | Cliente </title>
    <script>
        function buscaDados(){
            // Variavel cd_cliente que retorna o elemento cd_cliente
            var cd_cliente = document.querySelector("#cd_cliente").value;
            // Instancia a classe XMLHttpReques
            ajax = new XMLHttpRequest();
            // Especifica o Method e a url que será chamada
            ajax.open("GET","cliente_id.php?cd_cliente="+cd_cliente,true);
            // Executa na resposta do ajax
            ajax.onreadystatechange = function(){
                // Se completar a requisição
                if(ajax.readyState == 4){
                    // Se retornar
                    if(ajax.status == 200){
                        // Converte a string retornada para dados em JSON no JS
                        var retornoJson = JSON.parse(ajax.responseText);
                        // Preenche os campos com o retorno dos dados em cada campo
                        document.querySelector("#nome").value = retornoJson[0].nome;
                        document.querySelector("#cpf").value = retornoJson[0].cpf;
                        document.querySelector("#telefone").value = retornoJson[0].telefone;
                        document.querySelector("#email").value = retornoJson[0].email;
                        document.querySelector("#cidade").value = retornoJson[0].cidade;
                        document.querySelector("#bairro").value = retornoJson[0].bairro;
                        document.querySelector("#rua").value = retornoJson[0].rua;
                        document.querySelector("#numero").value = retornoJson[0].numero;
                    }
                }
            }
            // Envia a solicitação
            ajax.send();
        }
    </script>
</head>
<body>
    <?php
        // Inclusão do arquivo conexao.php ao update_cliente.php
        require_once '../conexao/conexao.php'; 
        // Se existir o botão de Atualizar
        if(isset($_POST['Atualizar'])){  
            // Especifica a variável externa
            $cd_cliente = $_POST['cd_cliente'];
            $nome = $_POST['nome'];
            $cpf = $_POST['cpf'];
            $telefone = $_POST['telefone'];
            $email = $_POST['email'];
            $cidade = $_POST['cidade'];
            $bairro = $_POST['bairro'];
            $rua = $_POST['rua'];
            $numero = $_POST['numero'];
            // Se a atualização for possível de realizar
            try {
                // Comando para atualizar
                $atualizacao = "UPDATE cliente SET nome = :nome, cpf = :cpf,
                telefone = :telefone, email = :email, cidade = :cidade, 
                bairro = :bairro, rua = :rua, numero = :numero WHERE cd_cliente = :cd_cliente";
                // $atualiza_dados recebe $conexao que prepare a operação de atualizacao
                $atualiza_dados = $conexao->prepare($atualizacao);
                // Vincula um valor a um parâmetro
                $atualiza_dados->bindValue(':cd_cliente',$cd_cliente);
                $atualiza_dados->bindValue(':nome',$nome);
                $atualiza_dados->bindValue(':cpf',$cpf);
                $atualiza_dados->bindValue(':telefone',$telefone);
                $atualiza_dados->bindValue(':email',$email);
                $atualiza_dados->bindValue(':cidade',$cidade);
                $atualiza_dados->bindValue(':bairro',$bairro);
                $atualiza_dados->bindValue(':rua',$rua);
                $atualiza_dados->bindValue(':numero',$numero);
                // Executa a operação
                $atualiza_dados->execute(); 
            // Caso a atualização for possível de realizar
            } catch (PDOException $falha_atualizacao) {
                echo "A atualização não foi feita".$falha_atualizacao->getMessage();
            }
        }
        // Query que seleciona chave e nome do cliente
        $seleciona_nomes = $conexao->query("SELECT cd_cliente, nome FROM cliente");
        // Resulta em uma matriz
        $resultado_selecao = $seleciona_nomes->fetchAll();  
    ?>
    <form method="POST">
        <p> Cliente:
        <select onclick="buscaDados()" name="cd_cliente" id="cd_cliente" required="">
            <option value=""> </option>
            <?php
                foreach ($resultado_selecao as $valor) {
                    echo "<option value='{$valor['cd_cliente']}'>{$valor['nome']}</option>";
                }
            ?>
        </select>
        </p>
        <p> Nome: <input type="text" name="nome" id="nome" size="30" maxlength="30" required=""> </p>
        <p> CPF: <input type="text" name="cpf" id="cpf" size="30" maxlength="14" required=""> </p>
        <p> Telefone: <input type="text" name="telefone" id="telefone" size="30" maxlength="15" required=""> </p>
        <p> Email: <input type="email" name="email" id="email" size="30" maxlength="50" required=""> </p>
        <p> Cidade: <input type="text" name="cidade" id="cidade" size="30" maxlength="30" required=""> </p>
        <p> Bairro: <input type="text" name="bairro" id="bairro" size="30" maxlength="30" required=""> </p>
        <p> Rua: <input type="text" name="rua" id="rua" size="30" maxlength="30" required=""> </p>
        <p> Número: <input type="number" name="numero" id="numero" size="5" required=""> </p>
        <p> <input type="submit" name="Atualizar" value="Atualizar cliente"> </p>
    </form>
    <?php  
        // Se a seleção for possível de realizar
        try {
            // variável que faz a selecao
            $selecao = "SELECT * FROM cliente";
            // $seleciona_dados recebe $conexao que prepare a operação para selecionar
            $seleciona_dados = $conexao->prepare($selecao);
            // Executa a operação
            $seleciona_dados->execute();
            // Retorna uma matriz contendo todas as linhas do conjunto de resultados
            $linhas = $seleciona_dados->fetchAll(PDO::FETCH_ASSOC);
        // Se a seleção não for possível de realizar
        } catch (PDOException $falha_selecao) {
            echo "A listagem de dados não foi feita".$falha_selecao->getMessage();
        }
    ?>
    <br>
    <table border="1">
        <tr> <td> ID cliente: <td> Nome: <td> CPF: <td> Telefone: 
        <td> Email: <td> Cidade: <td> Bairro: <td> Rua: <td> Número: </tr>
        <?php 
            // Loop para exibir as linhas
            foreach ($linhas as $exibir_colunas){
                echo '<tr>';
                echo '<td>'.$exibir_colunas['cd_cliente'].'</td>';
                echo '<td>'.$exibir_colunas['nome'].'</td>';
                echo '<td>'.$exibir_colunas['cpf'].'</td>';
                echo '<td>'.$exibir_colunas['telefone'].'</td>';
                echo '<td>'.$exibir_colunas['email'].'</td>';
                echo '<td>'.$exibir_colunas['cidade'].'</td>';
                echo '<td>'.$exibir_colunas['bairro'].'</td>';
                echo '<td>'.$exibir_colunas['rua'].'</td>';
                echo '<td>'.$exibir_colunas['numero'].'</td>';
                echo '</tr>'; echo '</p>';
            }
        ?>
    </table>  
</body>
</html>
javascript json

1 answer

1


First do not use the click event, it is not suitable for a select. This is because every time you click on the element will trigger the event, even when you open it without choosing any option. This is bad because it will burden your system by making unnecessary requests.

To select use the event change which will be triggered every time a selected option is different from the one previously selected:

onchange="buscaDados()"

And in the function you check if the selected option has value before calling Ajax. If there is no value, you clear the fields and abort the function before arriving in Ajax:

function buscaDados(){
   // Variavel cd_cliente que retorna o elemento cd_cliente
   var cd_cliente = document.querySelector("#cd_cliente").value;
   if(!cd_cliente){ // verifica se o option selecionado é vazio: value=""
      document.forms[0].reset(); // apaga os valores dos elementos do formulário
      return; // aborta o resto da função
   }

   // Instancia a classe XMLHttpReques
   ajax = new XMLHttpRequest();
  ...resto da função
}

Taking into account that there is only 1 form on the page, use document.forms[0], but in case there is the possibility of more than 1 form on the same page, put a id on the form not to be confused with others:

<form method="POST" id="formulario">

In this case, using id, instead of using document.forms[0].reset(), use document.getElementById("formulario").reset().

As its text inputs have no values in the value, the .reset() will cause them to be cleaned.

  • Pasta guy. Good that it worked! QQ doubt just ask.

  • I meant when I used onchange="buscaDados()" I wasn’t making the requisitions, but when I put in onclick="buscaDados()" worked perfectly

  • Weird then. It should work with onchange.

  • I don’t know why, but it didn’t work with onchange.

Browser other questions tagged javascript json

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