Datalist with return of multiple fields in PHP

Question

After some researches manage to develop a datalist that recovers values directly from mysql records, with php only and displaying them by javascript. I wonder if it is possible to return the value of several fields, after filling one? For example, after finding the customer, the other fields such as telephone, address, date of birth are also filled in.

I’ll leave the code below to illustrate:

    <?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)
}

Answer 1

So to do this you would have to make an asynchronous request through Ajax, passing his due filter.

Remember that you are using the "name" field to filter users, and this is not good practice, since we may have users with the same name. I advise you to use their Ids.

Now, let’s go to the code:

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
        }
    }
}

With this snippet of script, you already get what you want. Just for observations, this function I did is a very old way, but supported very well. There are libraries that handle AJAX very well, if you have freedom, it might be interesting to look for jQuery or others. It also has the method Fetch which is already supported by most browsers.

Now in PHP, you’ll need a prepared file waiting for that route, and in it, when you get the user record in an array, echo the result, and only that, through the json_encode. It’s very important that you give one exit() after the return of the data;

$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();
}

There, so you’ll get what you want, I hope I’ve helped!!