Javascript: Ocultar/mostrar campos en un formulario.

Mayo 24th, 2008

biblioteca de codigo

Hoy, por ser sábado y porque actúa el Chikilicuatre esta noche, voy a escribir una función sencillita, así no me tiro mucho rato en el ordenador xD

Al tema, me han pedido un formulario de contacto en el que si el usuario elige una opción, aparezca un campo adicional.

Ej. Si en el grupo de opciones de “A través de donde nos ha conocido” elige la opción “Otros”, aparece un campo de texto para introducir la información.

Lo primero es crear el formulario:

//se le asigna un name al formulario de contacto.
<form action=”<?=$_SERVER['PHP_SELF']?>” method=”post” name=”fcontacto”>
//inputs
<p>A través de donde nos has conocido:<br />
//importante llamar a la función
<input type=”radio” name=”Conocido” value=”Google” id=”Conocido_0″ onclick=”mostrarReferencia();” /> Google
<input type=”radio” name=”Conocido” value=”Otros” id=”Conocido_1″ onclick=”mostrarReferencia();” /> Otros
</p>
//div oculto
<div id=”desdeotro” style=”display:none;”>
<p>Referencia de la oferta:</p>
<p><input type=”text” name=”otro” class=”input” /></p>
</div>
Y la función que tenemos que agregar al head:
//funcion javascript en la cabecera del documento
<script type=”text/javascript”>
<!–
function mostrarReferencia(){
//Si la opcion con id Conocido_1 (dentro del documento > formulario con name fcontacto >     y a la vez dentro del array de Conocido) esta activada
if (document.fcontacto.Conocido[1].checked == true) {
//muestra (cambiando la propiedad display del estilo) el div con id ‘desdeotro’
document.getElementById(’desdeotro’).style.display=’block’;
//por el contrario, si no esta seleccionada
} else {
//oculta el div con id ‘desdeotro’
document.getElementById(’desdeotro’).style.display=’none’;
}
}
–>
</script>
Atención: Hay que llamar a la función desde los campos apropiados, cambiar los id’s y name’s ajustándolos a tu formulario, colocar el script con la función en el <head> de tu documento.
Y listo! Fácil y sencillo.. xD
Entendiendo esto ya podéis adaptarlo a más situaciones, viene muy bien tenerlo a mano :P

Haz llegar este artículo a más gente:

¡Comenta tu también!