elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Rompecabezas de Bitcoin, Medio millón USD en premios


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  llenar inputs dependiente del dato de otro input
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: llenar inputs dependiente del dato de otro input  (Leído 15,870 veces)
matrixre9

Desconectado Desconectado

Mensajes: 1


Ver Perfil
llenar inputs dependiente del dato de otro input
« en: 7 Diciembre 2013, 20:07 pm »

Buenas tardes soy nuevo en el foro y espero no cometer errores al publicar esto..

tengo un problema en una pagina web que estoy realizando

lo que quiero es lo siguiente:

tengo 3 campos de texto(en la pagina)

nombre
dirección
teléfono

tengo una tabla clientes(base de datos) con los siguientes campos:

id_cliente
dirección
tel

quiero que cuando yo escriba en el campo de texto NOMBRE y una vez lleno cuando se quite el foco(evento onblur) se realice una consulta y con los resultados de esta si es que el cliente existe automáticamente se llenen los campos DIRECCIÓN y TELÉFONO y si no existe simplemente no haga nada los deje así tal cual para poder ser editados manualmente.

se que debo utilizar Ajax para hacerlo pero no se como hacerlo, alguien podría ayudarme.

GRACIAS.


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.855



Ver Perfil WWW
Re: llenar inputs dependiente del dato de otro input
« Respuesta #1 en: 13 Diciembre 2013, 03:05 am »

La menera mas sencilla de implementarlo es usar jQuery ya que te va a simplificar mucho el código. Me aburro un poco asi que te he montado un ejemplo usando JSON.

index.html
Código
  1. <!doctype html>
  2. <html lang="es">
  3.   <meta charset="UTF-8">
  4.   <title>POC Ajax Cliente</title>
  5. </head>
  6.   <div id="cliente">
  7.      <form action="" method="POST">
  8.         <label for="nombre">Nombre</label>
  9.         <input type="text" id="nombre" name="nombre" value="" placeholder="Nombre.." />
  10.         <br />
  11.         <label for="direccion">Dirección</label>
  12.         <input type="text" id="direccion" name="direccion" value="" placeholder="Dirección.." />
  13.         <br />
  14.         <label for="telefono">Teléfono</label>
  15.         <input type="text" id="telefono" name="telefono" value="" placeholder="Teléfono..." />
  16.      </form>
  17.   </div>
  18.   <div id="estado">Esperando input.</div>
  19.   <!-- Scripts -->
  20.   <script type="text/javascript" src="jquery.js"></script>
  21.   <script type="text/javascript" src="cliente.js"></script>
  22. </body>
  23. </html>

cliente.js
Código
  1. $(function(){
  2.   /* Ponemos evento blur a la escucha sobre id nombre en id cliente. */
  3.   $('#cliente').on('blur','#nombre',function(){
  4.      /* Obtenemos el valor del campo */
  5.      var valor = this.value;
  6.      /* Si la longitud del valor es mayor a 2 caracteres.. */
  7.      if(valor.length>=3){
  8.  
  9.         /* Cambiamos el estado.. */
  10.         $('#estado').html('Cargando datos de servidor...');
  11.  
  12.         /* Hacemos la consulta ajax */
  13.         var consulta = $.ajax({
  14.            type:'POST',
  15.            url:'cliente.php',
  16.            data:{nombre:valor},
  17.            dataType:'JSON'
  18.         });
  19.  
  20.         /* En caso de que se haya retornado bien.. */
  21.         consulta.done(function(data){
  22.            if(data.error!==undefined){
  23.               $('#estado').html('Ha ocurrido un error: '+data.error);
  24.               return false;
  25.            } else {
  26.               if(data.telefono!==undefined){$('#cliente #telefono').val(data.telefono);}
  27.               if(data.direccion!==undefined){$('#cliente #direccion').val(data.direccion);}
  28.               $('#estado').html('Datos cargados..');
  29.               return true;
  30.            }
  31.         });
  32.  
  33.         /* Si la consulta ha fallado.. */
  34.         consulta.fail(function(){
  35.            $('#estado').html('Ha habido un error contactando el servidor.');
  36.            return false;
  37.         });
  38.  
  39.      } else {
  40.         /* Mostrar error */
  41.         $('#estado').html('El nombre tener una longitud mayor a 2 caracteres...');
  42.         return false;
  43.      }
  44.   });
  45. });

cliente.php
Código
  1. <?php
  2. if(!empty($_POST['nombre'])){
  3.  
  4.   $nombre = $_POST['nombre'];
  5.  
  6.   if($nombre==='juan'){
  7.      $return = array('telefono'=>'611611611','direccion'=>'Una calle que no existe, Madrid');
  8.   } elseif($nombre=='maria') {
  9.      $return = array('telefono'=>'666666666','direccion'=>'call del diablo, Pais de las maravillas');
  10.   } else {
  11.      $return = array('error'=>'El nombre no esta guardado en la base de datos');
  12.   }
  13.  
  14.   die(json_encode($return));
  15. }
  16. ?>

Obviamente la idea es cargar los datos de la BD en vez de utilizar simples IF's pero te haces una idea... es meter en un array telefono y direccion y hacer que el script muera (die) imprimiendo el array convertido en json (json_encode).

Links sobre el tema:

jQuery - http://jquery.com/
jQuery ajax - http://api.jquery.com/jQuery.ajax/
PHP json_encode  - http://www.php.net/json_encode

Saludos


En línea

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
[Python] Enviar un dato a traves de un input HTML « 1 2 »
Python
Kasswed 12 15,974 Último mensaje 22 Agosto 2009, 00:01 am
por Novlucker
¿Una variable es un dato o contiene un dato?
Programación General
theluigy13etv 6 4,965 Último mensaje 19 Agosto 2011, 23:01 pm
por theluigy13etv
ayuda a llenar una pila automaticamente ya tengo el vaciado solo me falta llenar
Java
smallville121 0 3,220 Último mensaje 21 Mayo 2012, 16:40 pm
por smallville121
Llenar columna de Grid view con dato de TextBox
.NET (C#, VB.NET, ASP)
Guillito 0 2,229 Último mensaje 15 Septiembre 2015, 05:30 am
por Guillito
Dependiente me atiende en catalán en Barcelona
Foro Libre
FJDA 7 2,603 Último mensaje 4 Febrero 2020, 23:37 pm
por FJDA
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines