Autorellenado de inputs en formulario con Ajax/PHP/MySQL

[carlospc]

Hola a todos, tengo un problemon (mas por ingorancia que otra cosa)

Quiero cargar datos en un formulario desde una BD en MySQL.

Tengo un formulario ya echo, donde al poner un codigo deba cargar automaticamente de la BD algunos datos (Ejem: nombre, precio) dichos datos ya estan guardado, solo que al vender dicho producto no deben de rellenarse a mano esos detalles, sino debe de 'jalarlos' automaticamente de la BD...

Y no tengo idea de como hacerlo, se que debo hacerlo con Ajax para enviar el codigo ingresado y en el mismo formulario y sin recargarse se rellen los datos obtenidos de la consulta.

Espero haberme expresado bien, y si alguien pudiese darme una mano gracias de antemano.

Pdta: Tengo un ejemplo de combos dependiente (uno que carga datos segun lo seleccionado en el otro) pero ni idea de como adaptarlo

[Ximenitaa]

Hola !! yo tengo un ejemplo, y no es complicado, solo que no lo tengo a la mano, mas bien no recuerdo en que parte de mi mundo lo tengo pero prometo, en la tard te lo enviare .........

Saludos!!

[carlospc]

Si lo haces te lo agradecería un monton, en mi perfil esta mi correo

[Ximenitaa]

mejor aqui lo agregamos para que mas personas aprendan:

Tenemos 3 archivos:
conec.php , obtendatos.php, ajax2.php

conec.php

Código PHP:

<?php
class conectarMySQL {
    //creamos las variables que vamos a utilizar en la conexion
    var $servidor; //servidor
    var $usuario; //usuario
    var $password; //password
    var $bd; //base de datos
    //creamos las variables para las consultas
    var $consulta; //aquí se guarda las consultas que se realizan
    var $enlace; //aquí se almacena la conexión con la bd, sí se ha producido
    var $resultado; //aquí se guardan los datos que se generen de una consulta
    var $datos; //aqui guardamos el numero de registros obtenidos en la consulta
    //constructor, donde se inicializan las variables
    function conectarMySQL($servidor,$usuario,$password,$bd) {
        $this->servidor=$servidor;
        $this->usuario=$usuario;
        $this->password=$password;
        $this->bd=$bd;
    }
    //conectamos con la base de datos
    function conectar() {
        //se realiza la conexión a la base de datos
        if($this->enlace=mysql_connect($this->servidor,$this->usuario,$this->password)) {
            //se intenta acceder a la base de datos que deseeamos
            if(mysql_select_db($this->bd,$this->enlace)) {
                //Sí es correcta 
            } else {
                //Si falla muestra el mensaje que el error está al acceder a la base de datos
                echo "No se ha podido seleccionar la  BD";
            }
        } else {
            //Si falla la conexión con la base de datos se muestra el mensaje
            echo "No se ha podido conectar a la bd";
        }                 
    }   
    function consultar($query) {
        //aquí se realizan las consultas a la base de datos
        $this->consulta=mysql_query($query,$this->enlace) or die (mysql_error());
    }    
    function obtendatos() {
        //aquí se obtienen los datos de la consulta
        $this->resultado=mysql_fetch_array($this->consulta);
        return $this->resultado;
    }   
    function numerodedatos() {
        //aquí se obtienen los datos de la consulta
        $this->datos=mysql_num_rows($this->consulta);
        return $this->datos;
    }   
    //cerramos la conexión con la base de datos
    function cerrarconexion() {
        mysql_close($this->enlace);
    }
    //libera el contenido que se encuentra en el atributo 
    function limpiaconsulta() {
        mysql_free_result($this->consulta);
    }
}
?>
 

[Ximenitaa]

obtendatos.php

Código PHP:

<?php
    include('conec.php');
    $valor = $_GET['valor'];
    $sql2 = new conectarMySQL("localhost", "root", "", "prueba");
    $sql2->conectar();
    $sql2->consultar("SELECT nombre, apaterno, amaterno FROM trabajadores WHERE id = '$valor' ");
    $row = $sql2->obtendatos();
    sleep(1);
    return $dat = $row['nombre'].'|'.$row['apaterno'].'|'.$row['amaterno'];
    $sql2->cerrarconexion();
    $sql2->limpiaconsulta();
?>
 

[Ximenitaa]

este es el ultimo

ajax2.php

Código PHP:

<?php
include('conec.php');
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>EMEH</title>
 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script >
    
    //funcion que limpia los demas campos
    function LimpiarInput(destino,destino2)
    {
        destino.value="";   
    }
    //funcion que llena los datos 
    function LlenarDatos(text,destino,destino2)
    {
        //alert(''+text);
        var datos = text.split('|'); //dividimos los datos para colocarlos en el lugar correcto     
        destino.value = datos[0];
        destino2.value = datos[1];
    }
    
    //fucion con la cual obtenemos  los datos 
    function obten_datos(arrastre,destino,destino2,destino3,destino4,destino5)
    {
        
        //alert("arrastre: "+arrastre+" destino: "+destino+" destino2: "+destino2+" destino3: "+destino3+" destino4: "+destino4+" destino5: "+destino5);
        destino = document.getElementById(destino);
        destino2 = document.getElementById(destino2);
 
        LimpiarInput(destino);
        LimpiarInput(destino2);
        
        if(arrastre.options[arrastre.selectedIndex].value != 0)
        {
            arrastre.disabled = true;
            destino.disabled = true;
            destino.value = 'Cargando Nombre....';
            destino2.disabled = true;
            destino2.value = 'Cargando ApellidoP....';
            
            $.ajax({
                type: 'get',
                dataType: 'text',
                url: 'obtendatos.php',
                data: {valor: arrastre.options[arrastre.selectedIndex].value},
                success: function(text){
                    LlenarDatos(text,destino,destino2,destino3,destino4,destino5);
                    arrastre.disabled = false;
                    
                    destino.disabled = false;
                    destino.readOnly = true;
                    
                    destino2.disabled = false;
                    destino2.readOnly = true;
                        }
            });     
        }
    }
</script>
</head>
<body>
 
<form id="form1" name="form1" method="post" action="">
 
  <table width="27%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="38%">Trabajador &nbsp;&nbsp; </td>
      <td width="62%"><label>
        <select name="name" id="name" onchange="javascipt:obten_datos(this,'nombre','apaterno','amaterno','puesto','rfc');">
          <option value="0">elige</option>
          <?php
            // creamos las opciones del select
            $sql = new conectarMySQL("localhost","root","","prueba");
            $sql->conectar();
            $sql->consultar("SELECT id, nombre FROM trabajadores");
            while ($row = $sql->obtendatos()){
                ?>
                    <option value="<?php echo $row['id']; ?>"> <?php echo $row['nombre'];?></option>
                    
                <?php
            }
            $sql->cerrarconexion();
            $sql->limpiaconsulta();
          ?>        
        </select>
      </label></td>
    </tr>
  </table> <br />
   
<table>
    <tr> 
        <td>Nombre          </td> 
        <td>Apellido Paterno</td>
        <td>Apellido Materno</td>
        
    </tr>
 
    <tr>   <td><label><input type="text" name="nombre"          id="nombre"    />       </label></td>
           <td><label><input type="text" name="apaterno"        id="apaterno"  />       </label></td>
           <td><label><input type="text" name="amaterno"        id="amaterno"  />       </label></td>
     
    </tr>          
</table> 
</form>
 
<br />
</body>
</html>
 

[Ximenitaa]

¬¬ se borro toda mi explicacion: Ahi voy de nuevo

conec.php generalmente no se le mueve nada, se hace la declaracion de variables que vamos a utilizar en obtendatos.php de todos modos ahi tiene una breve explicacion

obtendatos.php esto es lo normal, nuestra conexion a la bd, servidor, usuario, pass, bd, y hacemos una consulta a la misma.

ajax2.php aqui viene lo bueno

haces el llamado del jquery

Código PHP:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
 

haces la limpieza de los campos, si llegaras a agregar mas txt x ejm aqui lo dejas asi,no le muevas nada

Código PHP:

function LimpiarInput(destino,destino2)
 

aqui si quieres ir agregando mas text solo es cuestion de poner mas destinos destino3.value=datos[2]

Código PHP:

var datos = text.split('|'); //dividimos los datos para colocarlos en el lugar correcto     
        destino.value = datos[0];
        destino2.value = datos[1];
 

e ir agregando en cada uno de donde se requiera , se ve claro donde se agregan ya solo vas con la consecutiva, por ejm destino3, destino4 etc

al final ya solo tienes lo normal html, agregas tus txt's y ahi tngo un combo para que selecciono por ejemplo el solo nombre y en los txt's aparecen los demas datos, en tu base de datos, solo es cuestion de que tengas el id, nombre, apaterno, amaterno....


te dije que soy pesima explicando, intenta hacerlo y cualquier cosa me avisas .......... creditos a Skiper0125 que el me oriento a hacer todo esto...
Gracias skiper

Bueno me avisas................ Saludos

[JuJoGuAl]

Prove eso pero no me funciona :S y de verdad necesito esto.. :S

[JuJoGuAl]

Por si alguien busca esto y el ejemplo de Ximenitaa no le funciona yo probe este y es justo lo que buscaba: http://www.w3schools.com/PHP/php_ajax_xml.asp

[Ximenitaa]

claro que funciona, aqui dejo otro ejemplo similar, y lo acabo de verificar y funciona perfectamente...

conec.php

Código PHP:

<?php
class conectarMySQL {
    //creamos las variables que vamos a utilizar en la conexion
    var $servidor; //servidor
    var $usuario; //usuario
    var $password; //password
    var $bd; //base de datos
    //creamos las variables para las consultas
    var $consulta; //aquí se guarda las consultas que se realizan
    var $enlace; //aquí se almacena la conexión con la bd, sí se ha producido
    var $resultado; //aquí se guardan los datos que se generen de una consulta
    var $datos; //aqui guardamos el numero de registros obtenidos en la consulta
    //constructor, donde se inicializan las variables
    function conectarMySQL($servidor,$usuario,$password,$bd) {
        $this->servidor=$servidor;
        $this->usuario=$usuario;
        $this->password=$password;
        $this->bd=$bd;
    }
    //conectamos con la base de datos
    function conectar() {
        //se realiza la conexión a la base de datos
        if($this->enlace=mysql_connect($this->servidor,$this->usuario,$this->password)) {
            //se intenta acceder a la base de datos que deseeamos
            if(mysql_select_db($this->bd,$this->enlace)) {
                //Sí es correcta 
            } else {
                //Si falla muestra el mensaje que el error está al acceder a la base de datos
                echo "No se ha podido seleccionar la  BD";
            }
        } else {
            //Si falla la conexión con la base de datos se muestra el mensaje
            echo "No se ha podido conectar a la bd";
        }                 
    }   
    function consultar($query) {
        //aquí se realizan las consultas a la base de datos
        $this->consulta=mysql_query($query,$this->enlace) or die (mysql_error());
    }    
    function obtendatos() {
        //aquí se obtienen los datos de la consulta
        $this->resultado=mysql_fetch_array($this->consulta);
        return $this->resultado;
    }   
    function numerodedatos() {
        //aquí se obtienen los datos de la consulta
        $this->datos=mysql_num_rows($this->consulta);
        return $this->datos;
    }   
    //cerramos la conexión con la base de datos
    function cerrarconexion() {
        mysql_close($this->enlace);
    }
    //libera el contenido que se encuentra en el atributo 
    function limpiaconsulta() {
        mysql_free_result($this->consulta);
    }
}
?>
 

obtendatos.php

Código PHP:

<?php
    include('conec.php');
    $valor = $_GET['valor'];
    $sql2 = new conectarMySQL("localhost", "root", "", "nomina");
    $sql2->conectar();
    $sql2->consultar("SELECT nombre, apaterno, amaterno, rfc, puesto FROM trabajadores WHERE id = '$valor' ");
    $row = $sql2->obtendatos();
    echo $row['nombre'].'|'.$row['apaterno'].'|'.$row['amaterno'].'|'.$row['puesto'].'|'.$row['rfc'];
    sleep(1);
    return $dat = $row['nombre'].'|'.$row['apaterno'].'|'.$row['amaterno'].'|'.$row['puesto'].'|'.$row['rfc'];
    $sql2->cerrarconexion();
    $sql2->limpiaconsulta();
?>
 

ajax2.php

Código PHP:

<?php
include('conec.php');
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script >
    //funcion que limpia los demas campos
    function LimpiarInput(destino,destino2)
    {
        destino.value="";   
    }
    //funcion que llena los datos 
    function LlenarDatos(text,destino,destino2,destino3,destino4,destino5)
    {
        var datos = text.split('|'); //dividimos los datos para colocarlos en el lugar correcto     
        destino.value = datos[0];
        destino2.value = datos[1];
        destino3.value = datos[2];
        destino4.value = datos[3];
        destino5.value = datos[4];
    }   
    //fucion con la cual obtenemos  los datos 
    function obten_datos(arrastre,destino,destino2,destino3,destino4,destino5)
    {   
        //alert("arrastre: "+arrastre+" destino: "+destino+" destino2: "+destino2+" destino3: "+destino3+" destino4: "+destino4+" destino5: "+destino5);
        destino = document.getElementById(destino);
        destino2 = document.getElementById(destino2);
        destino3 = document.getElementById(destino3);
        destino4 = document.getElementById(destino4);
        destino5 = document.getElementById(destino5);
        LimpiarInput(destino);
        LimpiarInput(destino2);
        LimpiarInput(destino3);
        LimpiarInput(destino4);
        LimpiarInput(destino5);
        if(arrastre.options[arrastre.selectedIndex].value != 0)
        {
            arrastre.disabled = true;
            destino.disabled = true;
            destino.value = 'Cargando Nombre....';
            destino2.disabled = true;
            destino2.value = 'Cargando Apellido Paterno ....';
            destino3.disabled = true;
            destino3.value = 'Cargando Apellido Materno ....';
            destino4.disabled = true;
            destino4.value = 'Cargando Puesto ....';
            destino5.disabled = true;
            destino5.value = 'Cargando RFC ....';           
            $.ajax({
                type: 'get',
                dataType: 'text',
                url: 'obtendatos.php',
                data: {valor: arrastre.options[arrastre.selectedIndex].value},
                success: function(text){
                    LlenarDatos(text,destino,destino2,destino3,destino4,destino5);
                    arrastre.disabled = false;
                    destino.disabled = false;
                    destino.readOnly = true;
                    destino2.disabled = false;
                    destino2.readOnly = true;
                    destino3.disabled = false;
                    destino3.readOnly = true;
                    destino4.disabled = false;
                    destino4.readOnly = true;
                    destino5.disabled = false;
                    destino5.readOnly = true;
                        }
            });     
        }
    }
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
  <table width="27%" border="0" cellspacing="0" cellpadding="0">
    <tr>
      <td width="38%">Trabajador &nbsp;&nbsp; </td>
      <td width="62%"><label>
        <select name="name" id="name" onchange="javascipt:obten_datos(this,'nombre','apaterno','amaterno','puesto','rfc');">
          <option value="0">elige</option>
          <?php
            // creamos las opciones del select
            $sql = new conectarMySQL("localhost", "root", "", "nomina");
            $sql->conectar();
            $sql->consultar("SELECT id, nombre FROM trabajadores");
            while ($row = $sql->obtendatos()){
                ?>
                    <option value="<?php echo $row['id']; ?>"> <?php echo $row['nombre'];?></option>    
                <?php
            }
            $sql->cerrarconexion();
            $sql->limpiaconsulta();
          ?>        
        </select>
      </label></td>
    </tr>
  </table> <br />  
<table>
    <tr> 
        <td>Nombre          </td> 
        <td>Apellido Paterno</td>
        <td>Apellido Materno</td>
        <td>Puesto          </td>
        <td>Rfc             </td>
        <td>Persepciones    </td>
        <td>Deducciones     </td>
        <td>Total           </td>
        <td>Firma           </td>       
    </tr>
    <tr>   <td height="28"><label><input type="text" name="nombre"          id="nombre"    />       </label></td>
           <td><label><input type="text" name="apaterno"        id="apaterno"  />       </label></td>
           <td><label><input type="text" name="amaterno"        id="amaterno"  />       </label></td>
           <td><label><input type="text" name="puesto"          id="puesto"    />       </label></td>
           <td><label><input type="text" name="rfc"             id="rfc"       />       </label></td>
           <td><label><input type="text" name="persepcion"      id="persepcion"/>       </label></td>
           <td><label><input type="text" name="deduccion"       id="deduccion" />       </label></td>
           <td><label><input type="text" name="total"           id="total"  />          </label></td>
           <td><label> ____________________                                             </label></td>   
    </tr>          
</table> 
</form>
<br />
</body>
</html>
<!----------------  
              ------------------------>
 

Omito la explicacion porque sera similar a la que esta arriba, solo es cuestion de modificar los datos del server, User, Pass y DataBase, y obviamente los campos, mi base de datos en este caso se llama nomina, mi tabla trabajadores y ya mis demas campos

Espero puedan entenderle, Saludos !! ....

[pakillo]

Gracias Ximenitaa, el ejemplo funciona, una pregunta, en lugar de usar un select para obtener los datos se podria utilizar un input? como esos que son autocompletado y al elegir se carguen tal como este ejemplo.

Saludos

[edyuin]

yo la verdad no entiendo como se hace esto....

[pakillo]

Encontre este ejemplo que es mas o menos lo que quiero hacer, pero no entiendo como hacer para que muestre mas campos de la tabla

http://www.ecualug.org/2009/04/02/fo...n_input?page=1