Tema: Autorellenado de inputs en formulario con Ajax/PHP/MySQL
Ver Mensaje Individual
  #10 (permalink)  
Antiguo 19/10/2011, 10:16
Avatar de Ximenitaa
Ximenitaa
 
Fecha de Ingreso: abril-2011
Ubicación: Mexico
Mensajes: 208
Antigüedad: 13 años
Puntos: 43
Sonrisa Respuesta: Autorellenado de inputs en formulario con Ajax/PHP/MySQL
claro que funciona, aqui dejo otro ejemplo similar, y lo acabo de verificar y funciona perfectamente...

Cita:
conec.php
Código PHP: 
Ver original
  1. <?php
  2. class conectarMySQL {
  3.     //creamos las variables que vamos a utilizar en la conexion
  4.     var $servidor; //servidor
  5.     var $usuario; //usuario
  6.     var $password; //password
  7.     var $bd; //base de datos
  8.     //creamos las variables para las consultas
  9.     var $consulta; //aquí se guarda las consultas que se realizan
  10.     var $enlace; //aquí se almacena la conexión con la bd, sí se ha producido
  11.     var $resultado; //aquí se guardan los datos que se generen de una consulta
  12.     var $datos; //aqui guardamos el numero de registros obtenidos en la consulta
  13.     //constructor, donde se inicializan las variables
  14.     function conectarMySQL($servidor,$usuario,$password,$bd) {
  15.         $this->servidor=$servidor;
  16.         $this->usuario=$usuario;
  17.         $this->password=$password;
  18.         $this->bd=$bd;
  19.     }
  20.     //conectamos con la base de datos
  21.     function conectar() {
  22.         //se realiza la conexión a la base de datos
  23.         if($this->enlace=mysql_connect($this->servidor,$this->usuario,$this->password)) {
  24.             //se intenta acceder a la base de datos que deseeamos
  25.             if(mysql_select_db($this->bd,$this->enlace)) {
  26.                 //Sí es correcta 
  27.             } else {
  28.                 //Si falla muestra el mensaje que el error está al acceder a la base de datos
  29.                 echo "No se ha podido seleccionar la  BD";
  30.             }
  31.         } else {
  32.             //Si falla la conexión con la base de datos se muestra el mensaje
  33.             echo "No se ha podido conectar a la bd";
  34.         }                 
  35.     }   
  36.     function consultar($query) {
  37.         //aquí se realizan las consultas a la base de datos
  38.         $this->consulta=mysql_query($query,$this->enlace) or die (mysql_error());
  39.     }    
  40.     function obtendatos() {
  41.         //aquí se obtienen los datos de la consulta
  42.         $this->resultado=mysql_fetch_array($this->consulta);
  43.         return $this->resultado;
  44.     }   
  45.     function numerodedatos() {
  46.         //aquí se obtienen los datos de la consulta
  47.         $this->datos=mysql_num_rows($this->consulta);
  48.         return $this->datos;
  49.     }   
  50.     //cerramos la conexión con la base de datos
  51.     function cerrarconexion() {
  52.         mysql_close($this->enlace);
  53.     }
  54.     //libera el contenido que se encuentra en el atributo 
  55.     function limpiaconsulta() {
  56.         mysql_free_result($this->consulta);
  57.     }
  58. }
  59. ?>

Cita:
obtendatos.php
Código PHP: 
Ver original
  1. <?php
  2.     include('conec.php');
  3.     $valor = $_GET['valor'];
  4.     $sql2 = new conectarMySQL("localhost", "root", "", "nomina");
  5.     $sql2->conectar();
  6.     $sql2->consultar("SELECT nombre, apaterno, amaterno, rfc, puesto FROM trabajadores WHERE id = '$valor' ");
  7.     $row = $sql2->obtendatos();
  8.     echo $row['nombre'].'|'.$row['apaterno'].'|'.$row['amaterno'].'|'.$row['puesto'].'|'.$row['rfc'];
  9.     sleep(1);
  10.     return $dat = $row['nombre'].'|'.$row['apaterno'].'|'.$row['amaterno'].'|'.$row['puesto'].'|'.$row['rfc'];
  11.     $sql2->cerrarconexion();
  12.     $sql2->limpiaconsulta();
  13. ?>

Cita:
ajax2.php
Código PHP: 
Ver original
  1. <?php
  2. include('conec.php');
  3. ?>
  4. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  5. <html xmlns="http://www.w3.org/1999/xhtml">
  6. <head>
  7. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  8. <title></title>
  9. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  10. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
  11. <script >
  12.     //funcion que limpia los demas campos
  13.     function LimpiarInput(destino,destino2)
  14.     {
  15.         destino.value="";   
  16.     }
  17.     //funcion que llena los datos 
  18.     function LlenarDatos(text,destino,destino2,destino3,destino4,destino5)
  19.     {
  20.         var datos = text.split('|'); //dividimos los datos para colocarlos en el lugar correcto     
  21.         destino.value = datos[0];
  22.         destino2.value = datos[1];
  23.         destino3.value = datos[2];
  24.         destino4.value = datos[3];
  25.         destino5.value = datos[4];
  26.     }   
  27.     //fucion con la cual obtenemos  los datos 
  28.     function obten_datos(arrastre,destino,destino2,destino3,destino4,destino5)
  29.     {   
  30.         //alert("arrastre: "+arrastre+" destino: "+destino+" destino2: "+destino2+" destino3: "+destino3+" destino4: "+destino4+" destino5: "+destino5);
  31.         destino = document.getElementById(destino);
  32.         destino2 = document.getElementById(destino2);
  33.         destino3 = document.getElementById(destino3);
  34.         destino4 = document.getElementById(destino4);
  35.         destino5 = document.getElementById(destino5);
  36.         LimpiarInput(destino);
  37.         LimpiarInput(destino2);
  38.         LimpiarInput(destino3);
  39.         LimpiarInput(destino4);
  40.         LimpiarInput(destino5);
  41.         if(arrastre.options[arrastre.selectedIndex].value != 0)
  42.         {
  43.             arrastre.disabled = true;
  44.             destino.disabled = true;
  45.             destino.value = 'Cargando Nombre....';
  46.             destino2.disabled = true;
  47.             destino2.value = 'Cargando Apellido Paterno ....';
  48.             destino3.disabled = true;
  49.             destino3.value = 'Cargando Apellido Materno ....';
  50.             destino4.disabled = true;
  51.             destino4.value = 'Cargando Puesto ....';
  52.             destino5.disabled = true;
  53.             destino5.value = 'Cargando RFC ....';           
  54.             $.ajax({
  55.                 type: 'get',
  56.                 dataType: 'text',
  57.                 url: 'obtendatos.php',
  58.                 data: {valor: arrastre.options[arrastre.selectedIndex].value},
  59.                 success: function(text){
  60.                     LlenarDatos(text,destino,destino2,destino3,destino4,destino5);
  61.                     arrastre.disabled = false;
  62.                     destino.disabled = false;
  63.                     destino.readOnly = true;
  64.                     destino2.disabled = false;
  65.                     destino2.readOnly = true;
  66.                     destino3.disabled = false;
  67.                     destino3.readOnly = true;
  68.                     destino4.disabled = false;
  69.                     destino4.readOnly = true;
  70.                     destino5.disabled = false;
  71.                     destino5.readOnly = true;
  72.                         }
  73.             });     
  74.         }
  75.     }
  76. </script>
  77. </head>
  78. <body>
  79. <form id="form1" name="form1" method="post" action="">
  80.   <table width="27%" border="0" cellspacing="0" cellpadding="0">
  81.     <tr>
  82.       <td width="38%">Trabajador &nbsp;&nbsp; </td>
  83.       <td width="62%"><label>
  84.         <select name="name" id="name" onchange="javascipt:obten_datos(this,'nombre','apaterno','amaterno','puesto','rfc');">
  85.           <option value="0">elige</option>
  86.           <?php
  87.             // creamos las opciones del select
  88.             $sql = new conectarMySQL("localhost", "root", "", "nomina");
  89.             $sql->conectar();
  90.             $sql->consultar("SELECT id, nombre FROM trabajadores");
  91.             while ($row = $sql->obtendatos()){
  92.                 ?>
  93.                     <option value="<?php echo $row['id']; ?>"> <?php echo $row['nombre'];?></option>    
  94.                 <?php
  95.             }
  96.             $sql->cerrarconexion();
  97.             $sql->limpiaconsulta();
  98.           ?>        
  99.         </select>
  100.       </label></td>
  101.     </tr>
  102.   </table> <br />  
  103. <table>
  104.     <tr> 
  105.         <td>Nombre          </td> 
  106.         <td>Apellido Paterno</td>
  107.         <td>Apellido Materno</td>
  108.         <td>Puesto          </td>
  109.         <td>Rfc             </td>
  110.         <td>Persepciones    </td>
  111.         <td>Deducciones     </td>
  112.         <td>Total           </td>
  113.         <td>Firma           </td>       
  114.     </tr>
  115.     <tr>   <td height="28"><label><input type="text" name="nombre"          id="nombre"    />       </label></td>
  116.            <td><label><input type="text" name="apaterno"        id="apaterno"  />       </label></td>
  117.            <td><label><input type="text" name="amaterno"        id="amaterno"  />       </label></td>
  118.            <td><label><input type="text" name="puesto"          id="puesto"    />       </label></td>
  119.            <td><label><input type="text" name="rfc"             id="rfc"       />       </label></td>
  120.            <td><label><input type="text" name="persepcion"      id="persepcion"/>       </label></td>
  121.            <td><label><input type="text" name="deduccion"       id="deduccion" />       </label></td>
  122.            <td><label><input type="text" name="total"           id="total"  />          </label></td>
  123.            <td><label> ____________________                                             </label></td>   
  124.     </tr>          
  125. </table> 
  126. </form>
  127. <br />
  128. </body>
  129. </html>
  130. <!----------------  
  131.               ------------------------>

Cita:
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 !! ....
__________________
❤(｡◕‿◕)❤ . . . Ten un dia .... GeNiAl.... !!!! . . . ❤(◕‿◕｡)❤

¿Que dia es hoy? . . . Hoy, hoy, es definitivamente un dia PERFECTO !!