3

Meu código JSON faz uma requisição de dados através de uma consulta pelo ID do cliente, só que acabei percebendo que quando não seleciona o cliente os dados da requisição anterior ainda permanecem nos campos. Ou seja, toda vez que o cliente for escolhido a requisição dos dados é feita, quando a opção for vazia todos os campos sejam limpos automaticamente. mesmo quando a página for atualizada.

Viram, mesmo não havendo seleção de ID a requisição de dados ainda mantêm os dados da seleção anterior nos campos

inserir a descrição da imagem aqui

  • Código de consulta de ID
<?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();
    }
?>
  • Código de formulário que solicita o código de requisição
<!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>

1 Resposta 1

1

Primeiro não use o evento click, não é o adequado para um select. Isso porque toda vez que você clicar no elemento irá disparar o evento, mesmo quando você abrir ele sem escolher nenhuma opção. Isso é ruim porque irá onerar seu sistema fazendo requisições desnecessárias.

Para o select use o evento change que será disparado toda vez que um option selecionado for diferente do que estava anteriormente selecionado:

onchange="buscaDados()"

E na função você verifica se o option selecionado possui valor antes de chamar o Ajax. Se não houver valor, você limpa os campos e aborta a função antes de chegar no 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
}

Levando em consideração que só há 1 formulário na página, use document.forms[0], mas caso haja a possibilidade de haver mais de 1 formulário na mesma página, coloque um id no formulário para não confundir com outros:

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

Neste caso, usando id, em vez de usar document.forms[0].reset(), use document.getElementById("formulario").reset().

Como seus os inputs de texto não possuem valores no value, o .reset() fará com que eles sejam limpados.

4
  • Massa cara. Que bom que funcionou! QQ dúvida é só perguntar. 👀🔹
    – Sam
    6/06/2020 às 1:12
  • Eu queria dizer que quando usei onchange="buscaDados()" não tava fazendo as requisições, mas quando eu coloquei onclick="buscaDados()" funcionou perfeitamente
    – user191558
    6/06/2020 às 1:19
  • Estranho então. Deveria funcionar com o onchange. 👀🔹
    – Sam
    6/06/2020 às 1:21
  • Não sei por quê, mais não funcionou com onchange.
    – user191558
    6/06/2020 às 12:39

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