Foros del Web » Programando para Internet » Javascript »

Ocultar/Mostrar formulario con un checkbox

 Estas en el tema de Ocultar/Mostrar formulario con un checkbox en el foro de Javascript en Foros del Web. Lo que quiero es que si marco el checkbox se me oculte el formulario. Cómo lo hago? He acortado el código (espero no haberme dejado ...
  #1 (permalink)  
Antiguo 15/09/2008, 05:29
 
Fecha de Ingreso: agosto-2008
Mensajes: 161
Antigüedad: 16 años, 4 meses
Puntos: 0
Ocultar/Mostrar formulario con un checkbox
Lo que quiero es que si marco el checkbox se me oculte el formulario. Cómo lo hago?
He acortado el código (espero no haberme dejado nada):

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/base.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Documento sin t&iacute;tulo</title>
<!-- InstanceEndEditable -->
<script type="text/JavaScript">
<!--
function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
<!--
@import url("Gestora2.css");
.Estilo1 {font-size: xx-small}
-->
</style>
<script type="text/JavaScript">
<!--
function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) { p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' must contain an e-mail address.\n';
      } else if (test!='R') { num = parseFloat(val);
        if (isNaN(val)) errors+='- '+nm+' must contain a number.\n';
        if (test.indexOf('inRange') != -1) { p=test.indexOf(':');
          min=test.substring(8,p); max=test.substring(p+1);
          if (num<min || max<num) errors+='- '+nm+' must contain a number between '+min+' and '+max+'.\n';
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) alert('The following error(s) occurred:\n'+errors);
  document.MM_returnValue = (errors == '');
}
//-->
</script>
<!-- InstanceEndEditable -->
<td colspan="14"><!-- InstanceBeginEditable name="Contenido" -->
      <table width="100%">
        <!--DWLayoutTable-->
        <tr valign="top">
          <td width="200" height="286" rowspan="6" align="left"><img src="imagenes/menuRegistro4.jpg" width="200" height="286" /></td>
          <td width="1" height="100%" rowspan="6" align="left" bgcolor="#000166"><img src="transparent-wedge.gif" width="1" height="100%" /></td>
          <td height="43" colspan="2" align="left" valign="middle" class="tituloRegistro"><img src="imagenes/iconoExperiencia.gif" width="42" height="43" /> A&Ntilde;ADE O MODIFICA TU EXPERIENCIA LABORAL </td>
        </tr>
        <tr valign="top">
          <td height="2" colspan="2" bgcolor="#FF0000"><img src="transparent-wedge.gif" width="100%" height="2" /></td>
        </tr>
        <tr valign="top">
          <td height="40" colspan="2" valign="middle" class="TextoNormal"><strong><span class="Estilo1">&gt;&gt; </span>A&ntilde;ade tu experiencia laboral o modif&iacute;cala. </strong></td>
        </tr>
        <tr valign="top">
          <td height="40" colspan="2" align="left" valign="middle" class="TextoNormal"><input name="bSinExperiencia" type="checkbox" id="bSinExperiencia" onclick="javascript: MostraAmaga('formulario')" value="checkbox" />
          <label for="checkbox">Sin experiencia </label></td>
        </tr>
        <tr valign="top">
          <td height="40" colspan="2" align="left" valign="middle" class="TextoNormal"><form id="form2" name="form2" method="post" action="">
            <table width="90%" border="0" align="center" bgcolor="#FFFF66">
                      <tr bgcolor="#99FF00">
                        <td height="30" align="right" bgcolor="#FFFF66" class="FuenteRegistro">PUESTO</td>
                        <td height="26" colspan="2" align="left" bgcolor="#FFFF66" class="FuenteRegistro"><label for="textfield"></label>
                            <input name="puesto" type="text" id="puesto" size="40" /></td>
                      </tr>
                      <tr bgcolor="#99FF00">
                        <td height="30" align="right" bgcolor="#FFFF66" class="FuenteRegistro">EMPRESA ETT </td>
                        <td colspan="2" align="left" bgcolor="#FFFF66" class="FuenteRegistro"><label for="textfield"></label>
                            <input name="empresaETT" type="text" id="empresaETT" size="30" /></td>
                      </tr>
                      <tr bgcolor="#99FF00">
                        <td height="30" align="right" bgcolor="#FFFF66" class="FuenteRegistro">EMPRESA USUARIA</td>
                        <td colspan="2" align="left" bgcolor="#FFFF66" class="FuenteRegistro"><input name="empresaUsuaria" type="text" id="empresaUsuaria" size="30" /></td>
                      </tr>
                      <tr bgcolor="#99FF00">
                        <td height="30" align="right" bgcolor="#FFFF66" class="FuenteRegistro">SECTOR</td>
                        <td colspan="2" align="left" bgcolor="#FFFF66" class="FuenteRegistro"><label for="textfield"></label>
                            <input name="sector" type="text" id="sector" size="30" /></td>
                      </tr>
                      <tr bgcolor="#99FF00">
                        <td height="30" align="right" bgcolor="#FFFF66" class="FuenteRegistro">FECHA INICIO </td>
                        <td width="11%" align="center" bgcolor="#FFFF66" class="FuenteRegistro">Mes
                          <label for="textfield"></label>
                            <input name="mesInicio" type="text" id="mesInicio" onblur="MM_validateForm('puesto','','R','empresaETT','','R','empresaUsuaria','','R','sector','','R','mesInicio','','RinRange1:12','a&ntilde;oInicio','','RinRange1958:2008','mesFin','','RinRange1:12','a&ntilde;oFin','','RinRange1958:2008');return document.MM_returnValue" size="2" maxlength="2" /></td>
                        <td width="59%" align="left" bgcolor="#FFFF66" class="FuenteRegistro">A&ntilde;o
                          <label for="textfield"></label>
                            <input name="a&ntilde;oInicio" type="text" id="a&ntilde;oInicio" size="4" maxlength="4" /></td>
                      </tr>
                      <tr bgcolor="#99FF00">
                        <td height="30" align="right" bgcolor="#FFFF66" class="FuenteRegistro">FECHA FIN </td>
                        <td align="center" bgcolor="#FFFF66" class="FuenteRegistro">Mes
                          <label for="textfield"></label>
                            <input name="mesFin" type="text" id="mesFin" onblur="MM_validateForm('mesInicio','','RinRange1:12','a&ntilde;oInicio','','RinRange1958:2008','mesFin','','R','a&ntilde;oFin','','RinRange1958:2008');return document.MM_returnValue" size="2" maxlength="2" /></td>
                        <td align="left" bgcolor="#FFFF66" class="FuenteRegistro">A&ntilde;o
                          <label for="textfield"></label>
                            <input name="a&ntilde;oFin" type="text" id="a&ntilde;oFin" size="4" maxlength="4" /></td>
                      </tr>
                      <tr bgcolor="#99FF00">
                        <td height="40" colspan="3" align="center" valign="middle" bgcolor="#FFFF66" class="FuenteRegistro"><input name="Submit" type="button" class="TextoNormal" id="Submit" value="A&ntilde;adir experiencia" /></td>
                      </tr>
                    </table>
          </form> </td>
        </tr>
        
        <tr valign="top">
          <td width="368" align="right" valign="top" class="TextoNormal" onclick="javascript: MostraAmaga('formulario')"><img src="imagenes/guardar2.PNG" width="96" height="32" /></td>
          <td width="369" height="50" align="left" valign="top" class="TextoNormal"><img src="imagenes/cancelar.PNG" width="96" height="32" /></td>
        </tr>
      </table>
    <!-- InstanceEndEditable --></td>
  </tr>
  <tr>
    <td height="18" colspan="12" align="left" valign="middle" bgcolor="#00006A"><span class="Estilo1">n&ordm; Autorizaci&oacute;n 09/0005/95 </span></td>
    <td width="27" height="18" align="left" valign="middle" bgcolor="#00006A"><img src="imagenes/carta6.PNG" width="18" height="14" /></td>
    <td width="98" height="18" align="left" valign="middle" bgcolor="#00006A"><a href="mailto:[email protected]">Contacto</a></td>
  </tr>
</table>
</body>
<!-- InstanceEnd --></html>
  #2 (permalink)  
Antiguo 15/09/2008, 05:31
 
Fecha de Ingreso: agosto-2008
Mensajes: 161
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Ocultar/Mostrar formulario con un checkbox
Un resumen más o menos:

Un usuario tiene que rellenar su experiencia laboral; si marca "Sin experiencia" se oculta el formulario que en teoría tendría que rellenar, sino todo sigue su curso normal.
  #3 (permalink)  
Antiguo 15/09/2008, 05:35
 
Fecha de Ingreso: diciembre-2006
Mensajes: 57
Antigüedad: 18 años
Puntos: 0
Respuesta: Ocultar/Mostrar formulario con un checkbox
1) Incluye todo el <form> dentro de un div con id="nombre_que_quieras"

2) Con javascript controla el evento onclick del checkbox.

3) Si está seleccionado (el checkbox) haz que el div de nombre "nombre_que_quieras" se oculte (usa getElementById y visibility:hidden)
  #4 (permalink)  
Antiguo 15/09/2008, 05:39
 
Fecha de Ingreso: agosto-2008
Mensajes: 161
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Ocultar/Mostrar formulario con un checkbox
La verdad es que estoy empezando en esto y no te entiendo muy bien (por lo menos lo último)

Podrías ponerme el código o donde puedo encontrar un ejemplo? Gracias
  #5 (permalink)  
Antiguo 15/09/2008, 05:44
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: Ocultar/Mostrar formulario con un checkbox
Hola:

Parece que tu problema es javascript y no php... además, solo se puede enviar un formulario a la vez y no se pueden anidar, por lo que mejor será que esos datos sean de un solo form...

supongamos que tienes esos datos en una capa llamada "experiencia"...

En el control deberías poner algo así:
Código: 
<input type="checkbox" name="experiencia"
onclick="document.getElementById('experiencia').style.display = (this.checked) ? 'none':'block'" />
Por cierto, acabo de reportar el mensaje para que lo muevan a javascript.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 15/09/2008, 05:45
 
Fecha de Ingreso: diciembre-2006
Mensajes: 57
Antigüedad: 18 años
Puntos: 0
Respuesta: Ocultar/Mostrar formulario con un checkbox
Supongamos que la capa tiene de id el valor "capa_formulario"

Dentro del js que checkea que el checkbox está seleccionado escribes:

var capa = document.getElementById('capa_formulario')

Con esto puedes acceder a la capa que contiene el formulario.

Ahora la vamos a esconderla (no visible por el usuario)

capa.style.visibility="hidden"

Ya no se verá el formulario.
  #7 (permalink)  
Antiguo 15/09/2008, 06:02
 
Fecha de Ingreso: agosto-2008
Mensajes: 161
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Ocultar/Mostrar formulario con un checkbox
Vale, he hecho esto y funciona:

Código: 
<SCRIPT>
function mostrar_ocultar(hide) {
if (document.layers)
document.divExperiencia.visibility = hide ? 'hide' : 'show';
else {
var g = document.all ? document.all.divExperiencia :
document.getElementById('divExperiencia');
g.style.visibility = hide ? 'hidden' : 'visible';
}
}
</SCRIPT>
Lo que pasa es que deja todo el hueco del formulario libre y abajo del todo los botones, hay alguna forma de que los botones suban?
  #8 (permalink)  
Antiguo 15/09/2008, 06:05
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: Ocultar/Mostrar formulario con un checkbox
Hola:

El estilo visibility reserva espacio y display no... deberías haber probado mi código.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #9 (permalink)  
Antiguo 15/09/2008, 06:10
Avatar de Legoltaz  
Fecha de Ingreso: agosto-2008
Mensajes: 325
Antigüedad: 16 años, 4 meses
Puntos: 6
Respuesta: Ocultar/Mostrar formulario con un checkbox
O también:

Código PHP:
<input type="checkbox" onClick="var div = document.getElementById('divExperiencia');if(this.checked){div.style.display = 'none';}else{div.style.display = 'block'}" /> 
  #10 (permalink)  
Antiguo 15/09/2008, 06:19
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: Ocultar/Mostrar formulario con un checkbox
Cita:
Iniciado por Legoltaz Ver Mensaje
O también:

Código PHP:
<input type="checkbox" onClick="var div = document.getElementById('divExperiencia');if(this.checked){div.style.display = 'none';}else{div.style.display = 'block'}" /> 
¡Je, je!

Has puesto lo mismo que yo, pero la sintaxis que yo usé es más abreviada (y como indiqué en mi mensaje, el ejemplo es con un div con otro id).

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #11 (permalink)  
Antiguo 15/09/2008, 06:19
 
Fecha de Ingreso: agosto-2008
Mensajes: 161
Antigüedad: 16 años, 4 meses
Puntos: 0
Respuesta: Ocultar/Mostrar formulario con un checkbox
¡¡¡¡ MUCHAS GRACIAS A TODOS !!!

Ya me sale perfecto. He puesto esto y funciona:

Código: 
<input name="bSinExperiencia" type="checkbox" id="bSinExperiencia" onclick="document.getElementById('divExperiencia').style.display = (this.checked) ? 'none':'block'" value="checkbox" />
¡¡¡ MIL GRACIAS !!!
  #12 (permalink)  
Antiguo 15/09/2008, 06:20
Avatar de caricatos
Moderador
  
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 8 meses
Puntos: 1284
Respuesta: Ocultar/Mostrar formulario con un checkbox
Cita:
Iniciado por una_xikilla Ver Mensaje
¡¡¡¡ MUCHAS GRACIAS A TODOS !!!

Ya me sale perfecto. He puesto esto y funciona:

Código: 
<input name="bSinExperiencia" type="checkbox" id="bSinExperiencia" onclick="document.getElementById('divExperiencia').style.display = (this.checked) ? 'none':'block'" value="checkbox" />
¡¡¡ MIL GRACIAS !!!
¡Estupendo!
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 19:01.