[SOLUCIONADO] cargar input text dependiente de otro input text

matrixre9 · #1 (**permalink**) 05/12/2013, 20:23

Ya había realizado esta pregunta pero aun no he encontrado respuesta por eso lo pongo de nuevo con otro nombre aquí en el foro

lo que quiero es lo siguiente:

tengo 3 campos de 3 texto

nombre
dirección
teléfono

tengo una tabla clientes 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.

0123 · #2 (**permalink**) 05/12/2013, 20:42

Buenas matrixre9,

Lo que pides requiere de demasiadas horas para que alguien te responda con la solucion. Si no sabes como hacerlo intenta recurrir algun framework con "autocomplete ajax search", aunque la verdad dudo que encuentres uno que haga justo lo que quieres.

No hablas de BBDD, asi que tu pregunta me asusta, jeje. MySQL?...

Necesitas una base de datos con la tabla de clientes.
Sistema AJAX con los inputs
Luego un lenguaje de servidor que busque lo que el usuario quiere en la tabla.
Que le envie la respuesta al navegador del usuario via JSON o a lo bloque
Que el usuario interactue con lo que llege.

Solo en pensarlo me da pereza. Demasiado trabajo. Lo que pides me parece dificil de hacer sin haber antes hecho una tabla en mysql, ni una busqueda con php y ni te cuento si no controlas JS.

Jo!... espero que notes mi tono de broma... pero lo que pides es simplemente dificil de hacer de buenas a primeras.

Creo que he dado con tu solucion, realmente me parece muy interesante si no tienes mas de 2000 clientes:

http://listjs.com/examples

Funciona que asusta!

Un saludo!

matrixre9 · #3 (**permalink**) 05/12/2013, 22:02

claro que uso Mysql en mi pregunta que hago indico que tengo una tabla clientes con los campos que describo

eso quiere decir...para ser mas especifico

tengo una base de datos que se llama servicios

La cual tiene varias tablas (no importa poner todas) ya que con la que quiero trabajar de llama CLIENTES esta tiene 3 campos

id_cliente
dirección
teléfono
(arriba lo describí)

ya pude insertar datos a las tablas, función de consultas, auto completar en algunos input text, ahora mi problema es el de auto llenar las imput text cuando se cumpla la condición que arriba describí

************************************************** ******************
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.
************************************************** *****************
espero se entienda mejor ahora

gracias

Bier · #4 (**permalink**) 05/12/2013, 22:56

Cita:

Iniciado por 0123

Buenas matrixre9,

Creo que he dado con tu solucion, realmente me parece muy interesante si no tienes mas de 2000 clientes:

http://listjs.com/examples

Un saludo!

Funciona maravilloso, pero 2,000 clientes me parecen muchísimos ¿no?
Yo recomendaría máximo 100 precargados.

Gracias por compartirlo.

matrixre9 · #5 (**permalink**) 05/12/2013, 23:02

si funciona muy bien pero pues yo no los tengo pre cargados en el código sino en una base de datos :/, espero alguien me pueda ayudar.

Bier · #6 (**permalink**) 05/12/2013, 23:41

Cita:

Iniciado por matrixre9

si funciona muy bien pero pues yo no los tengo pre cargados en el código sino en una base de datos :/, espero alguien me pueda ayudar.

Tu base de datos puede contener cientos, miles o millones, ese no es problema.

Lo que digo es que para sortar (en base al ejemplo), solo se deberán precargar unos 200 a lo mucho.

Creo este ejemplo no resuelve tu necesidad... Más bien requieres ajax.

matrixre9 · #7 (**permalink**) 06/12/2013, 09:00

Exactoo!! es lo que puse desde el principio que si alguien me puede ayudar para hacerlo con Ajax

el ejemplo que puso 0123 es bueno pero ami no me sirve para lo que quiero lograr.

alguien podría ayudarme porfavor?

gracias por las respuestas hasta ahora de todas maneras :)

Bier · #8 (**permalink**) 06/12/2013, 09:41

Pues tu necesidad es un poco especial.
Hace algunos meses vi que lo resolvían en una página de una persona que tiene un curso de PHP MySQL, se llama Cesar Cansino.

Busca en su web y ahí encontrarás la solución.

Saludos

matrixre9 · #9 (**permalink**) 06/12/2013, 10:22

Cita:

Iniciado por Bier

Pues tu necesidad es un poco especial.
Hace algunos meses vi que lo resolvían en una página de una persona que tiene un curso de PHP MySQL, se llama Cesar Cansino.

Busca en su web y ahí encontrarás la solución.

Saludos

Ok lo revisare y avisare que pasa gracias :)

matrixre9 · #10 (**permalink**) 06/12/2013, 14:11

Algo como esto es lo que quiero

html

Código:

<form id="formulario" name="formulario" method="post" action="" onSubmit="alert('enviado'); return false;">
    <label>Id:</label>
    <input type="text" name="inId" id="inId" /><small>(introduce " JE ")</small>
    <br>
    <label>Nombre:</label>
    <input type="text" name="inNombre" id="inNombre" readonly />
    <br>
    <label>Apellido:</label>
    <input type="text" name="inApellido" id="inApellido" readonly/>
    <br>
    <input type="submit" name="button" id="button" value="Enviar" disabled />
</form>

js

Código:

$("#inId").on("blur",llenado);

function llenado(){
    var id = $("#inId").val();
    if(id == "JE"){
        var nombre = "Juanito";
        var apellido = "Escarcha";
        
        $("#button").attr("disabled", false);
    }
    else {
        var nombre = "No disponible";
        var apellido = "No disponible";
        $("#button").attr("disabled", true);
    }
    
    $("#inNombre").val(nombre);
    $("#inApellido").val(apellido);
}

solo que en vez de que en el archivo js estén constantes los valores juanito y escarcha, se realice una consulta a la base de datos para obtener los datos que se quieren y mostrarlos en los texbox tal como en este ejemplo

alguien podría ayudarme en eso, gracias

Bier · #11 (**permalink**) 06/12/2013, 14:25

Hola matrixre9,

¿Buscaste la página de Cansino?
Lo que buscas resolver requiere algo de trabajo,
Si deseas encontrarlo resuelto, considero va a ser no sencillo. Te recomiendo busques en foros en inglés, ahí suele haber respuestas a ese tipo de requerimientos.

Pregunta: En la base de datos que deseas consultar ¿cuantos registros tienes? Si no son muchos registros se puede hacer con la rutina que muestras, pero de ser muchos registros vas a requerir un desarrollo.

matrixre9 · #12 (**permalink**) 06/12/2013, 18:27

Si busque,ese código que pongo lo encontré en esa pagina y pues ahorita en la base de datos no tengo 3 registros pero se van a ir llenando mas con el uso de la pagina así que la forma que utilizan en el código que pongo no me sirve porque son datos fijos y necesito la consulta a base de datos

pero bueno seguiré buscando pues, gracias

en si ya se como activar el evento onchance para direccionar a la pagina de la consulta lo que quiero saber es como mandar los datos de la consulta a la pagina donde se realiza el evento onchange

matrixre9 · #13 (**permalink**) 10/12/2013, 22:32

bien ya porfin pude hacerlo gracias por los que contestaron :)

Bier · #14 (**permalink**) 11/12/2013, 01:01

Cita:

Iniciado por matrixre9

bien ya porfin pude hacerlo gracias por los que contestaron :)

No veo tu respuesta de la solución.
En este tipo de foros se publica la solución, de lo contrario otros deberán seguir buscando lo que ya encontraste.

sludos

matrixre9 · #15 (**permalink**) 31/10/2014, 13:11

perdon por no haber contestado antes, proximanete subire la respuesta de como lo logre, gracias nuevamente

Bier · #16 (**permalink**) 05/11/2014, 10:27

Cita:

Iniciado por matrixre9

perdon por no haber contestado antes, proximanete subire la respuesta de como lo logre, gracias nuevamente

AL principio, cuando preguntaste te urgía... ahora al paso de semanas ¿no puedes publicar la respuesta?

es la forma de enriquecer estos foros, de otra manera no tienen sentido.

matrixre9 · #17 (**permalink**) 05/11/2014, 11:54

Lo que hace el código que pongo a continuación es lo siguiente

- En el campo nombre al ir ingresando los datos hace una consulta a la base de datos para mostrarme una lista desplegable de las coincidencias de nombres que se vayan encontrando.

- Al llenar los datos del campo nombre y quitar el foco si el nombre ya existe nos trae los datos correspondientes en dirección y teléfono.

- En caso que el nombre no este registrado nos deja estos campos vacíos.

tengo una base de datos que se llama

usuario y sus campos son nom_cliente, direccion, tel

Bueno enseguida pongo el formulario

formapp.php

Código PHP:

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<?php

include ("conexion.php");

?>

<script type="text/javascript" src="jquery/js/jquery-1.4.2.min.js"></script> 

    <script type="text/javascript" src="jquery/js/jquery-ui-1.8.2.custom.min.js"></script> 

    <script type="text/javascript"> //consultar datos y autollenar campos

    

 

        jQuery(document).ready(function(){

            $('#nombre').autocomplete({source:'consul_autocompletar.php', minLength:1});

            

            $('#nombre').focusout (function(){

            var valor=$(this).val();

            

            $.ajax ({

            url:"consul_autocompletar2.php",

            type:"POST",

            dataType:"json",

            data: {val:valor},

            success: function(res){

            $('#direccion').val(res.direccion)

            $('#tel').val(res.tel)

            

            

            }

            

            })

        

            })

            

        });

         

    </script> 

 
 
<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Prueba autollenado</title>

</head>

 
<body>

 
<form name="form" method="post"><!-- manda los datos al frame -->

               <fieldset style="border: 5px solid #000000;">

                <legend>CLIENTE</legend>

                <table>

                 <tr>

                  <td>NOMBRE</td>

                  <td><input type="text" name="nombre" id="nombre" style="text-transform:uppercase;" onKeyUp="javascript:this.value=this.value.toUpperCase();" size=80/></td>

                  </tr>

                  <tr>

                  <td>DIRECCION</td>

                  <td><input type="text" name="direccion" id="direccion" size=80/>

                  </td>

                  </tr>

                  <tr>

                  <td>TELEFONO</td>

                  <td><input type="text" name="tel" size=80 id="tel"/>

                  </td>

                 </tr>

                 </table>

                  

</body>

</html>

consul_autocompletar.php (lista desplegable al ir escribiendo)

Código PHP:

  <?php

 
if ( !isset($_REQUEST['term']) )

    exit;

 
$dblink = mysql_connect('localhost', 'root', 'root') or die( mysql_error() );

mysql_select_db('usuario');

 
$rs = mysql_query('select distinct nom_cliente from usuario_t where nom_cliente like "'. mysql_real_escape_string($_REQUEST['term']) .'%" order by nom_cliente asc limit 0,10', $dblink);

 
$data = array();

if ( $rs && mysql_num_rows($rs) )

{

    while( $row = mysql_fetch_array($rs, MYSQL_ASSOC) )

    {

        $data[] = array(

            'label' => $row['nom_cliente'],

            'value' => $row['nom_cliente']

            

 
        );

    }

}

 
echo json_encode($data);

//flush();

?>

consul_autocompletar2.php (llenar dirección y teléfono)

Código PHP:

  <?php

 
if ( !isset($_POST['val']) )

    exit;

 
$dblink = mysql_connect('localhost', 'root', 'root') or die( mysql_error() );

mysql_select_db('usuario');

 
$data = array();

 
$rs = mysql_query("select direccion, tel from usuario_t where nom_cliente='".$_POST['val']."';", $dblink);

 $nombre_cliente=mysql_fetch_array($rs);

 

 $data["direccion"]=$nombre_cliente["direccion"];

 $data["tel"]=$nombre_cliente["tel"];

 

 echo json_encode($data);

 ?>

conexion.php (archivo de coneccion a la base de datos)

Código PHP:

  <?php

 
$host="localhost";

$user="root";

$pw="root";

$db="usuario";

 
$con=mysql_connect($host,$user,$pw)

or die ("problemas al conectar server");//conectar servidor

 
mysql_select_db($db,$con)

or die ("problema al conectar bd");//conectar base de datos

 
?>

Bueno ya solo se tienen que agregar las librerías que se marcan en el inicio del script en el archivo formapp.php

jquery-1.4.2.min.js
jquery-ui-1.8.2.custom.min.js

subiria el archivo completo pero no se como subir earchivos xD

omarfr · #18 (**permalink**) 30/11/2014, 19:47

Hola matrixre9
Muchas gracias por publicar el código.
Estoy tratando de aplicarlo a un ejemplo similar, con otra bd, pero por alguna razón no me funciona.
Será que me puedes explicar en que momento el formulario ejecuta el código de consul_autocompletar2?.
No veo un submit o un onblur...

matrixre9 · #19 (**permalink**) 30/11/2014, 23:27

Hola que tal, en esta parte es donde inicia el evento al estar escribiendo el campo

esta parte lo que hace es para completar las coincidiencias que existan de lo que se va escribiendo

$('#nombre').autocomplete({source:'consul_autocomp letar.php', minLength:1});

y la parte que sigue se ejecuta con la función focusout (cuando el foco del campo se pierde)

$('#nombre').focusout (function(){
var valor=$(this).val();

$.ajax ({
url:"consul_autocompletar2.php",
type:"POST",
dataType:"json",
data: {val:valor},
success: function(res){
$('#direccion').val(res.direccion)
$('#tel').val(res.tel)

saludos

cecitn · #20 (**permalink**) 01/12/2014, 07:35

Muy buenooo :) lo voy a probar al código..!!! no entiendo ajax pero algo leí, soy nueva con php.!

matrixre9 · #21 (**permalink**) 04/12/2014, 22:52

Cita:

Iniciado por cecitn

Muy buenooo :) lo voy a probar al código..!!! no entiendo ajax pero algo leí, soy nueva con php.!

Yo tampoco entiendo mucho ya que solo lo he utilizado para lograr hacer esto asi que si yo pude se que también podrás, igual inténtalo con el código y cualquier duda estoy a tus ordenes y de quien sea.

saludos

alopez064 · #22 (**permalink**) 21/03/2015, 23:18

jQuery(document).ready(function(){
$('#nombre').autocomplete({source:'consul_autocomp letar.php', minLength:1});

$('#nombre').focusout (function(){
var valor=$(this).val();

$.ajax ({
url:"consul_autocompletar2.php",
type:"POST",
dataType:"json",
data: {val:valor},
success: function(res){
$('#direccion').val(res.direccion)
$('#tel').val(res.tel)

}

})

})

});

<form name="form" method="post">
<fieldset style="border: 5px solid #000000;">
<legend>CLIENTE</legend>
<table>
<tr>
<td>NOMBRE</td>
<td><input type="text" name="nombre" id="nombre" style="text-transform:uppercase;" onKeyUp="javascript:this.value=this.value.toUpperC ase();" size=80/></td>
</tr>
<tr>
<td>DIRECCION</td>
<td><input type="text" name="direccion" id="direccion" size=80/>
</td>
</tr>
<tr>
<td>TELEFONO</td>
<td><input type="text" name="tel" size=80 id="tel"/>
</td>
</tr>
</table>

</body>

buen aporte me pareció importante, era lo que buscaba pero con algunos problemas , obvio que tienen solucion, el NAME y el ID del input nom_cliente, deberia llamarse igual ya que es el que identifica en campo de la base de datos quedaria e igual que los identificadores del script autocompletado quedaria asi :

jQuery(document).ready(function(){
$('#nom_cliente').autocomplete({source:'consul_aut ocompletar.php', minLength:1});

$('#nom_cliente').focusout (function(){
var valor=$(this).val();

$.ajax ({
url:"consul_autocompletar2.php",
type:"POST",
dataType:"json",
data: {val:valor},
success: function(res){
$('#direccion').val(res.direccion)
$('#tel').val(res.tel)

}

})

})

});

-----------------
<form name="form" method="post">
<fieldset style="border: 5px solid #000000;">
<legend>CLIENTE</legend>
<table>
<tr>
<td>NOMBRE</td>
<td><input type="text" name="nom_cliente" id="nom_cliente" style="text-transform:uppercase;" onKeyUp="javascript:this.value=this.value.toUpperC ase();" size=80/></td>
</tr>
----
ahhh y otra cosa no funciona el autocompletar me podrias regalar el codigo con las librerias creo que ese es mi problema

matrixre9 · #23 (**permalink**) 24/03/2015, 20:47

Que tal amigo mira aquí esta en un rar la carpeta que usaba donde están las librerías

https://www.dropbox.com/s/enucdaxwit...query.rar?dl=0

revisalo y cualquier cosa estoy a tus ordenes, a disculpa la respuesta tan tarde

matrixre9 · #24 (**permalink**) 24/03/2015, 20:53

Sobre el código aquí esta en la parte de arriba es el script donde mando pedir las librerías a la carpeta que las contiene

Código PHP:

  <script type="text/javascript" src="jquery/js/jquery-1.4.2.min.js"></script>  

    <script type="text/javascript" src="jquery/js/jquery-ui-1.8.2.custom.min.js"></script>  

    <script type="text/javascript"> //consultar datos y autollenar campos 

     

  

        jQuery(document).ready(function(){ 

            $('#nombre').autocomplete({source:'consul_autocompletar.php', minLength:1}); 

             

            $('#nombre').focusout (function(){ 

            var valor=$(this).val(); 

             

            $.ajax ({ 

            url:"consul_autocompletar2.php", 

            type:"POST", 

            dataType:"json", 

            data: {val:valor}, 

            success: function(res){ 

            $('#direccion').val(res.direccion) 

            $('#tel').val(res.tel) 

             

             

            } 

             

            }) 

         

            }) 

             

        }); 

          

    </script>

Cualquier cosa quedo a tus ordenes

matrixre9 · #25 (**permalink**) 25/03/2015, 16:54

Si puedes poner si te sirvió seria genial :)

twisterevolution · #26 (**permalink**) 02/08/2015, 07:17

matrixre9

Esta bueno es lo que necesito hacer, pero soy muy nuevo en esto, no logro hacer que me funcione pero creo que debe ser por algo muy básico, me podes ayudar e estado un día completo (24 horas) intentándolo y no lo logro no se si tendré que cargar alguna librería o algo así ayuda por favor.

tal vez por skype podríamos conversar para hacerlo mas en tiempo real.
te lo agardeceria enormemente
esta es mi base de datos estara algo mal aqui
yo entendí que tienes una tabla que se llama usuario y sus campos son nom_cliente, direccion, tel
en mi caso yo llamo a la Base de datos legaldoc
adjunto enlace de la foto de mi Base de Datos

https://www.dropbox.com/s/0s3tsbnr60krjgl/phpmyadmin.JPG?dl=0

en el codigo de consulta_autocompletar.php este es mi código
mi duda en mysql_querry en from usuario_t
eso esta bien, porque le agrega un a t

<?php

if ( !isset($_REQUEST['term']) )
exit;

$dblink = mysql_connect('localhost', 'root', '') or die( mysql_error() );
mysql_select_db('legaldoc');

$rs = mysql_query('SELECT distinct nom_cliente from usuario_t WHERE nom_cliente like "'. mysql_real_escape_string($_REQUEST['term']) .'%" order by nom_cliente asc limit 0,10', $dblink);

$data = array();
if ( $rs && mysql_num_rows($rs) )
{
while( $row = mysql_fetch_array($rs, MYSQL_ASSOC) )
{
$data[] = array(
'label' => $row['nom_cliente'],
'value' => $row['nom_cliente']

);
}
}

echo json_encode($data);
//flush();
?>