Formulario PHP con búsqueda y llenado automático de campos.

PHP LLENADO AUTOMATICO

Hola estimados lectores, en esta ocasión compartimos con ustedes el POST: “Formulario PHP con búsqueda y llenado automático de campos“. En este pequeño articulo veremos como conseguimos llenar un formulario de forma automática extrayendo la información desde la misma base de datos.

Gracias a esta técnica podremos ahorrarnos el trabajo de tipeo y llenado de varios campos por ejemplo en formularios de registro de datos.

En este caso como ejemplo vamos a llenar un Formulario de solicitud con los datos de Nombre, Documento de Identidad y dirección de cualquier cliente de forma automática que ya se encuentre registrado en una tabla llamada clientes.

Veamos a continuación los pasos a seguir.

Pasos para la creación de un formulario con llenado automático.

Nuestro proyecto necesitara de los siguientes pasos :

  1. Crear una base de datos llamada “dbpruebas” y una tabla llamada “clientes”.
  2. Registrar clientes a la tabla.
  3. Crear el archivo de apoyo “conecta.php” cual servirá para conectar el formulario con la tabla de clientes.
  4. Crear el archivo de apoyo “lista_nombre.php” el cual generará la lista de clientes en el text box.
  5. Crear el archivo de apoyo “busca_dni_dir.php” el cual servirá para que el formulario pueda llenar los campos correspondientes de forma automatica.
  6. Finalmente diseñar y codificar el formulario llamado “formulario_automatico.php“.

Paso 1 . Crear la base de datos y la tabla en MYSQL

Con el siguientes comandos realizamos este paso:

Para crear la base de datos:

CREATE DATABASE dbpruebas;

Ingresar a la base de datos creada;

USE dbpruebas;

Crear la tabla “clientes”

CREATE TABLE IF NOT EXISTS clientes ( id int(11) NOT NULL, 
nombre varchar(25) NOT NULL, 
dni varchar(20) NOT NULL, 
direccion (25) NOT NULL, 
PRIMARY KEY (id) ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Paso 2. Ingresar registros en la Tabla clientes.

Para nuestras pruebas llenaremos algunos clientes y o haremos mediante el siguiente comando:

INSERT INTO clientes
(id,nombre,dni,direccion)
VALUES
	('1','Juan Perez Sotelo','67367883','Calle Cuzco 123'),
	('2','Julio Pastor Robles','98676732','Calle Lima 675'),
	('3','Julio Vilca Leon','78292911','Av Peru 654'),
	('4','Esther Vilca Poma','43233456','Calle los Pinos 321'),
	('5','Maria Blas Carpio','34456678','Av. Heroes 674'),
	('6','Juan Ochoa Dazo','73223344','Jr Junin 6765'),
	('7','Maria Silva Fuerte','84633456','Calle los Nogales 564'),
	('8','Ana Valdez Torres','35767288','Av. Naranjal 4355'),
	('9','Carlos Torres Torres','24572772','Calle Basilia 7688'),
	('10','Dario Paz Garay','72772232','AV. Pizarro 7654');

Para revisar que los datos ya se ingresaron a la tabla ejecutar:

select * from clientes;
php mysql Formulario PHP con búsqueda y llenado automático

Paso 3. Crear el archivo “conecta.php”

El siguiente archivo “conecta.php” nos servirá para comunicar al formulario y sus archivos de apoyo con nuestra base de datos.

IMPORTANTE : Recuerda que debes editar este archivo con los datos de usuario y contraseña de tu base de datos.

<?php
   define('DB_SERVER', "localhost");
   define('DB_USERNAME', "tu_usuario");
   define('DB_PASSWORD', "tu_clave");
   define('DB_DATABASE', "tu_base_de_datos");
   $conn=mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
  ?>

Paso 4. Crear el archivo de apoyo “lista_cliente.php”

Este archivo servirá de apoyo al formulario principal para generar una lista de coincidencias con la tabla de la base de datos a partir de los primeros caracteres ingresados en la caja de texto del nombre llamada Nombre Cliente.

<?php
// conecta a la base de datos
include("conectar.php"); 

if (isset($_GET['term'])) {
 $find_nombre = find_nombre($conn, $_GET['term']);
 $id_List = array();
 foreach($find_nombre as $nombre){
 $id_List[] = $nombre['nombre'];
 }
 echo json_encode($id_List);
}
 
function find_nombre($conn , $term){ 
 $query = "SELECT * FROM clientes WHERE nombre LIKE '%".$term."%'";
 $result = mysqli_query($conn, $query); 
 $data = mysqli_fetch_all($result,MYSQLI_ASSOC);
 return $data; 
}
 
?>

Paso 5. Crear el archivo de apoyo “busca_dni_dir.php”

Este archivo hace interactuar al formulario con la tabla clientes para el auto rellenado de los campos DNI y DIRECCION.

<?php

// consigue el nombre desde el formulario
$search_cliente = $_REQUEST['search_cliente'];

// Coneccion a la base de datos

include("conectar.php"); 

if ($search_cliente !== "") {
	
	// Se busca el dni y la direccion correspondiente al nombre
	$query = mysqli_query($con, "SELECT * FROM clientes WHERE nombre='$search_cliente'");

	$row = mysqli_fetch_array($query);

	// consigue el dni
	$dni = $row["dni"];

	// consigue la direccion
	$direccion = $row["direccion"];
}

// lo almacena un un arreglo
$result = array("$dni", "$direccion");

// lo envia al formulario
$myJSON = json_encode($result);
echo $myJSON;
?>

Paso 6. Crear el formulario PHP “formulario_automatico.php”.

Este ultimo paso es el mas importante pues en este formulario vamos a colocar los scripts que harán el trabajo de búsqueda y auto llenado de campos.

El campo nombre nos arrojara una lista con todos los datos coincidentes a medida que vamos tipeando caracteres, la lista se hará mas precisa a medida que ingresemos mas datos. Al final con un solo clic seleccionaremos el nombre del cliente correcto.

Luego haciendo 2 clics en el campo nombre automáticamente se llenaran con los datos de DNI y DIRECCION correspondiente al cliente.

Este formulario se apoya en los archivos “lista_cliente.php” y ” busca_dni_dir.php ” y a su ves estos dos se apoyan en el archivo “conecta.php

Estas tareas de llenado y búsqueda automática funcionan gracias al uso de scripts de JAVA.

Veamos a continuación el código de nuestro formulario el cual llamaremos “formulario_automatico.php

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Formulario de Solicitudes</title>
<link rel="stylesheet" type="text/css" href="total/view.css" media="all">

<script type="text/javascript" src="view.js"></script>
  
</head>
<body id="main_body" >
	
	<img id="top" src="top.png" alt="">
	<div id="form_container">
	
		<h1><a>Formulario de Solicitudes</a></h1>
      
		<form id="form_33876" class="appnitro"  method="post" action="">
		<div class="form_description">
		<h2>Formulario de Solicitudes</h2>
		<p></p>
		</div>						
		<ul >
		
         
		<li id="li_1" >
		<label class="description">Nombre Cliente </label>
		<div>
        <input type="text" placeholder="Cliente" name="search_cliente" id='search_cliente' 
        ondblclick="Doble_Clic(this.value)" value="">
        </div> 
		</li>
              
        <li id="li_2" >
		<label class="description">Documento de Identidad </label>
		<div>
		<input id="dni" name="dni" class="element text medium" type="text" maxlength="255" value=""/> 
		</div> 
		</li>
        
        <li id="li_3" >
		<label class="description" >Direccion del cliente </label>
		<div>
		<input id="direccion" name="direccion" class="element text large" type="text" maxlength="255" value=""/> 
		</div> 
		</li>
              
        <li id="li_4" >
		<label class="description">Solicitud </label>
		<div>
		<textarea id="element_4" name="element_4" class="element textarea small"></textarea> 
		</div> 
		</li>
			
		<li class="buttons">
		<input id="saveForm" class="button_text" type="submit" name="submit" value="Registrar" />
		</li>
		</ul>
		
        </form>	
      
      
<!-- ESTE SCRIPT GENERA LA LISTA DE COINCIDENCIAS DEL NOMBRE DE CLIENTE -->
      
<!-- jQuery -->      
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
<!-- jQuery UI -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
  
  
<script type="text/javascript">
  $(function() {
     $( "#search_cliente" ).autocomplete({
       source: 'lista_cliente.php',
     });
  });
</script>       
   
  <!-- ESTE SCRIPT REALIZA EL AUTOLLENADO DEL DNI Y LA DIRECCION LUEGO DE HACER DOBLE CLIK -->
  <script>

		function Doble_Clic(str) {
			if (str.length == 0) {
				document.getElementById("dni").value = "";
				document.getElementById("direccion").value = "";
				return;
			}
			else {

				var xmlhttp = new XMLHttpRequest();
				xmlhttp.onreadystatechange = function ()
                {

					if (this.readyState == 4 && this.status == 200)
                    {
					var myObj = JSON.parse(this.responseText);
					document.getElementById
					("dni").value = myObj[0];
             		document.getElementById(
					"direccion").value = myObj[1];
					}
				};
				xmlhttp.open("GET", "busca_dni_dir.php?search_cliente=" + str, true);
				xmlhttp.send();
			}
		}
	</script>      
  
      
	</div>
	<img id="bottom" src="bottom.png" alt="">
	</body>
</html>

Nuestro formulario tendrá este aspecto.

Formulario PHP con búsqueda y llenado automático de campos

El formulario puede ser direccionado finalmente a otra tabla para que se registren los datos ingresados cosa que puedes hacer muy fácilmente editando el action=”” del formulario al respectivo SCRIPT de procesamiento.

En el siguiente video veras el funcionamiento de nuestro pequeño sistema.

Resumen de todos los archivos del sistema.

Recuerda finalmente que nuestro pequeño sistema contara con los siguientes elementos:

En la carpeta TOTAL se encuentra el archivo de estylo CSS para el formato visual del formulario.

SI deseas descargar el sistema completo ingresa al siguiente LINK.

SISTEMA_FORMULARIO_AUTOMATICO

Eso ha sido todo amigos en este post ” Formulario PHP con búsqueda y llenado automático de campos” esperamos que nuestro pequeño aporte en algún momento te sea de utilidad.

Recuerda que una manera de ayudarnos o agradecer nuestro trabajo es visitando a los anunciantes que aparecen a lo largo del post. Gracias!
Recuerda también que puedes visitar todo el contenido de nuestro blog de informática en :

TODOS LOS POSTS DE INFORMATICA.

Tambien puedes visitar nuestro canal de youtube en :

CANAL DE YOUTUBE TECNOCIENCIA

Agregue un comentario

Su dirección de correo no se hará público. Los campos requeridos están marcados *