Codigo de Ejemplo para Ocultar campos con JavaScript

 El ‘truco’ está en identificar las filas que se quieren ocultar y usar unas funciones en javascript para acceder a las propiedades de esos objetos para modificar su visibilidad.

 


<html>
<head>
<title>REGGNETWORK</title>

<script type=”text/javascript”>

function MostrarFilas(Fila) {
   // Almacenamos en “elementos” el objeto “Fila” recibido como parámetro
   var elementos = document.getElementsByName(Fila);

   // Mostramos todos los objetos del mismo identificador
   // Con propiedad display = “” dejamos al navegador que ponga su tipo por defecto
   for (i = 0; i < elementos.length; i++)
      elementos[i].style.display =””;
}

function OcultarFilas(Fila) {
   // Almacenamos en “elementos” el objeto “Fila” recibido como parámetro
   var elementos = document.getElementsByName(Fila);

   // Ocultamos todos los objetos del mismo identificador
   for (k = 0; k < elementos.length; k++)
      elementos[k].style.display = “none”;
}

</script>
</head>

<body >

<form name=”formulario” method=”post” action=””>
   <table border=”1″ cellspacing=”0″ cellpadding=”5″>
      <tr>
         <td colspan=”2″><font color=”Red”>Los campos marcados con un asterisco son obligatorios</font></td>
      </tr>
      <tr>
         <td><font color=”Red”>(*) Nombre:</font></td>
         <td><input name=”Nombre” type=”text”></td>
      </tr>
      <tr name=”DatosOpcionales” id=”DatosOpcionales” style=”display:none”>
         <td><i>Apellidos:</i></td>
         <td><input name=”Apellidos” type=”text”></td>
      </tr>
      <tr>
         <td><font color=”Red”>(*) E-mail:</font></td>
         <td><input name=”E-mail” type=”text”></td>
      </tr>
      <tr name=”DatosOpcionales” id=”DatosOpcionales” style=”display:none”>
         <td><i>Telefono:</i></td>
         <td><input name=”Telefono” type=”text”></td>
      </tr>
   </table>
   <br>
   <br>
   <a href=”javascript:MostrarFilas(‘DatosOpcionales’)”>Mostrar Datos Opcionales</a>
   <br>
   <a href=”javascript:OcultarFilas(‘DatosOpcionales’)”>Ocultar Datos Opcionales</a>
</form>
</body>
</html>
 


Para probar create un archivo .html con bloc de notas y pega el codigo y abre con tu navegador.


German Reyna

CEO DE REGGNETWORK.COM

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *