Javascript: Ocultar/mostrar campos en un formulario.
Mayo 24th, 2008
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 activadaif (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 
También te puede interesar:
Formularios: Enviar Array de un select multiple Php: Formulario ‘Recomienda a un amigo’ Javascript vs CSS: Rollover de imágenes Php: Elegir a que email enviar el formulario. Php: enviar formulario con mail ()
Haz llegar este artículo a más gente:
