Como deshabilitar u ocultar parte de un formulario

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

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.

Gracias!

calambrenet · #2 (**permalink**) 29/09/2012, 13:21

Quizá lo más sencillo sea hacerlo con jquery, por ejemplo:
Tienes un formulario para clientes y quieres que aparezcan el campo 'razón social' al seleccionar en un select la opción 'empresa'. Este campo lo metes en un div o un fielset:

Código HTML:

Ver original<fieldset id="Razon_social" style="display:none">
<!-- el lavel, el campo o lo que quieras -->
</fieldset>

Luego pones el select con las opciones:

Código HTML:

Ver original<select id="clientes_tipo" name="clientes[tipo]">
<option selected="selected" value="0">Cliente final</option>
<option value="1">Cliente empresa</option>
<option value="2">Cliente organismo público</option>
</select>

Y luego pones el código jscript, al seleccionar la opción que quieres que aparezca el campo. Si seleccionas las otras opciones lo ocultas:

Código HTML:

Ver original<script type="text/javascript">
<!--
$('document').ready(function(){
$('#clientes_tipo').change(function(){
    if($(this).val()==1)
        $('#Razon_social').show();
    else
        $('#Razon_social').hide();  
});
});
//-->
</script>

Más o menos sería así.

calambrenet · #3 (**permalink**) 29/09/2012, 13:23

AH! En el caso de un menú o un dropdown sería igual pero cambiando la acción al click del dropdown en lugar de usar el evento onchange del select.

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

Hola Compañero! gracias por la ayuda, la verdad es que no se mucho de esto con javascript, no se si dejandote aqui el formulario que estoy haciendo te sería más facil ayudarme.

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.

Este es el codigo fuente del formulario, puedes visualizarlo online aquí:

[URL="http://htmledit.squarefree.com/"]http://htmledit.squarefree.com/[/URL]

Solo pegas el codigo en la ventana de arriba y lo miras en la de abajo.

Este es el codigo:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Diabetes Lead Form</title>
<?xml-stylesheet type="text/css" href="base.css" encoding="utf-8"?>
<script type="text/javascript" src="view.js"></script>

<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>

Gracias de antemano por la ayuda que me puedas dar

flashmax · #5 (**permalink**) 29/09/2012, 15:53

hola prueba con la función muestra oculta. puedes ocultar los div con los input que no quieras ver.
ejemplo:

Código HTML:

<html>
<head>

<title>Muestra oculta</title>

<script language="JavaScript">

function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('contenido_a_mostrar');/* "contenido_a_mostrar" es el nombre que le dimos al DIV */
}
</script>
</head>

<body>

<!--Al hace llamado a la función solo tienes que idicar el nombre del DIV entre parentesis -->
<p><a style='cursor: pointer;' onclick="muestra_oculta('contenido_a_mostrar')" title="">Mostrar / Ocultar</a></p>

<div id="contenido_a_mostrar">
<p>Este contenido tiene que mostrarse con el link</p>
</div>

</body>
</html>