Ver Mensaje Individual
  #1 (permalink)  
Antiguo 21/06/2017, 11:40
agustinpak
 
Fecha de Ingreso: febrero-2012
Ubicación: Cancun
Mensajes: 79
Antigüedad: 13 años
Puntos: 0
Formulario que oculte o muestre diferentes campos

Buenas. Intento crear un formulario en donde la idea es si elijo una opcion de un select me muestre mas campos, y si selecciono la otra opción del select me muestre otros campos. Pude lograr que me oculte campos si selecciono una de las opciones, pero no se como hacer para que oculte unos y muestre otros, y viceversa.

Este es el código:

Código Javascript:
Ver original
  1. <script type="text/javascript">
  2.   function comprobar(){
  3.     var titulacion = document.getElementById('titulacion');
  4.     var rango = document.getElementById('rango');
  5.     if(rango.value == 1)
  6.     {
  7.       titulacion.style.display = 'block';
  8.     }
  9.     else
  10.     {
  11.       titulacion.style.display = 'none';
  12.     }
  13.    
  14.   }
  15. </script>
Código HTML:
Ver original
  1. <form action="kiosk.php" method="post" class="form" id="form1"><?php
  2. <p>
  3.  
  4.                         <label>
  5.                          <select onchange="comprobar();" name="rango" id="rango" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="Elegir Mutual" required/>>
  6.                        
  7.                             <option value="" disabled selected>TIPO VENTA</option>
  8.                             <option value="1">VENTA DE BOLETOS</option>
  9.                             <option value="2">CARGA DE TARJETA</option>
  10.  
  11.                         </select>
  12.                         </label>
  13.             </p>
  14.  
  15.  
  16.                     <div id="titulacion">
  17.                     <label>
  18.                     <select name="origen" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="ORIGEN" id="comment" required/>
  19.                        
  20.                     <option value="" disabled selected>ORIGEN</option>
  21.                         <?php
  22.                        $localidades = mysqli_query($dbservidor2,"SELECT * from localidades order by localidad");
  23.                        while ($resultado = mysqli_fetch_array($localidades)){
  24.                        ?>
  25.                     <option value = "<?php echo $resultado['localidad']; ?>"><?php echo strtoupper($resultado['localidad']); ?></option>
  26.                         <?php
  27.                        }
  28.                        ?>
  29.                     </select>
  30.  
  31.            
  32.                         <select name="destino" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" placeholder="DESTINO" id="comment" required/>
  33.                        
  34.                     <option value="" disabled selected>DESTINO</option>
  35.                         <?php
  36.                        $localidades = mysqli_query($dbservidor2,"SELECT * from localidades order by localidad");
  37.                        while ($resultado = mysqli_fetch_array($localidades)){
  38.                        ?>
  39.                     <option value = "<?php echo $resultado['localidad']; ?>"><?php echo strtoupper($resultado['localidad']); ?></option>
  40.                         <?php
  41.                        }
  42.                        ?>
  43.                     </select>
  44.  
  45.                     <input type="text" pattern="[1-9]" class="validate[required,custom[onlyLetter],length[0,100]] feedback-input" name="cantidad" id="comment" placeholder="CANTIDAD DE BOLETOS" required />
  46.  
  47.                     </label>
  48.                     </div>
  49.  
  50.            
  51.  
  52.               <div class="submit">
  53.                 <input type="submit" value="IMPRIMIR COMPROBANTE" id="button-blue"/>
  54.                 <div class="ease"></div>
  55.               </div>
  56.             </form>