-1

Após algumas pesquisas conseguir desenvolver um datalist que recupera valores diretamente dos registros mysql, com php apenas e os exibindo por javascript. Gostaria de saber se é possível retornar o valor de vários campos, após preenchimento de um? Por exemplo, após encontrar o cliente, os demais campos como telefone, endereço, data de nascimento, tambem são preenchidos.

Vou deixar o código abaixo pra exemplificar:

    <?php
include('./conexao.php');
?>

<div class="d-flex flex-row">
    <aside class="form-ficha">
        <h2>Ficha Micropigmentação</h2>
        <form oninput="escrever()">
            <div class="form-group">
                <label>Cliente
                    <input type="list" id="clientes" list="cliente">
                    <datalist id="cliente">
                        <?php
                        $consulta_clientes = "SELECT nome FROM clientes ORDER by id DESC";
                        $resultado_clientes = mysqli_query($conexao, $consulta_clientes);

                        while ($linha_clientes = mysqli_fetch_array($resultado_clientes)) { ?>
                            <option value="<?php echo $linha_clientes['nome'] ?>"></option>
                        <?php } ?>
                    </datalist>
                </label>
            </div>
            <div class="form-group">
                <label>Data do procedimento
                    <input type="date" id="datade">
                </label>
            </div>
            <div class="form-group">
                <label>Forma de Pagamento
                    <select id="pagamento">
                        <option>Dinheiro</option>
                        <option>Cartão de Débito</option>
                        <option>Cartão de Crédito</option>
                    </select>
                </label>
            </div>
            <div class="form-group">
                <label><strong>Existe algum problema que julgue necessário informar antes do procedimento?</strong>
                    <textarea id="problemas" cols="25" rows="5"></textarea>
                </label>
            </div>
            <div class="form-group">
                <label><strong>Declaro que sou maior de idade e estou submetendo-me a MICROPIGMENTAÇÃO DE SOBRANCELHASde livre e espontânea vontade.</strong>
                    <select id="maior">
                        <option value="sim">Sim</option>
                        <option value="nao">Não</option>
                    </select>
                </label>
            </div>
            <br>
            <h6><strong>Pigmento 1</strong></h6>
            <div class="form-group">
                <label>Marca do Pigmento
                    <input type="text" id="marca">
                </label>
            </div>
            <div class="form-group">
                <label>Data da Abertura
                    <input type="date" id="abertura">
                </label>
            </div>
            <div class="form-group">
                <label>Validade / Lote
                    <input type="text" id="validade">
                </label>
            </div>
            <div class="form-group">
                <label>Cores Usadas / Pigmento
                    <input type="text" id="cor1">
                </label>
            </div>
            <div class="form-group">
                <label>Cores Usadas / Pigmento
                    <input type="text" id="cor2">
                </label>
            </div>
            <br>

            <h6><strong>Pigmento 2</strong></h6>
            <div class="form-group">
                <label>Marca do Pigmento
                    <input type="text" id="marca2">
                </label>
            </div>
            <div class="form-group">
                <label>Data da Abertura
                    <input type="date" id="abertura2">
                </label>
            </div>
            <div class="form-group">
                <label>Validade / Lote
                    <input type="text" id="validade2">
                </label>
            </div>
            <div class="form-group">
                <label>Cores Usadas / Pigmento
                    <input type="text" id="cor11">
                </label>
            </div>
            <div class="form-group">
                <label>Cores Usadas / Pigmento
                    <input type="text" id="cor22">
                </label>
            </div>
            <br>
            <h6><strong>AUTORIZAÇÃO USO DE IMAGEM E FILMAGEM</strong></h6>
            <div class="form-group">
                <select name="id">
                    <option>sim</option>
                    <option>não</option>
                </select>
            </div>
        </form>
    </aside>

    <section class="conteudo-ficha">
        <article id="micro" class="p-2 m-2">
            <h4 class="text-center">FICHA DE AUTORIZAÇÃO E ANAMNESE</h4>
            <p>
                NOME: <span id="client"></span> <span>   </span> DATA: <span id="dateof"></span><br>
                ENDEREÇO: _______________________________________________________ CEP: ______________________
                FONE_______________________________________________ <br> DATA NASCIMENTO: _______________________
                E-MAIL:________________________________________________ CPF: __________________________________<br>
                FORMA PAGAMENTO: <span id="payment"></span>
            </p>
            <p>
                PROCEDIMENTO DE MICROPIGMENTAÇÃO DE SOBRANCELHAS
                Cardíaco (tem marca passo) Diabético*: Hipertensão:
                Anemia: Câncer: Problema cicatrização:
                Hepatite: Alergias: Gestante:
                Doenças Infecto Contagiosa: Menstruada: Usa medicamento:
                Faz dietas / balões: Depressão: Fumante:
                Alcoólatra: Doença auto imune: Maior de idade:
                Queloide: Herpes: Lactente:
            </p>
            <p>
                Existe algum problema que julgue necessário informar antes do procedimento? se houver relatar abaixo:
                <label>Não
                    <input type="radio" name="selecao" value="Não" checkdate>
                </label>
                <label>Sim
                    <input type="radio" name="selecao" value="Sim" checkdate>
                </label><br>
                Quais? <u id="problem"></u> <br>
                Declaro que sou maior de idade e estou submetendo-me a MICROPIGMENTAÇÃO DE SOBRANCELHAS de
                livre e espontânea vontade.
            </p>
            <table class="table">
                <thead>
                    <th>MARCA DO PIGMENTO</th>
                    <th>DATA DE ABERTURA</th>
                    <th>VALIDADE / LOTE</th>
                    <th>CORES USADAS / PIGMENTO</th>
                    <th>CORES USADAS / PIGMENTO</th>
                </thead>
                <tbody>
                    <tr>
                        <td id="brand"></td>
                        <td id="date_open"></td>
                        <td id="validity"></td>
                        <td id="color1"></td>
                        <td id="color2"></td>
                    </tr>
                </tbody>

            </table>

            <table class="table">
                <thead>
                    <th>MARCA DO PIGMENTO</th>
                    <th>DATA DE ABERTURA</th>
                    <th>VALIDADE / LOTE</th>
                    <th>CORES USADAS / PIGMENTO</th>
                    <th>CORES USADAS / PIGMENTO</th>
                </thead>
                <tbody>
                    <tr>
                        <td id="brand2"></td>
                        <td id="date_open2"></td>
                        <td id="validity2"></td>
                        <td id="color11"></td>
                        <td id="color22"></td>
                    </tr>
                </tbody>

            </table>

            <p>
                 Estou ciente que realizarei a micropigmentação de sobrancelhas com a profissional....
            </p>
            <p>
                 O procedimento e todas as implicações relativas ao mesmo, me foram esclarecidas e estou ciente das minhas
            </p>
            <p>
                condições psicológicas e de saúde, ficando assim a profissional isenta de qualquer responsabilidade quanto as
                reações que por ventura eu venha apresentar.
                Estou ciente e confirmo que o material que será usado é descartável, assim como todo padrão de higiene está
                sendo seguido corretamente, conforme as normas da Vigilância Sanitária (ANVISA).
            </p>
            <p>
                Levando em consideração a absorção do pigmento em cada organismo, e também os cuidados que o cliente terá
                que ter a partir do momento em que optar em fazer a micropigmentação de sobrancelhas, estudos comprovam a
                durabilidade de média 8 meses á 1 ano, nesse período respeitando todas as indicações da micropigmentadora, o
                pigmento tende a clarear naturalmente com o passar dos anos, mas não sumirá definitivamente, sendo assim
                havendo a necessidade de manutenção nesse período.
            </p>
            <p>
                O retoque deverá ser realizado somente após 40 dias. Para todos os retoques realizados, cobraremos uma taxa
                de R$ .... reais referente ao material usado. O prazo para agendar o retoque é de 35 dias. É considerado retoque
                até os 3 primeiros meses, após este período realizaremos MANUTENÇÃO, no valor R$ .... reais.
            </p>
            <p>
                O modelo / formato de como ficará o desenho frontal fui eu quem escolhi, a profissional desenhou e mostrou
                como ficaria, apagou e refez até ficar do meu gosto, me orientando qual o modelo que seria melhor para mim,
                mas prevalecendo o desenho que “EU” escolhi, apenas micropigmentando após a minha autorização. Se eu me
                arrepender do formato estou ciente que será um trabalho com honorários a parte.
            </p>
            <p>
                Comprometo-me a seguir corretamente o tratamento, caso ocorra de dar um longo prazo de tempo sem
                comparecer a data marcada para o retoque, a micropigmentadora ficará isenta da responsabilidade do trabalho,
                estou ciente disso.
                 Marcação e confirmação de horário para realizar o retoque somente pelo telefone: ...
            </p>
            <p>
                 ATENTAR PARA A DATA DO RETOQUE. Em caso de intercorrências não podendo comparecer a consulta favor
                ligar e desmarcar no prazo de 24 horas, pois caso contrário perderá o direito ao retoque e pagará o valor de uma
                MICROPIGMENTAÇÃO R$ .... REAIS.
            </p>
            <p>
                Declaro que não me enquadro na lista de “clientes de riscos”, nem apresento nenhuma doença infecto-
                contagiosa, não apresento nenhum sintoma de debilidade imunológica, não sou dependente de álcool ou drogas.
                E confirmo serem verdadeiras as declarações acima, assumindo total responsabilidade por quaisquer omissões
                ou erro das mesmas.
            </p>
            <p>
                Certifico que todos os itens acima me foram expostos detalhadamente e que não ficou nenhuma dúvida.
                AUTORIZAÇÃO USO DE IMAGEM E FILMAGEM:
            </p>
            <p>
                Autorizo também que fotografe/filme o “antes” e o “depois” gratuitamente para efeito de avaliações,
                documentação, e que este material seja ou não com fins comerciais (divulgação), via folder, cartões, banner,
                internet e quaisquer outros tipos de divulgação. <br>
                ASSIM SENDO, FIRMO A PRESENTE AUTORIZAÇÃO. <br>
                _________ DE _____________________ DE 2020 <br>
                ASSINATURA DA(O) CLIENTE ___________________________________________________________
            </p>
        </article>
        <div class="form-group">
            <input type="button" class="btn btn-warning" value="Imprimir / Pdf" onclick="imprimir_micro()">
        </div>
    </section>
</div>

    function escrever() {
    //Campos do Formulário
    var cliente = document.querySelector('#clientes').value
    let datade = document.querySelector('#datade').value
    let problema = document.querySelector('#problemas').value
    let pagamento = document.querySelector('#pagamento').value

    let marca = document.querySelector('#marca').value
    let abertura = document.querySelector('#abertura').value
    let validade = document.querySelector('#validade').value
    let cor1 = document.querySelector('#cor1').value
    let cor2 = document.querySelector('#cor2').value
    let marca2 = document.querySelector('#marca2').value
    let abertura2 = document.querySelector('#abertura2').value
    let validade2 = document.querySelector('#validade2').value
    let cor11 = document.querySelector('#cor11').value
    let cor22 = document.querySelector('#cor22').value

    //Escrevendo Conteúdo
    client.innerHTML = cliente + '.  '
    let formatoData = new Date()
    datade = formatoData.toLocaleString()
    dateof.innerHTML = datade
    problem.innerHTML = problema
    payment.innerHTML = pagamento

    brand.innerHTML = marca
    date_open.innerHTML = abertura
    validity.innerHTML = validade
    color1.innerHTML = cor1
    color2.innerHTML = cor2
    brand2.innerHTML = marca2
    date_open2.innerHTML = abertura2
    validity2.innerHTML = validade2
    color11.innerHTML = cor11
    color22.innerHTML = cor22
}

function imprimir_micro() {
    let ficha = document.getElementById('micro')
    let imprime = ficha.innerHTML
    window.print(imprime)
}
4
  • 1
    Não entendi muito bem, você quer selecionar o nome do cliente e através disso filtrar o telefone, data nasc, etc... e exibir esses dados no span? 20/10/2020 às 12:33
  • Isso exato. Após localizar o cliente, os outros dados dele são automaticamente preenchidos nos campos restantes. 20/10/2020 às 12:42
  • Entendi, é possível sim e bem simples, pra isso você teria que fazer uma requisição assíncrona para o backend passando o nome como filtro (o que não é muito funcional, geralmente filtramos por ID) e recuperar esses dados com o javascript. Vou fazer um exemplo como resposta 20/10/2020 às 12:45
  • Obrigado, estou aguardando a resposta 20/10/2020 às 13:04

1 Resposta 1

0

Então, para fazer isso você teria que fazer uma requisição assíncrona por meio de Ajax, passando seu devido filtro.

Vale lembrar que você está utilizando o campo "nome" para filtrar os usuários, e isso não é uma boa prática, visto que podemos ter usuários com o mesmo nome. Aconselho você a usar os IDs deles.

Agora, vamos ao código:

JS

var select = document.querySelector('#seu_select')

select.onchange = function() { // assim, toda vez que ocorrer uma mudança no select ele executará a função
    var valor = this.value

    var xhr = new XMLHttpRequest(); 

    xhr.open("GET", "seu_backend.php?nome="+ valor); // envia a requisição a url com o seu filtro
    xhr.send(null);

    xhr.onreadystatechange = function() { // chama uma função quando o documento for carregado 
        if(xhr.readyState === 4) { // verifica se a resposta foi de sucesso
            var user = JSON.parse(xhr.response) // pega o json do backend
            
            // agora é só você dar innerHTML nos respectivos campos, exemplo
            spanNome.innerHTML = user.nome_usuario
        }
    }
}

Com esse trecho de script, você já consegue o que quer. Só para observações, essa função que eu fiz é um jeito bem antigo, mas suportada muito bem. Existem bibliotecas que lidam com AJAX muito bem, se você tiver liberdade, talvez seja interessante procurar por jQuery ou outras. Também tem o método Fetch que já é suportado pela maioria dos navegadores.

Agora ao PHP, você vai precisar de um arquivo preparado esperando essa rota, e nele, quando você obter o registro do usuário em um array, dar um echo no resultado, e somente isso, por meio do json_encode. É bem importante você dar um exit() após o retorno dos dados;

$conn = // sua função de conexão
$sql = // sua query para obter o usuario, filtrando o usuario
$exec = // seu meio de executar as queries, lembre-se de dar bind no valor, e não botá-lo na query, evitando SQL Injection
if($query) {
 echo json_encode($query->fetch(PDO::FETCH_ASSOC);
exit();
}

Pronto, assim você vai conseguir o que quer, espero ter ajudado!!

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .