Teria como fazer uma consulta sql pegando um campo digitado pelo usuário em um formulário e preenchendo automaticamente o resultado em outros campos?
2 Respostas
Esquema básico de como fazer uma consulta ao banco via Ajax em JavaScript puro com retorno de dados em JSON e preenchendo outros campos do formulário
1.) Formulário HTML
Este formulário de exemplo tem 3 campos (nome
, email
e cidade
). Ao digitar um nome e clicar em OK, este "nome" será enviado via Ajax para uma página PHP que fará a consulta no banco de dados e retornar 2 informações, email
e cidade
, relativas ao "nome" enviado.
<input type="text" id="nome" name="nome" placeholder="Digite um nome e clique OK" />
<input type="button" onclick="carrega()" value="OK" />
<br />
<input type="text" id="email" placeholder="E-mail" disabled="disabled" />
<br />
<input type="text" id="cidade" placeholder="Cidade" disabled="disabled" />
2.) O Ajax
No código abaixo em JavaScript, criei uma função carrega()
que será disparada ao clique do botão OK do formulário. Ele envia para a página verificar.php
(exemplo) o valor do campo nome
do formulário e a resposta em http.responseText
é convertida em JSON, JSON.parse(http.responseText);
, e em seguida as informações de cada campo são preenchidas pelo seu respectivo id
.
<script>
var http = false;
http = new XMLHttpRequest();
function carrega(){
var nome = document.getElementById('nome').value;
var url_="verificar.php?nome="+nome;
http.open("GET",url_,true);
http.onreadystatechange=function(){
if(http.readyState==4){
var retorno = JSON.parse(http.responseText);
document.getElementById('email').value = retorno.email;
document.getElementById('cidade').value = retorno.cidade;
}
}
http.send(null);
}
</script>
3.) PHP
Na página PHP você receberá o valor do campo nome
enviado pelo formulário via AJAX, fazer a consulta no banco e retornar o resultado em formato JSON:
<?php
$nome = $_GET['nome'];
if(isset($nome)){
$conn = new mysqli("host", "usuario", "senha", "banco");
$sql = "SELECT email,cidade from tabela where nome = '$nome'";
$resultados = $conn->query($sql);
$json = array();
while ($rowResultados = $resultados->fetch_assoc()) {
$dados = array(
'email' => $rowResultados['email'],
'cidade' => $rowResultados['cidade']
);
$json = $dados;
}
echo json_encode($json);
mysqli_close($conn);
}
?>
Abaixo fiz um exemplo onde você pode modificar e enviar o valor utilizando um ajax e fazer a consulta.
Digite no primeiro campo a palavra "mateus" e ele vai completar o segundo e o terceiro.
jQuery('#campo1').on('keyup',function(){
//Aqui você pode fazer um ajax enviando o valor digitado e operar
if(this.value == 'mateus'){
jQuery('#campo2').val('[email protected]');
jQuery('#campo3').val('(81) 98615-3161');
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="campo1">
<input type="text" id="campo2">
<input type="text" id="campo3">