Formulario Expandido con Selector Lista

rousalin · #1 (**permalink**) 02/04/2012, 15:40

Hola a todos! Necesito ayuda... Estoy intentando hacer un formulario con un campo oculto que se expanda al seleccionar una opción de una lista. Para hacerlo cogí de guía el tutorial de Desarrollo Web.
http://www.desarrolloweb.com/articulos/2122.php

En el ejemplo usan chekboxes y yo quería hacerlo con una lista, pero no me funciona... Alguien me podría decir dónde está el fallo? Es que por más que lo busco no lo encuentro... Muchas gracias por anticipado!

Código HTML:

<script type='text/javascript' src='formexp.js'></script>
<script>
function expandir_formulario(){
 if (document.f1.expandir.checked){
	xDisplay('capaexpansion', 'block')
 }else{
	xDisplay('capaexpansion', 'none')
 }

}

</script>
<style type="text/css">
#capainicio{
	position:relative;
}
#capaexpansion{
	position:relative;
	display:none;

}
#capafinal{
	position:relative;

}
</style>
</head>

<body>

<form name=f1>
<div id=capainicio>
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td width=140>Nombre:</td>
<td><input type="text" name="nombre" size="25"></td>
</tr>
<tr>
<td>Apellidos:</td>
<td><input type="text" name="edad" size="3"></td>
</tr>
<tr>
<td>
<select>
<option value=""></option>
<option value="0">hola</option>
<option value="5">hola2</option>
<option value="1" name="expandir" onBlur="expandir_formulario()">Pulsar esta</Option>
</select>
</td>
</tr>
</table> 
</div>
<div id=capaexpansion>
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td width=140>Sexo:</td>
<td><input type="text" name="sexo" size="25"></td>
</tr>
<tr>
<td>Edad:</td>
<td><input type="text" name="edad" size="3"></td>
</tr>
</table>
</div>
<div id=capafinal>
<table cellspacing="2" cellpadding="2" border="0">
<tr>
<td width=140>Comentarios:</td>
<td><textarea cols="39" rows="4" name="coment"></textarea></td>
</tr>
</table>
</div>
</form>

emprear · #2 (**permalink**) 04/04/2012, 03:09

Tenés muchos errores en el concepto, el evento a usar sería onchange(), el atributo name, no se corresponde para option, tenes que identificar el valor clickeado y posteriormente, si es el que corresponde, cambiar la propiedad display del div oculto, que de paso digamos un campo oculto de formulario <input type="hidden" /> nada tiene que ver con un elemento oculto en la página

Código Javascript:

Ver original<script type="text/javascript">
//<![CDATA[
function expandir_formulario(){
var abrir = document.getElementById('expandir').value;
if(abrir == 1){
document.getElementById('div_expandir').style.display= 'block';
}
}
//]]>
</script>

Código HTML:

Ver original<select id="expandir" onchange="expandir_formulario();">
<option value=""></option>
<option value="0">hola</option>
<option value="5">hola2</option>
<option value="1">Pulsar esta</Option>
</select>
<div id="div_expandir" style="display: none;">xxxxxx</div>

Saludos y a leer los manuales
http://librosweb.es