llenar automáticamente campos en formulario sin recargar (tengo base)

joscol · #1 (**permalink**) 11/05/2016, 09:20

tengo este código que me funciona perfectamente pero tengo un diseño en mi pagina que utiliza ventanas modales, este codigo lo puse en una ventana modal pero me recargar la pagina al hacer la búsqueda y el error es que se quita por la recarga.

Código PHP:

 
<div class="ventana" id="inicio"> 
             
    <div class="formini" > 
    <div class="cerrar"><a href="javascript:closeVentana();"><img height='20px' width='20px' src="http://www.forosdelweb.com/../img/close.png"></a></div> 
    <center> 
        <h3>INGRESAR REGISTRO</h3> 
        </center> 
<div> 
<?php 
date_default_timezone_set('America/Caracas'); 
$var1=""; 
$var2=""; 
$var3=""; 
$var4=""; 
$var5=""; 
$var6=""; 
if(isset($_POST["btn1"])){ 
    $btn=$_POST["btn1"]; 
    $bus=$_POST["txtbus"]; 
    if($btn=="buscar"){ 
        $sql="SELECT * FROM usuarios WHERE cedula='$bus'"; 
        $cs=mysql_query($sql, conectar::conexion()); 
        while($resul=mysql_fetch_array($cs)){ 
            $var1=$resul[1]; 
            $var2=$resul[2]; 
            $var3=$resul[3]; 
            $var4=$resul[4]; 
            $var5=$resul[5]; 
            $var6=$resul[6]; 
        } 
    } 
        if($btn=="agregar"){ 
            $cedula=$_POST["cedula"]; 
            $nombre=$_POST["nombre"]; 
            $apellido=$_POST["apellido"]; 
            $programa=$_POST["programa"]; 
            $carrera=$_POST["carrera"]; 
            $fecha=$_POST["fecha"]; 
            $hora=$_POST["hora"]; 
    $ingreso = new ingreso(); 
    $ingreso -> registrar($cedula, $nombre, $apellido, $programa, $carrera, $fecha, $hora); 
     
     
    } 
} 
 
?> 
<form name="fe" action="" method="post"> 
<br> 
<label>Buscar: </label><input type="text" name="txtbus"/><input type="submit" name="btn1" Value="buscar"/> 
<br> 
<br> 
<br> 
<label>Cedula: </label> 
<br> 
<input type="text" name="cedula" value="<?php echo $var1 ?>"/> 
<br> 
<br> 
<label>Nombre: </label> 
<br> 
<input type="text" name="nombre" value="<?php echo $var2 ?>"/> 
<br> 
<br> 
<label>Apellido: </label> 
<br> 
<input type="text" name="apellido" value="<?php echo $var3 ?>"/> 
<br> 
<br> 
<label>Programa: </label> 
<br> 
<input type="text" name="programa" value="<?php echo $var4 ?>"/> 
<br> 
<br> 
<label>Carrera: </label> 
<br> 
<input type="text" name="carrera" value="<?php echo $var5 ?>"/> 
<br> 
<br> 
<label>Fecha: </label> 
<br> 
<input type="text" name="fecha" value="<?php echo date("o/m/d") ?>"/> 
<br> 
<br> 
<label>Hora: </label> 
<br> 
<input type="text" name="hora" value="<?php echo date("h:i:s") ?>"/> 
<br> 
<br> 
<br> 
<input type="submit" name="btn1" value="agregar"/> 
</form> 
</div> 
    </div> 
        </div>

estos comandos lo que hacen es que al ingresar el numero de identidad de una persona me busca en la base de dato los demás datos referentes a esta persona para agilizar el proceso, no me gustaría quitarlo de la ventana modal sin probar otra cosa, pido ayuda porque de lo que mas tengo conocimiento es de html, php y muy poco o nada de javascript, jquery y ajax que son las cosas que se pueden utilizar para no recargar.

espero me ayuden

sustentio · #2 (**permalink**) 13/05/2016, 11:00

debes usar AJAX

alvaroruiz2 · #3 (**permalink**) 14/07/2016, 09:22

Espero te sirva revisalo y me escribes aun falta mas codigo, este mismo problema tenia hace unas semanas y esto salio

Código PHP:

  <?php 
include('conec.php'); 
include ("calendario/calendario.php"); 
?> 
<!DOCTYPE html> 
<!– El encabezado !DOCTYPE html especifica que se trata de un documento HTML5 –> 
<html> 
<head> 
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=ISO-8859-1">  
    <script language="JavaScript" src="calendario/javascripts.js"></script> 
    <link rel="STYLESHEET" type="text/css" href="calendario/estilo.css"> 
    <style type="text/css"> 
    .n { 
    font-size: 20pt; 
} 
    .Estilo22 { 
    font-size: 24pt; 
} 
    </style> 
<script type="text/javascript" src="js/jquery.min.js"></script> 
<script type="text/javascript" src="js/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 ....'; 
            destino2.disabled = true; 
            destino2.value = 'Cargando ....'; 
            destino3.disabled = true; 
            destino3.value = 'Cargando ....'; 
            destino4.disabled = true; 
            destino4.value = 'Cargando ....'; 
            destino5.disabled = true; 
            destino5.value = 'Cargando Dias de vacaciones ....';            
            $.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> 
<style type="text/css"> 
.Estilo22 {    font-size: 36pt; 
} 
.n {    font-size: 24pt; 
} 
</style> 
</head> 
<body> 
<center> 
<form id="form1" name="fcalen" method="post" action=""> 
  <p>&nbsp;</p> 
  <table width="887" height="93" border="0"> 
    <tr> 
      <td width="241" height="84" rowspan="2"> <img src="img/logo.jpg" alt="tab" width="122" height="171" /></td> 
      <td height="43"><div align="right">Guadalajara, Jal, a </div></td> 
      <td height="43"><div align="left"> 
        <?php $dias = array("Domingo","Lunes","Martes","Miercoles","Jueves","Viernes","Sábado"); 
$meses = array("Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"); 
  
echo $dias[date('w')]." ".date('d')." de ".$meses[date('n')-1]. " del ".date('Y') ; ?> 
      </div> 
        <div align="left"></div></td> 
    </tr> 
    <tr> 
      <td width="414" height="21"><div align="center"><span class="Estilo22">GRUPO VEQ</span></div></td> 
      <td width="218">&nbsp;</td> 
    </tr> 
  </table> 
  <p>&nbsp;</p> 
  <table width="954" border="0"> 
    <tr> 
      <td colspan="7" align="center"><span class="n">FORMATO DE VACACIONES </span></td> 
      </tr> 
    <tr> 
      <td colspan="2">&nbsp;</td> 
      <td colspan="2">&nbsp;</td> 
      <td>&nbsp;</td> 
      <td width="190">&nbsp;</td> 
      <td width="181">&nbsp;</td> 
    </tr> 
    <tr> 
      <td width="49" height="32">&nbsp;</td> 
      <td width="110">Trabajador :</td> 
      <td width="287" colspan="2"><table width="27%" border="0" cellspacing="0" cellpadding="0"> 
        <tr> 
          <td width="38%">&nbsp;</td> 
          <td width="62%"><label> 
            <select name="name" id="name" onchange="javascipt:obten_datos(this,'nombre','apaterno','amaterno','puesto','rfc');"> 
              <option value="0">  :: Elije El Nombre :: </option> 
              <?php 
            // creamos las opciones del select 
            $sql = new conectarMySQL("localhost", "root", "", "veq_rh"); 
            $sql->conectar(); 
            $sql->consultar("SELECT numero, nombre FROM personal"); 
            while ($row = $sql->obtendatos()){ 
                ?> 
              <option value="<?php echo $row['numero']; ?>"> <?php echo $row['nombre'];?></option> 
              <?php 
            } 
            $sql->cerrarconexion(); 
            $sql->limpiaconsulta(); 
          ?> 
            </select> 
          </label></td> 
        </tr> 
      </table></td> 
      <td width="111">&nbsp;</td> 
      <td>Fecha de Entrada :</td> 
      <td><input type="text" name="amaterno"        id="amaterno"  /></td> 
      </tr> 
    <tr> 
      <td>&nbsp;</td> 
      <td>Area :</td> 
      <td colspan="2"><input type="text" name="nombre"          id="nombre"    /></td> 
      <td>&nbsp;</td> 
      <td>Años de Servicio :</td> 
      <td><input name="puesto" type="text"          id="puesto" size="4"    /></td> 
      </tr> 
    <tr> 
      <td>&nbsp;</td> 
      <td>Puesto : </td> 
      <td colspan="2"><input type="text" name="apaterno"        id="apaterno"  /></td> 
      <td>&nbsp;</td> 
      <td>Dias de vacaciones por Disfrutar : </td> 
      <td><input name="rfc" type="text"             id="rfc" size="4"       /></td> 
      </tr> 
    <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td colspan="2" align="left">&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
    </tr> 
    <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td align="left">&nbsp;</td> 
      <td align="left">&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
    </tr> 
    <tr> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td colspan="2" align="left">&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
      <td>&nbsp;</td> 
    </tr> 
</table> 
  <p>&nbsp;</p> 
  <p><br />   
  </p> 
</form> 
<br /> 
</center> 
</body> 
</html>

obtendatos.php

Código PHP:

   
include('conec.php'); 
    $valor = $_GET['valor']; 
    $sql2 = new conectarMySQL("localhost", "root", "", "veq_rh"); 
    $sql2->conectar(); 
    $sql2->consultar("SELECT * FROM personal WHERE numero = '$valor' "); 
    $row = $sql2->obtendatos(); 
    echo $row['area'].'|'.$row['puesto'].'|'.$row['fecha'].'|'.$row['anos'].'|'.$row['dias_por_disf']; 
    sleep(1); 
    return $dat = $row['area'].$row['puesto'].'|'.$row['fecha'].'|'.$row['anos'].'|'.$row['dias_por_disf']; 
    $sql2->cerrarconexion(); 
    $sql2->limpiaconsulta();

Synkronice · #4 (**permalink**) 14/07/2016, 10:20

Hola joscol,

te recomiendo aprendas a usar Ajax, ya que como bien dices es como se suelen hacer estas cosas sin tener que recargar.

Miralo como una inversion, si aprendes a usarlo mejoraras como programador y seras mas autonomo.

Saludos.