Habilitar/deshabilitar segun seleccion de lista desplegable

drenis · #1 (**permalink**) 03/03/2005, 09:43

Hola estoy trabajando en un formulario y quiero que, al seleccionar una lista desplegable (traida de mysql) se habiliten o deshabiliten (no que desaparezcan) ciertos campos del formulario segun la opcion seleccionada...

no se como hacerlo asi que si alguien me da una ayuda seria genial...

Cluster · #2 (**permalink**) 03/03/2005, 10:22

Con javascript puedes hacerlo (y deberías hacerlo) ... Puedes usar capas (layer's) y jugar con su "visibilidad" ante eventos onChange() o similares de tu lista desplegable ..

Tendrías que confirmar que "relación" o como vas a indentificar que opción de tu lista generada va a determinar cuando mostrar esos otros campos.

Un saludo,

drenis · #3 (**permalink**) 03/03/2005, 10:30

no se si es esto lo que me pides.. la lista desplegable tiene varios campos, trabaja, no trabaja e independiente. lo que quiero hacer es que cuando selecciones no trabaja te deshabilite la caja de texto sueldo, nombre empresa, telefono empresa, etc para que no puedas ingresar datos (necesito deshabilitarlas para que quien ingrese no pierda tiempo ingresando datos que no serán tomados en cuenta al momento de grabar), si seleccionas independiente que las habilite para ingresar datos...

es eso???

JavierB · #4 (**permalink**) 03/03/2005, 12:12

Hola drenis

Prueba este ejemplo:

Código PHP:

  <html> 
<head> 
<script type="text/javascript"> 
function habilitar(obj) { 
  var hab; 
  frm=obj.form; 
  num=obj.selectedIndex; 
  if (num==1) hab=true; 
  else if (num==2) hab=false; 
  frm.sueldo.disabled=hab; 
  frm.nombre.disabled=hab; 
} 
</script> 
</head> 
<body> 
<form> 
<select onchange="habilitar(this)"> 
<option>trabaja</option> 
<option>no trabaja</option> 
<option>independiente</option> 
</select> 
<input type="text" name="sueldo" /> 
<input type="text" name="nombre" /> 
</body> 
</html>

Saludos,

dark angel · #5 (**permalink**) 03/03/2005, 12:21

Saludos.

Veras, todo el truco esta en jugar con la propiedad disabled (javascript) de los controles que quieres desactivar y ademas con el evento OnChange de la lista de selección.

Por ejemplo, aqui abajo te dejo un codigo, que genera una pagina simple con un select (con tres opciones) y tres campos de texto (en el formulario). Al seleccionar las opciones del select se activan y desactivan las cajas de texto (opcion 1 todas activas, opcion 2: desactivado el segundo texto; Opcion 3 desactivado texto 1 y 3)

Como vez en el OnChange del select llamo a la funcion CambiarFormulario esta segun el elemento seleciconado en la lista, activa/desactiva los textbox... por ejemplo con document.forms[0].Texto1.disabled=true; se desactiva el control Texto1

y con document.forms[0].Texto1.disabled=false; re reactiva el mismo control

Bueno el codigo completo es el siguiente:

Código:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<script language="JavaScript">
function CambiarFormulario(){
	switch(document.forms[0].LISTA.selectedIndex){
		case 0: 
			document.forms[0].Texto1.disabled=false;
			document.forms[0].Texto2.disabled=false;	
			document.forms[0].Texto3.disabled=false;
			break;
		case 1: 
			document.forms[0].Texto1.disabled=false;
			document.forms[0].Texto2.disabled=true;	
			document.forms[0].Texto3.disabled=false;
			break;
		case 2: 
			document.forms[0].Texto1.disabled=true;
			document.forms[0].Texto2.disabled=false;	
			document.forms[0].Texto3.disabled=true;
			break;
	}
}

</script>

<body background="Design/BodyBackground.GIF" onLoad="CambiarFormulario();">
<form name="form1" method="post" action="">
  <p>Seleccion: 
    <select name="LISTA" id="LISTA" onChange="CambiarFormulario()">
      <option selected>Opcion 1</option>
      <option>Opcion 2</option>
      <option>Opcion 3</option>
    </select>
  </p>
  <p>Texto1 
    <input name="Texto1" type="text" id="Texto1">
    <br>
    Texto2 
    <input name="Texto2" type="text" id="Texto2">
    <br>
    Texto3 
    <input name="Texto3" type="text" id="Texto3">
  </p>
</form>
</body>
</html>

Espero que te sirva...

Por cierto, este foro esta excelente

No se como no lo habia encontrado antes.

Saludos

drenis · #6 (**permalink**) 03/03/2005, 12:58

Eso era lo que necesitaba... muchisimas gracias

isisunicornio · #7 (**permalink**) 09/06/2015, 11:27

Hola Buenas tarddes a todos, quisiera aprovechar este foro para realizar una pregunta, tengo un select con opciones las cuales jalo desde una base de datos, pero quisiera saber si se puede que en el momento que el usuario seleccione una opcion especifica, se bloquee el select y que el usuario ya no lo pueda modificar. se los agradeceria muchisimo

isisunicornio · #8 (**permalink**) 09/06/2015, 11:28

Hola Buenas tarddes a todos, quisiera aprovechar este foro para realizar una pregunta, tengo un select con opciones las cuales jalo desde una base de datos, pero quisiera saber si se puede que en el momento que el usuario seleccione una opcion especifica, se bloquee el select y que el usuario ya no lo pueda modificar. se los agradeceria muchisimo

PHPeros · #9 (**permalink**) 09/06/2015, 11:32

isisunicornio, no revivas temas antiguos.