Foro de elhacker.net

Programación => Desarrollo Web => Mensaje iniciado por: matrixre9 en 7 Diciembre 2013, 20:07 pm


Título: llenar inputs dependiente del dato de otro input
Publicado por: matrixre9 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.

Título: Re: llenar inputs dependiente del dato de otro input
Publicado por: #!drvy 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">
  4.    <meta charset="UTF-8">
  5.    <title>POC Ajax Cliente</title>
  6. </head>
  8.    <div id="cliente">
  9.       <form action="" method="POST">
  10.          <label for="nombre">Nombre</label>
  11.          <input type="text" id="nombre" name="nombre" value="" placeholder="Nombre.." />
  12.          <br />
  13.          <label for="direccion">Dirección</label>
  14.          <input type="text" id="direccion" name="direccion" value="" placeholder="Dirección.." />
  15.          <br />
  16.          <label for="telefono">Teléfono</label>
  17.          <input type="text" id="telefono" name="telefono" value="" placeholder="Teléfono..." />
  18.       </form>
  19.    </div>
  20.    <div id="estado">Esperando input.</div>
  21.    <!-- Scripts -->
  22.    <script type="text/javascript" src="jquery.js"></script>
  23.    <script type="text/javascript" src="cliente.js"></script>
  24. </body>
  25. </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


Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines