SQL query taking dynamic Javascript field

Asked

Viewed 1,444 times

0

You could make an sql query by picking a field typed by the user in a form and automatically filling in the result in other fields?

php javascript html sql

  • You can do this using AJAX!

2 answers

2


Basic schema of how to query the database via Ajax in pure Javascript with JSON data return and filling in other form fields

1.) HTML form

This example form has 3 fields (nome, email and cidade). By entering a name and clicking OK, this "name" will be sent via Ajax to a PHP page that will query the database and return 2 information, email and cidade, concerning the "name" sent.

<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.) The Ajax system

In the code below in Javascript, I created a function carrega() which will be triggered at the click of the button OK form. It sends to the page verificar.php (example) the field value nome of the form and the reply on http.responseText is converted to JSON, JSON.parse(http.responseText);, and then the information for each field is filled in by its respective 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

On the PHP page you will receive the value of the field nome sent by form via AJAX, make the query in the database and return the result in JSON format:

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

}
?>

0

Below I made an example where you can modify and send the value using an ajax and do the query.

Type in the first field the word "Your" and it will complete the second and third.

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

Browser other questions tagged php javascript html sql

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