Pasar datos desde ventana modal a formulario

jfcasillasl · #1 (**permalink**) 23/09/2013, 12:54

Hola que tal tengo una pregunta a ver si alguien me podria apoyar.

Estoy aprendiendo en este tipo de programacion de php javascript.. html

y tengo la siguiente situacion:

ten un formulario de captura de datos

digamos en la pagina captura_nota.php tengo los campos que deben de ser llenados despues de haber seleccionado una fila de la tabla donde guardo el resultado
codigo pagina captura_nota.php

Código HTML:

<?php 

include('../config/vars.php');
include('../config/con_archivo.php');

date_default_timezone_set('America/Mazatlan');
	
$exp= "<script>document.getElementById('expediente').value ;</script>";;

 $fecha_captura = date("Y-m-d");

 $sql_tpofalla = "select * from consmed where show_cons = 1";
 $result_q = mysql_query($sql_tpofalla,$conexion) or die(mysql_error());
 
 
 $sql_exp = 'select  * from exps where numexpmed ="'.$exp.'"';
 
 $result_exp =  mysql_query($sql_exp,$conexion) or die(mysql_error());
 
 $rows_exps = mysql_fetch_array($result_exp);
 
 
?>

<!DOCTYPE html PUBLIC >
<html >
<head>
<link rel="stylesheet" media="screen" href="../css/inputs.css"  type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" media="screen" href="../css/login.css"  type="text/css">
<link rel="stylesheet" media="screen" href="../css/evita-jui.css" type="text/css">
<link rel="stylesheet" href="../css/jquery-ui.css" />
<script type="text/javascript" src="../js/find-exp.js"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/jquery-ui.js"></script>
<script type="text/javascript" src="../js/jquery.validate.js">
</script>

 <script>
  
$(function() {
  $( "#fecha" ).datepicker(
  { dateFormat: "yy-mm-dd",
    gotoCurrent: true,
    minDate: -50,
    maxDate: 0,
	 monthNames: [ "Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Dieciembre" ],
	 dayNamesMin:["Dom","Lun","Mar","Mie","Jue","Vie","Sab"] ,
onSelect: function(dateText, inst) {document.getElementById('fecha').value=dateText; }	 
  }
  );
  
  
});

$(function(){
	 $('#new_nota').validate({
	 rules :
	       {
                area : { required : true },
                expediente : {required : true },
				subexp:{required : true},
				nomb:{required : true},
				apat:{required : true},
				
				nomb_doc:{required : true},
				fecha:{required : true}
            },
     messages : 
	        {
                area : { required : "Seleccione el area de origen " },
                expediente : {required : "ingrese el expediente" },
				subexp:{required : "ingrese el subfolio"},
				nomb:{required : "ingrese el nombre(s) del paciente"},
				apat:{required : "ingrese el apeido paterno"},
				
				nomb_doc:{required : "ingrese el nombre del medico que atendio"},
				fecha:{required : "Seleccione una fecha"}
            }
	 
	 
	 });
	 }
 );

</script>
<title>Capturar Nota</title>
</head>

<body>
<div id="encab"  >
 <form id="new_nota" name="new_nota" action="" method="post" >

   

   <table align="center" style="text-shadow:#CCC; color:#000; font-size:20px;" width="66%">
    
   <tr>
     <td colspan="5" valign="top"><div align="center" class="encabezado">Captura de Notas</div> </td>
   </tr>
   <tr>
     <td valign="middle">   Area     </td>
    <td colspan="2" valign="middle">
  <select id="area"  name="area" style="font-size:22px;" > 
    <option value="" style="font-size:22px;">Selecciona una opcion</option>
    <?php
		while($rows_result = mysql_fetch_array($result_q))
		{			
		echo ' <option value="'.$rows_result['CLVCAMED'].'">'.$rows_result['DESCAMED'].'</option>    
			';
		
		 
		}
	  ?>
    </select>
      
    </td>
     <td valign="middle">Fecha</td>
     <td valign="middle"><input type="date" id="fecha" name="fecha" readonly style="font-size:22px;  border: 1px solid #000;
    background:#FFF;
	font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif" /></td>    
   </tr>
   <tr>
     <td valign="middle">Expediente</td>
     <td width="181" valign="middle"><input type="text" size="15" style="font-size:22px; text-transform:uppercase;" maxlength="15" id="expediente" name="expediente" onClick="buscar_exp();" /></td>
    <td width="79" valign="middle"></td>
    <td width="145" valign="middle">Sub Expediente</td>
    <td width="165" valign="middle"><input type="text" size="7" maxlength="4" style="font-size:22px; text-transform:uppercase; " id="subexp" name="subexp" /></td>
   </tr>
   <tr>
     <td valign="middle">Nombre</td>
     <td colspan="4">
     <input type="text" size="40" style="font-size:22px; text-transform:capitalize;" maxlength="40" id="nomb" name="nomb"  /></td>
   </tr>
    <tr>
      <td valign="middle">A. Paterno</td>
      <td colspan="5"><input type="text" size="30" style="font-size:22px; text-transform:capitalize" maxlength="30" id="apat" name="apat" /></td>
    </tr> 
    <tr>
      <td valign="middle">A. Materno</td>
      <td colspan="5"><input type="text" size="30" style="font-size:22px; text-transform:capitalize" maxlength="30" id="amat" name="amat" /></td>
    </tr>      
   <tr>
     <td valign="middle">Medico</td> 

<td colspan="5"><input type="text" size="50" style="font-size:22px; text-transform:capitalize" maxlength="50" id="nomb_doc" name="nomb_doc" /></td>
    </tr>      
   <tr>
     <td valign="top"></td> 
   <td>
     <input type="reset" id="new" name="new" value="Cancelar" style="font-size:22px;" />
     
   </td> 
                
     <td colspan="4" valign="middle">
       <input type="submit" id="new" name="new" value="Guardar" style="font-size:22px;"  />
      
       </td>
   </tr>
   </table>
 </form>
 
</div>
<br>
<div id="id_busca">
 <table rules="rows" border="1" cellpadding="6" cellspacing="2">
  <tr >
   <td>Expediente</td>
   <td><input type="text" id="exp-med" name="exp-med" onKeyUp="search_exp(); return false" /></td>
  </tr>
 </table>
<br>
  <div id="resultado"></div>

</div>



</body>
<script type="text/javascript">
//ver si ya cargó el DOM
$(document).ready(function(){

$('body').attr('unselectable', 'on');
$('body').css('MozUserSelect', 'none');
$('body').css('KhtmlUserSelect', 'none');
});

$(function() {
$('#id_busca').dialog({
	autoOpen: false,
	height: 400,
	width: 950,
	resizable: false ,
	modal: true,
	buttons:{
		 "Aceptar":function() {$( this ).dialog( "close" );} ,
		 Cancel: function() {$( this ).dialog( "close" );}
		}
	});
	
  $( "#expediente" )
.button()
.click(function() {
$( "#id_busca" ).dialog( "open" );
});
});
</script>

</html>

codigo pagina busca_datos.php

Código HTML:

<html>
<head>

</head>
<body>
<?php
 require('../config/con_archivo.php');
 require('../config/edad.php');
 
 echo '
 
 <table width="100%" rules="rows" border="1" cellpadding="6" cellspacing="2">
  <tr >
	<td>Expediente</td>
    <td>Afiliacion</td>
    <td>A. Paterno</td>
    <td>A. Materno</td>
    <td>Nombre</td>
	<td>Edad</td>
	<td>Genero</td>
  </tr>
 
 ';
 
 $num_exp = $_POST['num_exp'];

 
date_default_timezone_set('America/Mazatlan');

if ($num_exp <> "" )
{
  
$sql_lite='SELECT  * FROM exps WHERE NUMEXPMED ="'.$num_exp .'"';

$fecha = date("Y-m-d") ;
$result_q = mysql_query($sql_lite,$conexion) or die(mysql_error());




$rw_cont = mysql_num_rows($result_q);




$cont = 0 ;
while($rows_result = mysql_fetch_array($result_q))
{
 $cont ++ ;	
  $exp_med = $rows_result['NUMEXPMED'];
  $sub_exp = $rows_result['SUBFOLIO'];
  $nombre = $rows_result['NOMBRE'];
  $apat = $rows_result['APATERNO'];
  $amat = $rows_result['AMATERNO'] ;
echo'
	<tr onClick="enviar_datos('.$exp_med.','.$sub_exp.','.$nombre.','.$apat.','.$amat.');" >
	<td>'.$cont.'</td>
    <td>'.$exp_med.'-'.$sub_exp.'</td>

    <td>'.$rows_result['DESCAFILIACION'].'</td>
    <td>'.$apat.'</td>
    <td>'.$amat.'</td>
    <td>'.$nombre.'</td>'; 
	if ($rows_result['finado'] =='NO' ){
		echo '
	<td>'.edad($rows_result['fnacimiento']).'</td>';
	}
	else {
				echo '
	<td>Finado</td>';}
		
	echo'

	<td>'.$rows_result['DSEXO'].'</td>
  </tr>';

 
}

}  
  


mysql_free_result($result_q);
mysql_close($conexion);


?>

</body>
</html>

si alguien me podria orientar se lo agradecer bastante, gracias

nelsonpk · #2 (**permalink**) 23/09/2013, 13:46

No terminé de entender bien tu problema, pero creo que lo que estás buscando es esto:

1. Asignale un id a cada campo que quieras cargarle datos.
2. Cuando quieras asignarle un dato escribes lo siguiente.

Código PHP:

  <script>document.getElementById('identificador').value = "lo que quieras";</script>

Nota: value se usa para escribir en textbox, input, etc. Si lo que intentas escribir es una etiquta a o una etiqueta div debes usar innerHTML.
Nota2: Esto es javascript plano, pero facilmente podrías adaptarlo a jQuery.

Si lo necesitas podrías cargar los valores con php, ejemplo:

Código PHP:

 
<script>document.getElementById('identificador').value = '<? echo $tu_variable; ?>';</script>

vicman · #3 (**permalink**) 24/09/2013, 14:44

Si desde el formulario se abrio la ventana modal, prueba con esto

Cita:

gcotto · #4 (**permalink**) 27/03/2016, 10:11

Hola, estuve leyendo mucho y quería aportar la solución que encontré a este tema por si alguien que este buscando actualmente le sirve.

Capaz que no es lo mas prolijo a nivel de programación pero creo que funciona.

Primero tengo una tabla la cual se carga con codigo php y luego un boton.

Con este codigo cargo la tabla

Código PHP:

 
while ($row = mysql_fetch_row($result)){    
                                    echo "<tr>";   
                                    echo "<td>$row[0]></td>";   
                                    echo "<td>$row[1]</td>";   
                                    echo "<td>$row[2]</td>";   
                                    echo "<td>" 
 
                                    ?> 
 
                                    <a href='#myModal_actualizar_niveles' data-toggle="modal"  
                                    data-book-id=" <?php echo $row[0] ?> "  
                                    data-book-id1=" <?php echo $row[1] ?> "  
                                    data-book-id2=" <?php echo $row[2] ?> "  
                                    data-book-id3=" <?php echo $row[3] ?> "  
                                    data-book-id4=" <?php echo $row[4] ?> "        
                                    data-book-id5=" <?php echo $row[5] ?> "        
                                    class='btn btn-info glyphicon glyphicon-edit row-edit open-AddBookDialog' style='padding: 2px 5px !important; margin-bottom: 0px; ' ></td> 
 
                                    <?php 
 
                                    echo "<td>" 
 
                                    ?> 
 
                                    <button class='btn btn-danger glyphicon glyphicon-remove row-remove' style='padding: 2px 5px !important; margin-bottom: 0px; ' ></td> 
 
 
                                    <?php 
 
                                    echo "</tr>";  
                                   
                                  }

Como ven pongo cada valor de la tabla en un data-book-id#

Luego pongo el script

Código PHP:

  <script type="text/javascript"> 
$('#myModal_actualizar_niveles').on('show.bs.modal', function(e) { 
    var bookId = $(e.relatedTarget).data('book-id'); 
    var bookId1 = $(e.relatedTarget).data('book-id1'); 
    var bookId2 = $(e.relatedTarget).data('book-id2'); 
    var bookId3 = $(e.relatedTarget).data('book-id3'); 
    var bookId4 = $(e.relatedTarget).data('book-id4'); 
    var bookId5 = $(e.relatedTarget).data('book-id5'); 
    $(e.currentTarget).find('input[name="codigo"]').val(bookId); 
    $(e.currentTarget).find('input[name="nombre"]').val(bookId1); 
    $(e.currentTarget).find('input[name="desc"]').val(bookId2); 
    $(e.currentTarget).find('input[name="pagina"]').val(bookId3); 
    $(e.currentTarget).find('input[name="libre1"]').val(bookId4); 
    $(e.currentTarget).find('input[name="libre2"]').val(bookId5); 
}); 
</script>

Al abrir la ventana modal se carga en cada input de la ventana modal el valor.
Cada input de la ventana modal es así.

Código HTML:

<input type='text' class='form-control' name='codigo' id='validate-number' placeholder='Codigo' required> 
<input type='text' class='form-control' name='nombre' id='validate-length' placeholder='Nombre' required>
<input type='text' class='form-control' name='desc' id='validate-length' placeholder='Descripcion' required>
<input type='text' class='form-control' name='pagina' id='validate-php' placeholder='Pagina' required>
<input type='text' class='form-control' name='libre1' id='validate-optional' placeholder='Libre1'>
<input type='text' class='form-control' name='libre2' id='validate-optional' placeholder='Libre2'>

y así sucesivamente.

Todo esto dentro de un FORM, que luego tiene un botón para actualizar los datos de la base de datos según los input modificados.

Código HTML:

 <button type='submit' class='btn btn-primary btn-lg btn-block' >ACTUALIZAR NIVEL</button>

Espero sirva para los que tengan dicho problema.

Saludos