Publicentral.com - promocion,paginas,web,tutores,publicentralPromocion de paginas webs
Mostrando Codigo - Javascript

Mostrar y ocultar formulario desde un checkbox

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: 58026 - 20/10/2003 2:17:40
NO CONTIENE ARCHIVO DESCARGABLE
CODIGO
Codigo probado en Internet Explorer 4++Este codigo aun no ha sido probado por Tutores.org en FirefoxEste codigo aun no ha sido probado por Tutores.org en NetscapeEste 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
<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>
<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>

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
VERONICA 06-07-2007 12:58:37
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?
Lizbeth
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!!!
BrNoMen
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. :)
Sin definir
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
abdiel
gracias :D ... me ayudaste mucho
sadcito
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
Jgonzalezd.sist
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>
Jgonzalezd.sist
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>
nihao
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.
Carlos 01/05/2004 16.50.01
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:)
alex 09/08/2005 16.59.46
Hola amigos, necesito el mismo ejemplo pero habilitar el formulario desde un combobox... les estare inmensamente agradecido
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.