Como puedo ocultar parte de un formulario

Pantera72 · #1 (**permalink**) 28/09/2012, 23:43

Hola a todos!

Estoy haciendo un formulario en HTML y necesito que cuando el usuario seleccione una opción en un menu dropdown una parte del formulario quede desactivada, es decir, que se deshabilite o que se oculte del usuario. Necesito que me ayuden indicandome como puedo hacer esto con javascript.

Gracias!

Dradi7 · #2 (**permalink**) 29/09/2012, 00:13

pero cual es tu estructura de tu formulario para poder saber como ayudarte

rodrigo791 · #3 (**permalink**) 29/09/2012, 00:50

con el DOM hace referencia a ese elemento 1ero, luego ponele un estilo display: none

Pantera72 · #4 (**permalink**) 29/09/2012, 12:10

Cita:

Iniciado por Dradi7

pero cual es tu estructura de tu formulario para poder saber como ayudarte

Hola Compañero! gracias por la ayuda, la verdad es que no se mucho de esto con javascript

Este es el codigo fuente del formulario:

<style type="text/css">
body {
background-color: #000;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
font-size: 16px;
color: #CCC;
}

#aaa {
background-color: #666;
font-size: 16px;
font-weight: bold;
color: #00F;
}

#bbb {
font-size: 20px;
color: #F00;
text-decoration: blink;
}

</style>
</head>
<body id="main_body" >
<div id="form_container">

</div>
<li id="li_127" > Are you on disability? *
<div id="disability">
<select class="element select medium" id="element_17" name="disability">
<option value="" selected="selected"></option>
<option value="Yes" >Yes</option>
<option value="NO" >No</option>
</select>
</div>

<div id="bbb">
<p align="left"><b>If the question "Are you on disability?" is NO, please go down to Medical information please leave the rest in blank</b></p>
</div>
<li id="li_137" > May I ask who your Primary Insurance is with? ( If other, say Thanks and good bye )
<div id="Pinsurance">
<select class="element select medium" id="element_17" name="Pinsurance">
<option value="" selected="selected"></option>
<option value="Medicare" >Medicare</option>
<option value="Other" >Other</option>
</select>
</div>
<div id="aaa">Medical Information
<li id="li_147" > Do you test your Blood Sugar at Home?
<div id="testblood">
<select class="element select medium" id="element_17" name="testblood">
<option value="" selected="selected"></option>
<option value="Yes" >yes</option>
<option value="No" >No</option>

</select>
</div>
<li id="li_157" > How many times a day do you test?
<div id="times">
<select class="element select medium" id="element_17" name="times">
<option value="" selected="selected"></option>
<option value="1" >1</option>
<option value="2" >2</option>
option value="3" >3</option>
<option value="4" >4</option>
option value="5" >5</option>
<option value="6" >6</option>
option value="7" >7</option>
<option value="8" >8</option>
<option value="9" >9</option>
</select>
</div>
<li id="li_911" >Can I have the Name of the Testing Meter that you are currently using?
<div>
<input id="meter" name="meterbrand" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<li id="li_157" > Do you get your testing supplies through mail or your local pharmacy?
<div id="supplies">
<select class="element select medium" id="supplies" name="supplies">
<option value="" selected="selected"></option>
<option value="Mail" >Mail</option>
<option value="Pharmacy" >Pharmacy</option>
</select>
</div>
<li id="li_157" > What amount of supplies do you have remaining?
<div id="amount">
<select class="element select medium" id="amount" name="amount">
<option value="" selected="selected"></option>
<option value="2 Weeks" >2 Weeks</option>
<option value="1 Month" >1 Month</option>
<option value="2 Months" >2 Months</option>
<option value="3 Months" >3 Months</option>
<option value="6 Months" >6 Months</option>
</select>
</div>
<li id="li_167" > At this point is it necessary for you to be using insulin?
<div id="insulin">
<select class="element select medium" id="insulin" name="insulin">
<option value="" selected="selected"></option>
<option value="Yes" >Yes</option>
<option value="No" >No</option>
</select>
</div>
</li> <li id="li_166" > Best time to contact you?
<div id="BT">
<select class="element select medium" id="element_16" name="best_time">
<option value="" selected="selected"></option>
<option value="Morning" >Morning</option>
<option value="Afternoon" >Afternoon</option>
<option value="Evenings" >Evenings</option>
</select>
</div>
<li id="li_1699" > What is your favorite color?
<div>
<input id="color" name="color" class="element text medium" type="text" maxlength="255" value=""/>
</div>
</div>
<div id="aaa">End Medical Information
</div>
<li id="li_159" > Medicare claim Number of Patient? *
<div>
<input id="claim" name="claim" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<li id="li_160" > Do you have a secondary insurance provider? *
<div>
<input id="secunday" name="secundary" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<div id="aaa">Doctor's Information
</div>
<li id="li_161" > Dr. Last Name *
<div>
<input id="drlastname" name="drlastname" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<li id="li_162" > Dr. First Name *
<div>
<input id="drfirstname" name="drfirstname" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<li id="li_7" > Dr.State *
<div>

</select>
</div>
</li>

<li id="li_164" > Dr. Zip Code *
<div>
<input id="drzip" name="drzip" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<li id="li_165" > Dr. Address *
<div>
<input id="draddress" name="draddress" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<li id="li_170" > Dr. City *
<div>
<input id="drcity" name="drcity" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<li id="li_172" > Dr. Phone *
<div>
<input id="drphone" name="drphone" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<li id="li_173" > Dr. Fax *
<div>
<input id="drfax" name="drfax" class="element text medium" type="text" maxlength="255" value=""/>
</div> <li id="li_174" > Dr. NPI *
<div>
<input id="drnpi" name="drnpi" class="element text medium" type="text" maxlength="255" value=""/>
</div>
<li class="buttons">
<input type="hidden" name="form_id" value="455398" />

<input id="saveForm" class="button_text" type="submit" name="submit" value="Submit" />
</li>
</ul>
</form>
<div id="footer"></div>
</div>
</body>
</html>

Lo que necesito es que en la opción que dice "¿Are you on disability? *, (que esta justo antes de las letras rojas ) cuando el usuario marque la opcion NO en el menu dropdown, solamente los espacios que se soliciten abajo en "Medical Information" hasta donde dice "End Medical Information" queden habilitados, y los que siguen no, o que desaparezcan, lo que sea más sencillo.

Así puedo eliminar la advertencia en letras rojas que dice "If the question "Are you on disability?" is NO, please go down to Medical information please leave the rest in blank"

Espero haberme podido explicar bien! es que yo no tengo conocimientos de java aun, te doy las gracias por ayudarme

rodrigo791 · #5 (**permalink**) 29/09/2012, 14:44

Como te dije usas esto por ejemplo que pertenece a las funciones del DOM,

Código Javascript:

Ver originaldocument.getElementById('IdDelElemento').style.display = none;

Con eso haces que se oculte un elemento con el id que le pones dentro de getElementById, adaptalo a tu gusto.

Dradi7 · #6 (**permalink**) 29/09/2012, 18:53

Cita:

Iniciado por rodrigo791

Como te dije usas esto por ejemplo que pertenece a las funciones del DOM,

Código Javascript:

Ver originaldocument.getElementById('IdDelElemento').style.display = none;

Con eso haces que se oculte un elemento con el id que le pones dentro de getElementById, adaptalo a tu gusto.

Como menciona rodrigo791 debes aplicar esto a tu gusto lo que si debo aclarar para que puedas oculta un grupo de elementos del DOM debes hacer algo como esto

Código HTML:

Ver original<div id="datos_personales">
<!-- ACA ADENTRO PUEDES PONER UNA LISTA O CANTIDAD DE CONTROLES -->
</div>

Luego aplicas tal como te puso rodrigo791

Código Javascript:

Ver originaldocument.getElementById('datos_personales').style.display = none;

Pantera72 · #7 (**permalink**) 29/09/2012, 20:03

Cita:

Iniciado por Dradi7

Como menciona rodrigo791 debes aplicar esto a tu gusto lo que si debo aclarar para que puedas oculta un grupo de elementos del DOM debes hacer algo como esto

Código HTML:

Ver original<div id="datos_personales">
<!-- ACA ADENTRO PUEDES PONER UNA LISTA O CANTIDAD DE CONTROLES -->
</div>

Luego aplicas tal como te puso rodrigo791

Código Javascript:

Ver originaldocument.getElementById('datos_personales').style.display = none;

Ok, compañero, gracias, pero me queda una duda, recuerden que la opcion que define esto es si el usuario selecciona la opcion "NO" de un menu desplegable... como le indico al html esto? o al javascript? perdonen pero es que no he trabajado antes con javascript, por eso puse el codigo... sería mucha molestia pedirles si pueden ponerme un ejemplo? o aplicarme uno con el codigo que les di?

Gracias y saludos!!