Como habilitar/deshabilitar un type text según lo seleccionado en un select

rbczgz · #1 (**permalink**) 27/06/2006, 16:35

Hola a tod@s!!

En las FAQ's hay un ejemplo:

Código PHP:

  <html>  
 <head>  
 </head>  
 <body>  
  <form name="frm">  
   Seleccione:   
   <select name="sel">  
    <option value="1">Uno</option>  
    <option value="2">Dos</option>  
    <option value="3">Tres</option>  
   </select><br>  
   <input type="checkbox" name="chk" checked onclick="javascript:document.frm.sel.disabled = !this.checked">Habilitar selección  
  </form>  
 </body>  
</html>

Pero yo lo que necesito es que al selccionar una de las opciones (en el caso que nos ocupa, es la última) se habilite un campo de texto, pero si no está seleccionada esta opción, permanezca deshabilitado (incluso mejor oculto/visible).

La verdad es que no tengo ni la más remota idea de cómo hacerlo

¿Alguien me puede echar un cable?

Gracias por anticipado.

rbczgz · #2 (**permalink**) 27/06/2006, 17:31

He probado con esto, pero no funciona:

Código PHP:

  <html>  
<head>  
</head>  
<body>  
<form name="frm">  
Seleccione:   
<select name="sel">  
<option value="1">Uno</option>  
<option value="2">Dos</option>  
<option value="3">Tres</option>  
</select> 
<br> 
<script language="javascript"> 
if (document.frm.sel.value == '3'){document.getElementById('text').style.display ="";} 
</script> 
<input type="text" id="text" name="text" size="10" style="display: none;"> 
</form>  
</body>  
</html>

Y el problema es que no se que es lo que estoy haciendo mal...

Espero que alguien me pueda ayudar

Cap.Buscapina · #3 (**permalink**) 27/06/2006, 17:44

<html>
<head>
</head>
<body>
<form name="frm">
Seleccione:
<select name="sel" onchange="document.getElementById('text').style.di splay=(this.value==3)?'':'none';">
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
</select>
<br>

<input type="text" id="text" name="text" size="10" style="display: none;">
</form>
</body>
</html>

caricatos · #4 (**permalink**) 28/06/2006, 00:02

Hola:

Yo añadiría al código de Capi (¡Hola

!) el código para habilitar/deshabilitar el campo:

Código:

<select
name="sel"
onchange="with(document.getElementById('text')) {style.display = (this.value == 3) ? 'inline' : 'none'; disabled = (this.value != '3')}">

Para evitar que se envíe la variable en blanco o con valores erróneos...

Saludos

rbczgz · #5 (**permalink**) 28/06/2006, 04:11

Hola Capi y Caricatos!!

Muchas gracias a los dos, funciona perfecto

Cap.Buscapina · #6 (**permalink**) 28/06/2006, 09:35

exelente aporte Sir Caricatos.

saludos

rbczgz · #7 (**permalink**) 03/07/2006, 00:53

Hola de nuevo...

Pues en principio parecía que funcionaba pero resulta que no, el problema es que tanto el select como el text deben tener el mismo nombre, ya que el script que los recoge es parte de un sistema y, para que reciba el valor debe ser con ese nombre, en este caso el valor en el cual se debe mostrar el campo de texto es "Otro", no lo puedo poner vacío, ya que vacío es el valor que tiene por defecto (<option value=""><--Elegir--></option>) y si le pongo el valor "Otro", me captura los dos valores, el del select y, a continuación el que el usuario coloca en el text.

¿Se puede hacer algo para que sólo recoja el valor del text cuando se elije esta opción pero sin recojer el del select?

Me pareció entender que para eso era el código que propuso Caricatos (Gracias mil...

) pero veo que no, y aprovecho la ocasión (aunque sea abusar de la paciencia del amigo Caricatos...) para preguntar, puesto que las explicaciones que das son fabulosas, si podrías explicar paso a paso el código que planteaste:

Código:

<select
name="sel"
onchange="with(document.getElementById('text')) {style.display = (this.value == 3) ? 'inline' : 'none'; disabled = (this.value != '3')}">

Ya que, además de que funcione, que lo hace, me gustaría entenderlo, para que sirva para algo más que como "solución" al problema puntual.

Muchísimas gracias, maestro.

caricatos · #8 (**permalink**) 03/07/2006, 01:36

Hola:

Una opción es chequear el contenido con el envío (onsubmit en el form)

Poniéndole al select un id para diferenciarlo (también podría usarse el array de nombres...)
<select id="selector" name="sel" >

y el form:
<form onsubmit="with(document.getElementById('selector') ) {disabled = (value == '')" ...>

Otra cosa (yo lo hago a veces:
<select name="sel" id="sel1" >
...
<input type="text" name="sel" id="sel2" disabled />

<input type="checkbox" onclick="document.getElementById('sel1').disabled = this.checked; document.getElementById('sel1').disabled = !this.checked" />

La idea es un checkbox sin nombre que alterne la habilitación de ambos elementos con mismo nombre.

Saludos

rbczgz · #9 (**permalink**) 03/07/2006, 12:29

Hola de nuevo Caricatos!!

Muchas gracias por tan rápida respuesta, lo malo es que he tenido que salir y acabo de verla...

La cuestión no es chequear el contenido, sino, que sólo se envíe el valor del campo de texto si eligen la opción "Otro", podría ser comprobando el contenido y si es "Otro Lo que sea", eliminar "Otro" y enviar sólo "Lo que sea" pero no tengo ni idea de cómo hacerlo

Por otra parte lo de desactivar el select, en IE no se desactiva pero en Morcilla sí, el problema es que si se equivocan y eligen el que no es, no lo pueden corregir, eso lo he solucionado dejando sólo la opción que proponía Cap. Buscapina, pero el problema sigue siendo que se envían los valores del select y del text...

Me puedes echar un cable? Muchas gracias.

Cap.Buscapina · #10 (**permalink**) 03/07/2006, 17:39

holas,

a ver.... si entiendo bien lo que querés hacer:

Cita:

<html>
<head>
<script>
function verif(){
s=document.getElementById('selec');
t=document.getElementById('otro');
if(s.selectedIndex==3){
s.disabled=true;
t.disabled=false;
t.style.display="";
}else{
s.disabled=false;
t.disabled=true;
t.style.display="none";
}
}
</script>
</head>
<body>
<form name="frm">
Seleccione:
<select id="selec" name="aaa" onchange="verif()">
<option value="1">Uno</option>
<option value="2">Dos</option>
<option value="3">Tres</option>
<option value="otro">Otro</option>
</select>
<br>

<input type="text" id="otro" name="aaa" size="10" style="display:none" disabled>
</form>
</body>
</html>

resumiendo: un select con opciones, y si el usuario tiene una opcion no contemplada que seleccione "otro" y le permita ingresar otro valor, y que adicionalmente cuando se envíe, llege al servidor una sola variable con lo seleccionado (y no dos (o un array) como sería en el caso de dos campos con el mismo nombre).

si es así, creo que lo que puse puede servirte , si no, poné el trozo del formulario a ver que es lo que querés.

saludos.

pd: si es así como lo querés, tendrias que pensar en un botón (o similar) para que cuando el select esté disabled y se quiera "volver a empezar", resetee tdos los campos.

pd2: lo que esta en rojo no es necesario en un primer momento, pero podría tener una utilidad futura

rbczgz · #11 (**permalink**) 06/07/2006, 14:07

Hola Capi!!

Ya he probado el código que me has puesto pero no hace nada de nada

Te posteo aquí el trozo del form que se refiere a esto:

Código:

<tr>
<td align="right" style="font-size: 10pt">País:</td>
<td>
<select name="pais" id="pais" size="1" tabindex="4" onchange="document.getElementById('otropais').style.display=(this.value=='Otro')?'':'none';">
<option value=""><--Elegir un país--></option>
<option value="Alemania">Alemania</option>
<option value="Antillas Holandesas">Antillas Holandesas</option>
<option value="Argentina">Argentina</option>
<option value="Australia">Australia</option>
<option value="Austria">Austria</option>
<option value="Bélgica">Bélgica</option>
<option value="Belize">Belize</option>
<option value="Bolivia">Bolivia</option>
<option value="Brasil">Brasil</option>
<option value="Bulgaria">Bulgaria</option>
<option value="Canada">Canada</option>
<option value="Chile">Chile</option>
<option value="Colombia">Colombia</option>
<option value="Costa Rica">Costa Rica</option>
<option value="Cuba">Cuba</option>
<option value="Dinamarca">Dinamarca</option>
<option value="Ecuador">Ecuador</option>
<option value="El Salvador">El Salvador</option>
<option value="España">España</option>
<option value="Estados Unidos">Estados Unidos</option>
<option value="Filipinas">Filipinas</option>
<option value="Finlandia">Finlandia</option>
<option value="Francia">Francia</option>
<option value="Guatemala">Guatemala</option>
<option value="Guyana">Guyana</option>
<option value="Haiti">Haiti</option>
<option value="Honduras">Honduras</option>
<option value="Hungría">Hungría</option>
<option value="Irlanda">Irlanda</option>
<option value="Israel">Israel</option>
<option value="Italia">Italia</option>
<option value="Jamaica">Jamaica</option>
<option value="Marruecos">Marruecos</option>
<option value="México">México</option>
<option value="Nicaragua">Nicaragua</option>
<option value="Noruega">Noruega</option>
<option value="Panamá">Panamá</option>
<option value="Paraguay">Paraguay</option>
<option value="Peru">Peru</option>
<option value="Portugal">Portugal</option>
<option value="Republica Dominicana">Republica Dominicana</option>
<option value="Sudáfrica">Sudáfrica</option>
<option value="Suecia">Suecia</option>
<option value="Trinidad and Tobago">Trinidad and Tobago</option>
<option value="Uruguay">Uruguay</option>
<option value="Venezuela">Venezuela</option>
<option value="Yugoslavia">Yugoslavia</option>
<option value="Otro">Otro</option>
</select>
</td>
</tr>
<tr style="display: none;" id="otropais">
<td align="right" style="font-size: 10pt">Escribe el país:</td>
<td><input type="text" name="pais" size="30" maxlength="30"></td>
</tr>

Según está, funciona en IE y FF, pero envía los dos campos, el del select y el del text, uno a continuación del otro.

La idea es que el usuario elija su país de la lista, si no se encuentra, selecciona la opción "Otro" y se le muestra el campo de texto para que escriba el país, pero al enviarlo sólo debe enviar uno de los dos.

El código que posteó Caricatos (

) funciona según debe hacerlo en FF (en IE no desactiva el select) pero el problema es que entonces, si el usuario se ha equivocado al elegir el país debe resetear todo el form y volverlo a rellenar, entonces no es una solución viable (que los usuarios somos muy comodones...

)

Acepto cualquier sugerencia porque estoy totalmente perdido

Muchas gracias

Cap.Buscapina · #12 (**permalink**) 06/07/2006, 16:31

a ver ahora:

Cita:

<html>
<head>
<script>
function verif(){
s=document.getElementById('pais');
t=document.getElementById('otro');
if(s.value=="Otro"){
t.disabled=false;
document.getElementById('otropais').style.display= "";
s.disabled=true;
}
}

function re(){
document.getElementById('pais').disabled=false;
document.getElementById('pais').selectedIndex=0;
document.getElementById('otro').disabled=true;
document.getElementById('otropais').style.display= "none";

}

</script></head>

<body>
<form><table><tr><td><select name="pais" id="pais" size="1" tabindex="4" onchange="verif()">
<option value=""><--Elegir un país--></option>
<option value="Alemania">Alemania</option>
<option value="Antillas Holandesas">Antillas Holandesas</option>
<option value="Argentina">Argentina</option>
<option value="Otro">Otro</option>
</select><input name="" type="button" value="Recomenzar" onClick="re();">
</td>
</tr>
<tr style="display: none;" id="otropais">
<td align="right" style="font-size: 10pt">Escribe el país:</td>
<td><input type="text" name="pais" id="otro" size="30" maxlength="30" disabled></td>
</tr>
</table>
<input type="submit" name="Submit" value="Enviar">
</form>
</body>
</html>

andrews · #13 (**permalink**) 07/07/2006, 09:46

Yo lo haría de esta forma:

<script type="text/javascript">
function muestra(formulario)
{
switch(formulario)
{
case 0:
document.getElementById("TD").style.display="none" ;
document.getElementById("TC").style.display="none" ;
document.getElementById("FID").style.display="none ";
document.getElementById("CTA").style.display="none ";
break;
case 1:
document.getElementById("TD").style.display="inlin e";
document.getElementById("TC").style.display="none" ;
document.getElementById("FID").style.display="none ";
document.getElementById("CTA").style.display="none ";
break;
case 2:
document.getElementById("TD").style.display="none" ;
document.getElementById("TC").style.display="inlin e";
document.getElementById("FID").style.display="none ";
document.getElementById("CTA").style.display="none ";
break;
case 3:
document.getElementById("TD").style.display="none" ;
document.getElementById("TC").style.display="none" ;
document.getElementById("FID").style.display="inli ne";
document.getElementById("CTA").style.display="none ";
break;
case 4:
document.getElementById("TD").style.display="none" ;
document.getElementById("TC").style.display="none" ;
document.getElementById("FID").style.display="none ";
document.getElementById("CTA").style.display="inli ne";
break;
}
}
</script>
<body>

<form>
<select onchange="muestra(this.selectedIndex);">
<option value="0">Seleccione un producto</option>
<option value="1">Tarjeta de débito</option>
<option value="2">Tarjeta de crédito</option>
<option value="3">Fideicomiso</option>
<option value="4">Cuenta de ahorro, corriente o FAL</option>
</select>
</form>

<form action="" method="post" name="form1" id="TD" style="display:none;">
Tarjeta de débito
</form>

<form id="TC" name="form1" method="post" action="" style="display:none;">
Tarjeta de crédito
</form>

<form id="CTA" name="form1" method="post" action="" style="display:none;">
Cuenta ahorro, corriente o FAL
</form>

<form id="FID" name="form1" method="post" action="" style="display:none;">
Fideicomiso
</form>

rbczgz · #14 (**permalink**) 11/07/2006, 13:29

Gracias Andrews y Capi

La forma de Andrews no me encaja para el tipo de form que tengo, y la de Capi no me funciona, no hace nada y me sigue enviado los dos valores, el del select y del text, el problema no está tanto en que se deshabilite sino en que sólo envíe el valor del text en el caso de que el usuario seleccione "Otro", de la forma que está ahora, envía el valor del select y seguido el valor del text, lo que no se es como hacer para que, llamándose igual el select y el text, sólo envíe uno de los dos valores según lo que seleccione el usuario.

No se si me explico, pero no se explicarlo de otra forma, y menos aún el cómo se hace

Espero que alguien me pueda echar un cable...

Gracias por anticipado...

Cap.Buscapina · #15 (**permalink**) 11/07/2006, 16:49

Cita:

Iniciado por rbczgz

y la de Capi no me funciona, no hace nada y me sigue enviado los dos valores, el del select y del text, ...

estas seguro?

yo lo probé y siempre envía un solo dato .

rbczgz · #16 (**permalink**) 11/07/2006, 16:55

Hola Capi!!

Seguro. también puede ser que esté haciendo algo mal, pero he copiado el código tal y como me lo has puesto.

Lo he probado en IE y en FF y me envía los dos datos, no entiendo que es lo que puede pasar, además en FF no desactiva el select, en IE sí.

Cap.Buscapina · #17 (**permalink**) 11/07/2006, 17:41

pos entonses alguno de los dos a bebido algo en mal estado

, porque a mi me funciona correctamente en FF , opera e IE.

saludos

andrews · #18 (**permalink**) 12/07/2006, 14:19

A mi tambien me funciona sin problemas.....