SprintDevelop.com - Diseño y desarrollo web - Diseño, desarrollo web,Aplicaciones Móviles, TabletasSprintDevelop.com - Diseño y desarrollo web
Mostrando Codigo - Javascript
Code

Javascript - Mostrar y ocultar formulario desde un checkbox

Códigos Javascript

Si queremos ofrecer a nuestros visitantes la opcion de mostrar o ocultar campos de formulario, este script puede ser muy util. Al pulsar sobre el checkbox se muestra u oculta una lista desplegable. Ademas de utilizar javascrit utiliza css y layers o capas
Visitas: 72,143 - 20/10/2003 2:17:40
DemoNO CONTIENE ARCHIVO DESCARGABLEComentario
CODIGO
Este codigo aun no ha sido probado por Tutores.org en ChromeEste codigo aun no ha sido probado por Tutores.org en FirefoxCodigo probado en Internet Explorer 7+Este codigo aun no ha sido probado por Tutores.org en OperaEste codigo aun no ha sido probado por Tutores.org en Safari


# Codigo ofrecido por Tutores.org

  1. <HTML>
  2. <HEAD>
  3. <STYLE>
  4. .hideable { position: relative; visibility: visible; }
  5. </STYLE>
  6. <SCRIPT>
  7. function mostrar_ocultar(hide) {
  8.   if (document.layers)
  9.     document.contenido.visibility = hide ? 'hide' : 'show';
  10.   else {
  11.     var g = document.all ? document.all.contenido :
  12.               document.getElementById('contenido');
  13.     g.style.visibility = hide ? 'hidden' : 'visible';
  14.   }
  15. }
  16. </SCRIPT>
  17. </HEAD>
  18. <BODY>
  19. <TABLE>
  20. <TR>
  21. <TD VALIGN="top">
  22. <FORM NAME="form0">
  23.         Mostrar?
  24.         <INPUT TYPE="checkbox" NAME="Accion"
  25.        ONCLICK="mostrar_ocultar(this.checked);"
  26. >
  27. </FORM>
  28. </TD>
  29. <TD>
  30. <SPAN ID="contenido" CLASS="hideable">
  31. <FORM NAME="form1">
  32. <SELECT NAME="nombre">
  33. <OPTION>Elige
  34. <OPTION VALUE="tutores">Tutores
  35. <OPTION VALUE="google">google
  36. <OPTION VALUE="yahoo">yahoo
  37. </SELECT>
  38. </FORM>
  39. </SPAN>
  40. </TD>
  41. </TR>
  42. </TABLE>
  43. </BODY>
  44. </HTML>



ENLACE AL CODIGO
Si quieres enlazar desde tu pagina a este codigo
<!-- Inicio enlace Tutores.org -->
<a title="Tutores.org - Mostrar y ocultar formulario desde un checkbox" href="http://www.tutores.org/codigo/771/" target="_blank">Mostrar y ocultar formulario desde un checkbox</a>
<!-- Final enlace Tutores.org -->
COMENTARIOS
Comentario usuario
06-07-2007 12:58:37
5 5
Hola me parece muy util tu codigo, sin embargo creo que esta invertida la función del chex box, considero que al activar el chek box, el formulario se muestra y viceversa.

Trate de corregir el codigo pero no me funciona. Podrias ayudarme?
Comentario usuario
Lizbeth
1 5
Hola, estoy de acuerdo con veronica... seria mas util de esa manera ... pero de cualquier manera es excelente...

estoy tratando de hacer algo parecido, pero no he encontrado como por mas que investigo!

yo tengo alrededor de 23 checkbox los cuales cada uno da como resultado un reporte al activarlo... lo que quiero hacer es que al momento de activar un checkbox y me de el reporte, no quiero que me sigan apareciendo los checkbox!!!

osea al actualizar la pagina y me muestre solo el reporte me sigue mostrando todos los checkbox!!!

quiero ocultarlos una vez que los utlize!!
me explico??
por favor si me pueden ayudar lo mas pronto posible!!

gracias!!!
Comentario usuario
BrNoMen
5 5
Aqui esta tal como lo quieren, de manera inversa.

<html>
<head>
<title>CB Hide/Show</title>
<script type="text/javascript">
<!--
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
//-->
</script>
</head>
<body>
<h3 align="center"> This JavaScript shows how to hide divisions </h3>

<div id="div1" style="display:none">
<table border=1 id="t1">
<tr>
<td>i am here!</td>
</tr>
</table>
</div>

<form>
<input type="checkbox" name="c1" onclick="showMe('div1', this)">Show Hide Checkbox
</form>
</body>
</html>


Lo encontre en otra web. :)
Comentario usuario
Sin definir
1 5
Aqui modifique el codigo para ocultar y mostrar formularios con checkbox

Primero:
Campos visibles con el check box activado y despues invisible con el check box desactivado.

(
<HTML>
<HEAD>
_______________________________

Codigo por Karloz Moreno
_______________________________

<STYLE>
.hideable { position: relative; visibility: visible; }
</STYLE>
<SCRIPT>
function Mostrar_Ocultar(hide) {
if (document.layers)
/*aqui se cambian los valores 'show' y 'hide' para cultarlo o mostrarlo
aqui la variable (hide) esta en show para ver los campos
document.contenido.visibility = ****variable(hide)**** ? ****estado('show') ****y despues *****: 'hide'; */
document.contenido.visibility = hide ? 'show' : 'hide';
else {
var g = document.all ? document.all.contenido :
document.getElementById('contenido');
g.style.visibility = hide ? 'visible' : 'hidden';
}
}
</SCRIPT>
</HEAD>
<BODY>
<TABLE>
<TR>
<TD VALIGN="top">
<FORM NAME="form0">
Marcalo Para Ver los Campos?
<INPUT NAME="Accion" TYPE="checkbox"
ONCLICK="Mostrar_Ocultar(this.checked);"
>
</FORM></TD>
<TD>
<SPAN ID="contenido" CLASS="hideable">
<FORM NAME="form1">
<p>
<select name="nombre">
<option>Tipo Documento
<option value="Cedula Ciudadania">CC
<option value="Tarjeta Indentidad">TI
<option value="Cedula Extranjeria">CE
</select>
</p>
<p>
<label>
<input type="text" name="Observaciones" id="Observaciones">
<br>
<br>
<textarea name="Observ" id="Observ" cols="45" rows="5">Introduce un texto
Comentario usuario
abdiel
5 5
gracias :D ... me ayudaste mucho
Comentario usuario
sadcito
5 5
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}

Esta parte alguien me puede explicar se que es la funcion para ocultar. Yo pienso es no copiar nada mas los ejemplos sino tambien entenderlo para hacer las futuras modificaciones.
Estare muy agradecida quien me ayude por favor espero su espuresta gracias
Comentario usuario
Jgonzalezd.sist
5 5
Hola muchach@s el mismo codigo pero para hacer lo invertido

<html>
<head>
<STYLE>
.hideable { position: relative; visibility: visible; }
</STYLE>
<SCRIPT>
function mostrar_ocultar(hide) {
if (document.layers)
document.contenido.visibility = !hide ? 'hide' : 'show';
else {
var g = document.all ? document.all.contenido :
document.getElementById('contenido');
g.style.visibility = !hide ? 'hidden' : 'visible';
}
}
</SCRIPT>
</HEAD>
<BODY onload="mostrar_ocultar(false)">
<TABLE>
<TR>
<TD VALIGN="top">
<FORM NAME="form0">
Mostrar?
<INPUT TYPE="checkbox" NAME="Accion" ONCLICK="mostrar_ocultar(this.checked);">
</FORM>
</TD>
<TD>
<SPAN ID="contenido" CLASS="hideable">
<FORM NAME="form1">
<SELECT NAME="nombre">
<OPTION>Elige
<OPTION VALUE="tutores">Tutores
<OPTION VALUE="google">google
<OPTION VALUE="yahoo">yahoo
</SELECT>
</FORM>
</SPAN>
</TD>
</TR>
</TABLE>
</BODY>
</HTML>
Comentario usuario
Jgonzalezd.sist
3 5
y aca el codigo implementado:

<html>
<head>
<style>
.hideable { position: relative; visibility: visible; }
</style>
<script>
/*
function mostrar_ocultar(hide) {
if (document.layers)
document.contenido.visibility = !hide ? 'hide' : 'show';
else {
var g = document.all ? document.all.contenido :
document.getElementById('contenido');
g.style.visibility = !hide ? 'hidden' : 'visible';
}
}
*/
function mostrar_ocultar(value) {


if (document.layers)
{
alert('entro');

if(flag)
{
document.linuxPlans.visibility ='hide';
}else{
document.linuxPlans.visibility ='show';
}

}else {

var l = document.all ? document.all.linuxPlans :
document.getElementById('linuxPlans');
var w = document.all ? document.all.windowsPlans :
document.getElementById('windowsPlans');
//g.style.visibility = !hide ? 'hidden' : 'visible';
//g.style.visibility = !hide ? 'hidden' : 'visible';

if(value=='linux')
{
l.style.visibility ='visible';
w.style.visibility ='hidden';
}else if(value=='windows'){
w.style.visibility ='visible';
l.style.visibility ='hidden';
}else{
l.style.visibility ='hidden';
w.style.visibility ='hidden';
}
}
}
</script>
</head>
<body onLoad="mostrar_ocultar(false)">
<form name="form0">
<table border="1" align="center">
<tr>
<td>
Nombre: </td>
<td>
<input type="text" name="uname"> </td>
</tr>
<tr>
<td>
Apellido: </td>
<td>
<input type="text" name="ulastname"> </td>
</tr>
<tr>
<td >Telefono</td>
<td>
<input type="text" name="uphone"> </td>
</tr>
<tr>
<td valign="top">Identificacion </td>
<td><input type="text" name="uid"> </td>
</tr>
<tr>
<td valign="top">E-Mail</td>
<td><input type="text" name="umail"></td>
</tr>
<tr>
<td valign="top">Servicio</td>
<td><select name="service" id="service" >
<option value="hosting">Hosting</option>
<option value="design">design</option>
<option value="domain">domain</option>
</select></td></tr>
<tr>
<td valign="top">Tipo Producto </td>
<td>
<input name="productType" type="radio" value="linux" onClick="mostrar_ocultar(this.value);">Linux
<span id="linuxPlans" class="hideable">
<select name="select">
<option>Elige
<option value="centos">500 MB
<option value="ubuntu">1 GB
<option value="redhat">4 GB
</select><br>
</span>
<input name="productType" type="radio" onClick="mostrar_ocultar(this.value);" value="windows">Windows

<span id="windowsPlans" class="hideable">
<select name="select">
<option>Elige
<option value="s2003">1 GB
<option value="s2008">4 GB
</select><br>
</span>
</td>
</tr>
<tr>
<td valign="top"> </td>
<td> </td>
</tr>
<tr>
<td valign="top"> </td>
<td> </td>
</tr>
<tr>
<td valign="top"> </td>
<td> </td>
</tr>
</table>
</form>
</body>
</html>
Comentario usuario
nihao
1 5
quisiera saber como se puede hacer este mismo ejemplo, pero en vez de checkbox, sea mediante un link o enlace.quedo atento a una respuesta, saludos.
Comentario usuario
01/05/2004 16.50.01
4 5
hola amigos, apenas hoy encontre este codigo para aquellos que dicen que esta invertido solo requiere una pequeña modificacion, donde dice g.style.visibility = hide ? 'hidden' : 'visible';
inviertan los valores hidden y visible y eso es todo:)
Comentario usuario
09/08/2005 16.59.46
3 5
Hola amigos, necesito el mismo ejemplo pero habilitar el formulario desde un combobox... les estare inmensamente agradecido
Comentario usuario
24-04-2016 16:10:45
5 5
hola buenos días perdón la molestia pero yo igual no e encontrado la manera de hacerlo estoy intentando hacer un registro en el cual si es alumno aparecen campos extras otros se ocultan no se como hacerlo si me pueden ayudar les agradeceré mucho
INSERTAR COMENTARIO

Usuario:
Email:
Comentario:
Codigo Seguridad

Antes de enviar un comentario...
Todos los comentarios son revisados personalmente
Todo comentario que no haga relacion al codigo mostrado en esta pagina sera eliminado
Usuarios registrados tienen preferencia en recibir respuestas de ayuda!!
Ademas de poder insertar Imagenes,Enlaces y otras propiedades del editor.
Por favor, insertar los comentarios descriptivos.