Foros del Web » Programando para Internet » Javascript »

[SOLUCIONADO] Mandar formulario despues de ocultar div.

Estas en el tema de Mandar formulario despues de ocultar div. en el foro de Javascript en Foros del Web. Hola, por favor tengo este codigo que lo que quiero es que despues de ocultar un div me muestre otro div pero que antes mande ...
  #1 (permalink)  
Antiguo 07/05/2013, 08:35
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Mandar formulario despues de ocultar div.

Hola, por favor tengo este codigo que lo que quiero es que despues de ocultar un div me muestre otro div pero que antes mande el formulario.

Código Javascript:
Ver original
  1. <form action="<?php echo $editFormAction; ?>" method="post" name="form2" id="form2">
  2.  
  3.                         <table align="center">
  4.                        
  5.                                  <tr valign="baseline">
  6.                        
  7.                         <td><input type="hidden" name="id_aviso" value="<?php echo $row_Recordset1['id_aviso']; ?>" size="32" /></td>
  8.                       </tr>
  9.                       <tr valign="baseline">
  10.                        
  11.                         <td><input type="hidden" name="tecnico" value="<?php echo $row_Recordset1['tecnico']; ?>" size="32" /></td>
  12.                       </tr>
  13.                       <tr valign="baseline">
  14.                        
  15.                         <td><input type="hidden" name="fecha" size="32" /></td>
  16.                       </tr>
  17.                       <tr valign="baseline">
  18.                        
  19.                         <td><input type="hidden"  name="hora_entrada" size="32" /></td>
  20.                       </tr>
  21.                      
  22.                     </table>
  23.                     <input type="hidden" name="MM_insert" value="form2" />
  24.  
  25.                             El contador de tiempo de este aviso está parado.<br/>
  26.                  
  27. <button type="submit" onClick="mostrar(this);return false"  name="MM_insert" data-icon="custom" data-theme="c" data-ajax="false" value="form2" id="form2">Activar contador</button>
  28.  
  29. </form>
  30.                                                            
  31.    
  32.  
  33. </div>
  34. </div>
  35.  <!-------------------------------Fin Temporizador parado----------------------------------------------------------------->
  36.  
  37.  
  38.  
  39. <script>
  40. function mostrar() {
  41.    
  42.   if (confirm('¿Desea activar el contador para este aviso?')) {
  43.   obj = document.getElementById('inicio_contador');
  44.   obj.style.display = (obj.style.display == 'block') ? 'none' : 'block';
  45.   obj = document.getElementById('paro_contador');
  46.   obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
  47.  
  48. }else{
  49. return false
  50.   }
  51. }
  52. </script>

Gracias

EDITO:
Perdon: Aclaro que quiero mandar el formulario al pulsar el boton de Activar contador y despues llamariamos a la funcion mostrar.

Última edición por satjaen; 07/05/2013 a las 08:41
  #2 (permalink)  
Antiguo 07/05/2013, 09:09
 
Fecha de Ingreso: junio-2012
Ubicación: Venezuela
Mensajes: 68
Antigüedad: 12 años, 6 meses
Puntos: 6
Respuesta: Mandar formulario despues de ocultar div.

Te responderé en pseudocódigo para que lo adaptes,,, así se hace con jQuery.
Priemero el id del formulario no puede ser el mismo id del boton submit,, recuerda que el id debe ser único en el DOM... por ente supongamos el el formulario tenga id="form2" y el boton submit tenga el id="form2btn"...

Código Javascript:
Ver original
  1. $('#form2btn').on('click',function(){
  2.   $('#divAOcultar').hide();
  3.   $('#form2').submit();
  4.   $('#divAMostrar').show();
  5. });

Si no entiendes mucho documentate sobre jquery.. Espero al menos haberte orientado un poco..

Saludos ;)
  #3 (permalink)  
Antiguo 07/05/2013, 11:45
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Respuesta: Mandar formulario despues de ocultar div.

Cita:
Iniciado por MagoMarlon Ver Mensaje
Te responderé en pseudocódigo para que lo adaptes,,, así se hace con jQuery.
Priemero el id del formulario no puede ser el mismo id del boton submit,, recuerda que el id debe ser único en el DOM... por ente supongamos el el formulario tenga id="form2" y el boton submit tenga el id="form2btn"...

Código Javascript:
Ver original
  1. $('#form2btn').on('click',function(){
  2.   $('#divAOcultar').hide();
  3.   $('#form2').submit();
  4.   $('#divAMostrar').show();
  5. });

Si no entiendes mucho documentate sobre jquery.. Espero al menos haberte orientado un poco..

Saludos ;)
Ok, pero como llamo a esa funcion
  #4 (permalink)  
Antiguo 07/05/2013, 14:50
 
Fecha de Ingreso: junio-2012
Ubicación: Venezuela
Mensajes: 68
Antigüedad: 12 años, 6 meses
Puntos: 6
De acuerdo Respuesta: Mandar formulario despues de ocultar div.

Cita:
Iniciado por satjaen Ver Mensaje
Ok, pero como llamo a esa funcion
No tienes que llamarla, todo lo que esté dentro de la función $(document).ready se ejecuta una vez el DOM esté listo,, si te documentas un poquitin de jquery entenderás,,, y asi tal cual como puse es que se implementa eso... saludos
  #5 (permalink)  
Antiguo 07/05/2013, 16:06
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Respuesta: Mandar formulario despues de ocultar div.

Cita:
Iniciado por MagoMarlon Ver Mensaje
No tienes que llamarla, todo lo que esté dentro de la función $(document).ready se ejecuta una vez el DOM esté listo,, si te documentas un poquitin de jquery entenderás,,, y asi tal cual como puse es que se implementa eso... saludos
Gracias, pongo el codigo porque no se donde esta el error:
Código Javascript:
Ver original
  1. <!-----------------------------------Temporizador parado----------------------------------------------------------------->
  2.  
  3.            
  4.                         <div align="center">
  5.  
  6.                         <div id="div_parada">
  7.                            
  8.         <form action="<?php echo $editFormAction; ?>" method="post" name="form2" id="form2">
  9.  
  10.                         <table align="center">
  11.                        
  12.                                  <tr valign="baseline">
  13.                        
  14.                         <td><input type="hidden" name="id_aviso" value="<?php echo $row_Recordset1['id_aviso']; ?>" size="32" /></td>
  15.                       </tr>
  16.                       <tr valign="baseline">
  17.                        
  18.                         <td><input type="hidden" name="tecnico" value="<?php echo $row_Recordset1['tecnico']; ?>" size="32" /></td>
  19.                       </tr>
  20.                       <tr valign="baseline">
  21.                        
  22.                         <td><input type="hidden" name="fecha" size="32" /></td>
  23.                       </tr>
  24.                       <tr valign="baseline">
  25.                        
  26.                         <td><input type="hidden"  name="hora_entrada" size="32" /></td>
  27.                       </tr>
  28.                      
  29.                     </table>
  30.                     <input type="hidden" name="MM_insert" value="form2" />
  31.  
  32.                             El contador de tiempo de este aviso está parado.<br/>
  33.                  
  34. <button type="submit" name="MM_insert" data-icon="custom" data-theme="c" data-ajax="false" id="form2btn">Activar contador</button>
  35.  
  36. </form>
  37.                                                            
  38.    
  39.  
  40. </div>
  41. </div>
  42.  <!-------------------------------Fin Temporizador parado----------------------------------------------------------------->
  43. <script>
  44.          
  45.     $(document).ready(function() {
  46.         $("#div_inicio").hide();
  47.                 $('#form2btn').on('click',function(){
  48.                 $('#form2').submit();
  49.                 $("#div_parada").hide();
  50.                 $('#div_inicio').show();
  51.                    
  52.       });
  53. });
  54. </script>        
  55.  
  56.  
  57.  
  58. <!---------------------------------Temporizador iniciado----------------------------------------------------------------->
  59.  
  60. <ul data-role="listview" data-divider-theme="b" data-inset="true">
  61.   <?php do { ?>
  62.                                <div align="center">
  63.  
  64.                         <div id="div_inicio">
  65.                        
  66.  
  67.  
  68.   <form action="<?php echo $editFormAction; ?>" method="post" name="form3" id="form3">
  69.                            
  70.  
  71.    
  72. <?php
  73. $horaf=date('H:i:s');
  74. ?>
  75.                                    
  76.                  <input type="hidden" name="hora_salida" value="<?php echo $horaf ?>" size="32" />
  77.                                    
  78.                        
  79.                  <input type="hidden" name="id_contador" value="<?php echo $row_Recordset4['id_contador']; ?>" />
  80.  
  81. <?php
  82.  
  83. $fecha1 = strtotime($row_Recordset4['hora_entrada']);
  84. $fecha2 = strtotime($row_Recordset4['hora_salida']);
  85.  
  86. $diferencia_minutos = ($fecha2-$fecha1)/60;
  87.  
  88. ?>
  89.    
  90.     <li data-role="list-divider" role="heading">[<?php echo $row_Recordset1['tecnico']; ?>]</li>
  91.   <li data-role="list-divider" role="heading"><?php echo $row_Recordset4['fecha']; ?></li><li data-theme="c">
  92.    
  93.     De <?php echo $row_Recordset4['hora_entrada']; ?> a <?php echo $row_Recordset4['hora_salida']; ?><span class="ui-li-count"><?php echo $diferencia_minutos  ?>&nbsp;minutos</span>
  94.    
  95.  <li data-role="list-divider" role="heading">El contador de tiempo se ha parado <?php echo $row_Recordset4['fecha']; ?> a las <?php echo $row_Recordset4['hora_salida']; ?> con nº<?php echo $row_Recordset4['id_contador']; ?><br/></li>
  96.    
  97.   </li>
  98.   <input type="hidden" name="MM_update" value="form3" />
  99.                          
  100.                          
  101.                           <button type="submit" onclick="if (confirm('¿Desea parar el contador de este aviso?')) {form3.form3.submit();} else{ return false} " data-icon="custom" data-theme="c" data-ajax="false" value="PararContador">Para contador</button>
  102.                          
  103.                                                             </form>
  104.                                                              </div>
  105.   <?php } while ($row_Recordset4 = mysql_fetch_assoc($Recordset4)); ?>
  106.          
  107.                                   </ul>  
  108.                        
  109.                        
  110.                         </div>                      
  111.  <!-------------------------------Fin Temporizador iniciado----------------------------------------------------------------->


EDITO: me da error:

TypeError: $(...).on is not a function
$('#form2btn').on('click',function(){

Última edición por satjaen; 07/05/2013 a las 16:26
  #6 (permalink)  
Antiguo 07/05/2013, 18:36
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 17 años, 5 meses
Puntos: 1567
Respuesta: Mandar formulario despues de ocultar div.

Cita:
Iniciado por satjaen Ver Mensaje
Gracias, pongo el codigo porque no se donde esta el error:
Código Javascript:
Ver original
  1. <!-----------------------------------Temporizador parado----------------------------------------------------------------->
  2.  
  3.            
  4.                         <div align="center">
  5.  
  6.                         <div id="div_parada">
  7.                            
  8.         <form action="<?php echo $editFormAction; ?>" method="post" name="form2" id="form2">
  9.  
  10.                         <table align="center">
  11.                        
  12.                                  <tr valign="baseline">
  13.                        
  14.                         <td><input type="hidden" name="id_aviso" value="<?php echo $row_Recordset1['id_aviso']; ?>" size="32" /></td>
  15.                       </tr>
  16.                       <tr valign="baseline">
  17.                        
  18.                         <td><input type="hidden" name="tecnico" value="<?php echo $row_Recordset1['tecnico']; ?>" size="32" /></td>
  19.                       </tr>
  20.                       <tr valign="baseline">
  21.                        
  22.                         <td><input type="hidden" name="fecha" size="32" /></td>
  23.                       </tr>
  24.                       <tr valign="baseline">
  25.                        
  26.                         <td><input type="hidden"  name="hora_entrada" size="32" /></td>
  27.                       </tr>
  28.                      
  29.                     </table>
  30.                     <input type="hidden" name="MM_insert" value="form2" />
  31.  
  32.                             El contador de tiempo de este aviso está parado.<br/>
  33.                  
  34. <button type="submit" name="MM_insert" data-icon="custom" data-theme="c" data-ajax="false" id="form2btn">Activar contador</button>
  35.  
  36. </form>
  37.                                                            
  38.    
  39.  
  40. </div>
  41. </div>
  42.  <!-------------------------------Fin Temporizador parado----------------------------------------------------------------->
  43. <script>
  44.          
  45.     $(document).ready(function() {
  46.         $("#div_inicio").hide();
  47.                 $('#form2btn').on('click',function(){
  48.                 $('#form2').submit();
  49.                 $("#div_parada").hide();
  50.                 $('#div_inicio').show();
  51.                    
  52.       });
  53. });
  54. </script>        
  55.  
  56.  
  57.  
  58. <!---------------------------------Temporizador iniciado----------------------------------------------------------------->
  59.  
  60. <ul data-role="listview" data-divider-theme="b" data-inset="true">
  61.   <?php do { ?>
  62.                                <div align="center">
  63.  
  64.                         <div id="div_inicio">
  65.                        
  66.  
  67.  
  68.   <form action="<?php echo $editFormAction; ?>" method="post" name="form3" id="form3">
  69.                            
  70.  
  71.    
  72. <?php
  73. $horaf=date('H:i:s');
  74. ?>
  75.                                    
  76.                  <input type="hidden" name="hora_salida" value="<?php echo $horaf ?>" size="32" />
  77.                                    
  78.                        
  79.                  <input type="hidden" name="id_contador" value="<?php echo $row_Recordset4['id_contador']; ?>" />
  80.  
  81. <?php
  82.  
  83. $fecha1 = strtotime($row_Recordset4['hora_entrada']);
  84. $fecha2 = strtotime($row_Recordset4['hora_salida']);
  85.  
  86. $diferencia_minutos = ($fecha2-$fecha1)/60;
  87.  
  88. ?>
  89.    
  90.     <li data-role="list-divider" role="heading">[<?php echo $row_Recordset1['tecnico']; ?>]</li>
  91.   <li data-role="list-divider" role="heading"><?php echo $row_Recordset4['fecha']; ?></li><li data-theme="c">
  92.    
  93.     De <?php echo $row_Recordset4['hora_entrada']; ?> a <?php echo $row_Recordset4['hora_salida']; ?><span class="ui-li-count"><?php echo $diferencia_minutos  ?>&nbsp;minutos</span>
  94.    
  95.  <li data-role="list-divider" role="heading">El contador de tiempo se ha parado <?php echo $row_Recordset4['fecha']; ?> a las <?php echo $row_Recordset4['hora_salida']; ?> con nº<?php echo $row_Recordset4['id_contador']; ?><br/></li>
  96.    
  97.   </li>
  98.   <input type="hidden" name="MM_update" value="form3" />
  99.                          
  100.                          
  101.                           <button type="submit" onclick="if (confirm('¿Desea parar el contador de este aviso?')) {form3.form3.submit();} else{ return false} " data-icon="custom" data-theme="c" data-ajax="false" value="PararContador">Para contador</button>
  102.                          
  103.                                                             </form>
  104.                                                              </div>
  105.   <?php } while ($row_Recordset4 = mysql_fetch_assoc($Recordset4)); ?>
  106.          
  107.                                   </ul>  
  108.                        
  109.                        
  110.                         </div>                      
  111.  <!-------------------------------Fin Temporizador iniciado----------------------------------------------------------------->


EDITO: me da error:

TypeError: $(...).on is not a function
$('#form2btn').on('click',function(){
que versión de jQuery estás usando, on() funciona desde la 1.7 creo
SAludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 08/05/2013, 02:09
Avatar de satjaen  
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Respuesta: Mandar formulario despues de ocultar div.

Cita:
Iniciado por emprear Ver Mensaje
que versión de jQuery estás usando, on() funciona desde la 1.7 creo
SAludos
Hola emprear, parece que funciona de la siguiente manera:

Código Javascript:
Ver original
  1. <script>
  2.          
  3.     $(document).ready(function() {
  4.        
  5.         $("#div_2").show(); ///////muestro div activo contador///////
  6.         $("#div_1").hide(); ///////oculto div paro contador///////
  7.        
  8.                 $('#form2btn').on('click',function(){ ///////pulso boton y activo contador///////
  9.                
  10.                     $("#div_1").show(); ///////muestro div paro contador///////
  11.                    
  12.        obj = document.getElementById('div_2'); ///////oculto div activo contador///////
  13.        obj.style.display = (obj.style.display == 'none') ? 'block' : 'none';
  14.        
  15.            
  16.       });
  17.      
  18. });
  19.  
  20.  
  21. </script>


Pero ahora quisiera que al pulsar el boton de parada del contador me hiciera una actualizacion a la hora que pulso dicho boton en la base de datos y se ocultara el div. Es decir:


El update de la hora de salida:
Código Javascript:
Ver original
  1. if ((isset($_POST["MM_update"])) && ($_POST["MM_update"] == "form3")) {
  2.   $updateSQL = sprintf("UPDATE contador_avisos SET hora_salida=%s WHERE id_contador=%s",
  3.                        GetSQLValueString($_POST['hora_salida'], "date"),
  4.                        GetSQLValueString($_POST['id_contador'], "int"));
  5.  
  6.   mysql_select_db($database_conexion, $conexion);
  7.   $Result1 = mysql_query($updateSQL, $conexion) or die(mysql_error());
  8. }


Este es el formulario donde el contador se encuentra iniciado y es aquí donde quiero que al pulsar el boton de parada del contador se actualize la hora de salida:

Código Javascript:
Ver original
  1. <!---------------------------------Temporizador iniciado----------------------------------------------------------------->
  2.  
  3.                                           <div id="div_1">
  4.                                          
  5.          <form action="<?php echo $editFormAction; ?>" method="post" name="form3" id="form3">
  6.                            
  7.  
  8.    
  9. <?php
  10. $horaf=date('H:i:s');
  11. ?>
  12.                                    
  13.                  <input type="hidden" name="hora_salida" value="<?php echo $horaf ?>" size="32" />
  14.                                    
  15.                        
  16.                  <input type="hidden" name="id_contador" value="<?php echo $row_Recordset4['id_contador']; ?>" />
  17.  
  18. <?php
  19.  
  20. $fecha1 = strtotime($row_Recordset4['hora_entrada']);
  21. $fecha2 = strtotime($row_Recordset4['hora_salida']);
  22.  
  23. $diferencia_minutos = ($fecha2-$fecha1)/60;
  24.  
  25. ?>
  26. <ul data-role="listview" data-divider-theme="b" data-inset="true">
  27.   <?php do { ?>
  28.                                
  29.  
  30.  
  31.     <li data-role="list-divider" role="heading">[<?php echo $row_Recordset1['tecnico']; ?>]</li>
  32.   <li data-role="list-divider" role="heading"><?php echo $row_Recordset4['fecha']; ?></li><li data-theme="c">
  33.    
  34.     De <?php echo $row_Recordset4['hora_entrada']; ?> a <?php echo $row_Recordset4['hora_salida']; ?><span class="ui-li-count"><?php echo $diferencia_minutos  ?>&nbsp;minutos</span>
  35.    
  36.  <li data-role="list-divider" role="heading">El contador de tiempo se ha parado <?php echo $row_Recordset4['fecha']; ?> a las <?php echo $row_Recordset4['hora_salida']; ?> con nº<?php echo $row_Recordset4['id_contador']; ?><br/></li>
  37.    
  38.   </li>
  39.   <input type="hidden" name="MM_update" value="form3" />
  40.                          
  41.                          
  42.                           <button type="submit" onclick="if (confirm('¿Desea parar el contador de este aviso?')) {form3.form3.submit();} else{ return false} " id="form3btn" data-icon="custom" data-theme="c" data-ajax="false" value="PararContador">Para contador</button>
  43.                          
  44.                                                            
  45.                                                            
  46.   <?php } while ($row_Recordset4 = mysql_fetch_assoc($Recordset4)); ?>
  47.          
  48.                                   </ul>  
  49.                        
  50.                         </form>
  51.                         </div>                      
  52.  <!---------------------------Fin Temporizador iniciado----------------------------------------------------------------->

Este es el formulario donde el contador se encuentra parado y al pulsar el boton de inicio del contador hago el insert de la hora de entrada en la base de datos:

Código Javascript:
Ver original
  1. if ((isset($_POST["MM_insert"])) && ($_POST["MM_insert"] == "form2")) {
  2.   $insertSQL = sprintf("INSERT INTO contador_avisos (id_aviso, tecnico, fecha,hora_entrada,hora_salida) VALUES (%s, %s, now(),now(),%s)",
  3.                        GetSQLValueString($_POST['id_aviso'], "int"),
  4.                        GetSQLValueString($_POST['tecnico'], "int"),
  5.                        GetSQLValueString($_POST['fecha'], "date"),
  6.                        GetSQLValueString($_POST['hora_entrada'], "date"),
  7.                        GetSQLValueString($_POST['hora_salida'], "date"));
  8.  
  9.   mysql_select_db($database_conexion, $conexion);
  10.   $Result1 = mysql_query($insertSQL, $conexion) or die(mysql_error());
  11. }

Código Javascript:
Ver original
  1. <!-----------------------------------Temporizador parado----------------------------------------------------------------->
  2.  
  3.  
  4.                                       <div id="div_2" style="display:none" >
  5.            
  6.                         <div align="center">
  7.                            
  8.                        
  9.                            
  10.         <form action="<?php echo $editFormAction; ?>" method="post" name="form2" id="form2">
  11.  
  12.                         <table align="center">
  13.                        
  14.                                  <tr valign="baseline">
  15.                        
  16.                         <td><input type="hidden" name="id_aviso" value="<?php echo $row_Recordset1['id_aviso']; ?>" size="32" /></td>
  17.                       </tr>
  18.                       <tr valign="baseline">
  19.                        
  20.                         <td><input type="hidden" name="tecnico" value="<?php echo $row_Recordset1['tecnico']; ?>" size="32" /></td>
  21.                       </tr>
  22.                       <tr valign="baseline">
  23.                        
  24.                         <td><input type="hidden" name="fecha" size="32" /></td>
  25.                       </tr>
  26.                       <tr valign="baseline">
  27.                        
  28.                         <td><input type="hidden"  name="hora_entrada" size="32" /></td>
  29.                       </tr>
  30.                       <tr valign="baseline">
  31.                        
  32.                         <td><input type="hidden"  name="hora_salida" size="32" value="0" /></td>
  33.                       </tr>
  34.                      
  35.                     </table>
  36.                     <input type="hidden" name="MM_insert" value="form2" />
  37.  
  38.                             El contador de tiempo de este aviso está parado.<br/>
  39.                  
  40.  <button type="submit" data-icon="custom" id="form2btn" data-theme="c" data-ajax="false">Activar contador</button>
  41.  
  42. </form>
  43.                                                            
  44.    
  45.  
  46. </div>
  47. </div>
  48.  <!-------------------------------Fin Temporizador parado----------------------------------------------------------------->


Gracias

Última edición por satjaen; 08/05/2013 a las 02:26

Etiquetas: ajax, formulario, input, php
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:33.