habilitar campo de texto con select

fjchavez · #1 (**permalink**) 10/04/2008, 14:58

Hola a todos, tengo este codigo.

Código HTML:

<html>

<head>
  <title></title>
<script laguage="javascript">
function activar(elemento)
{
if(elemento.value=="Otros")
{document.getElementById("aparece").style.display = "inline";}
else
{document.getElementById("aparece").style.display = "none";}
}
function habilitar(form)
{
if(form.asistente.options[0].selected || form.asistente.options[2].selected==true)
{form.universidad.disabled=true;}
else
{form.universidad.disabled=false;}
}
</script>

</head>

<body>

<form>

<table>
  <tr>
    <td>Tipo de Asistente</td>
    <td colspan="3">
      <select name="asistente" onChange="habilitar(this.form)">
        <option value=" " selected="selected">[Seleccione]</option>
        <option value="Universitario">Universitario</option>
        <option value="Profesional">Profesional</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Universidad</td>
    <td>
      <select name="universidad" onChange="activar(this.form)" disabled>
        <option value=" " selected="selected">[Seleccione su opcion]</option>
        <option value="JJJ">JJJ</option>
        <option value="YYY">YYY</option>
        <option value="ZZZ">ZZZ</option>
        <option value=Otros">Otros</option>
      </select>
    </td>
    <td id="aparece" style="display:none">Cual?</td>
    <td id="aparece" style="display:none"><input type="text" name="otras" /></td>
  </tr>
</table>
</form>
</body>
</html>

Lo que quiero hacer es que cuando la opcion del primer select sea universitario, se active el segundo select, ademas que cuando en el segundo select se maque la opcion Otros aparezca un campo de texto.
De momento no me aparece el campo de texto cuando elijo otros en el 2do select.

ugmaster · #2 (**permalink**) 11/04/2008, 08:48

Hola fjchavez.

Si te entendí bien así quedaría tu código.

Código:

<html>

<head>
  <title></title>
<script laguage="javascript">
function activar(elemento)
{

if(elemento.universidad.options[elemento.universidad.selectedIndex].text=="Otros")
  {
    var textfield = document.createElement('Input');
    textfield.setAttribute('type','text');  
    elemento.appendChild(textfield);
    document.getElementById("aparece").style.display = "inline";
  }
else
  {
     document.getElementById("aparece").style.display = "none";}
  }
function habilitar(form)
{
if(form.asistente.options[0].selected || form.asistente.options[2].selected==true)
  {
    form.universidad.disabled=true;
   }
else
   {
     form.universidad.disabled=false;
   }
}
</script>

</head>

<body>

<form >

<table>
  <tr>
    <td>Tipo de Asistente</td>
    <td colspan="3">
      <select name="asistente" onChange="habilitar(this.form)">
        <option value=" " selected="selected">[Seleccione]</option>
        <option value="Universitario">Universitario</option>
        <option value="Profesional">Profesional</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>Universidad</td>
    <td>
      <select name="universidad" onChange="activar(this.form)" disabled>
        <option value=" " selected="selected">[Seleccione su opcion]</option>
        <option value="JJJ">JJJ</option>
        <option value="YYY">YYY</option>
        <option value="ZZZ">ZZZ</option>
        <option value=Otros">Otros</option>
      </select>
    </td>
    <td id="aparece" style="display:none">Cual?</td>
    <td id="aparece" style="display:none"><input type="text" name="otras" /></td>
  </tr>
</table>
</form>
</body>
</html>

que fue lo que se modifico...

1.- En la función activar tu pasa elemento que en este caso es la forma, dentro de la forma tu tienes tus dos select, así que para llegar al valor seleccionado al select primero debes de posicionarte en el select.

elemento.universidad

Ahora bién para obtener el texto seleccionado bástaria con un

elemento.universidad.options[elemento.universidad.selectedIndex].text

Que no es más que acceder a la option que nos interesa por medio del selectindex del select universidad, creo que hay una forma más sencilla jeje pero ahorita solo se me ocurrio así.

Ahora cuando ya accediste hasta el texto del segundo select (universidad) ahora podremos compararlo.

if(elemento.universidad.options[elemento.universidad.selectedIndex].text=="Otros")

2.- Crear el input y asignarles los atributos.

var textfield = document.createElement('Input');
textfield.setAttribute('type','text');

Esto es con algo de DHTML, jeje se crea una variable que sele asigna el elemento creado en este caso un input. Pero el input necesita saber que tipo de input es, así que le decimos que su atributo type="text"

3.- agregamos el input a la forma.

elemento.appendChild(textfield);

Listo...

Espero te ayude..

fjchavez · #3 (**permalink**) 11/04/2008, 09:34

Gracias me ha sido muy util

.....aunque tu creas un campo de texto mas, de hecho el codigo original de la funcion la cambie por

Código:

function activar(elemento)
{
	if(elemento.universidad.options[elemento.universidad.selectedIndex].value=="Otros")
	  {document.getElementById("aparece").style.display = "inline";}
	else
	  {document.getElementById("aparece").style.display = "none";}
}

......he hecho algunas modificaciones y me ha quedado bien, el problema mio iba porque ponia

Código:

elemento.universidad.options[form.universidad.selectedIndex].value

en ves de

Código:

elemento.universidad.options[form.universidad.selectedIndex].text

y luego modificando la parte html

Código HTML:

<td id="aparece" style="display:none">Cual?</td>
<td id="aparece" style="display:none"><input type="text" name="otras" /></td>

por

Código HTML:

<td colspan="2" id="aparece" style="display:none">Cual?<input type="text" name="otras" /></td>

se solucionó

fjchavez · #4 (**permalink**) 11/04/2008, 15:27

Hola denuevo...solicito otra vez su ayuda:
Supongamos que elijo en el primer select UNIVERSITARIO, y en el segundo select OTROS, entonces aparece el campo de texto.
Pero si supongamos me equivoque y en el primer select cambio a PROFESIONAL, el segundo select se desactiva pero el campo de texto sigue visible, como hago para que se escoda o desaparezca????.

ugmaster · #5 (**permalink**) 11/04/2008, 18:34

Pues se me ocurre que a la hora de mandar a deshabilitar el segundo select obtengas el input y lo elimines de la forma.

a=document.getElementsByTagName("input")
elemento.removeChild(a)

o tambien cambiando el tipo del input de text a hide así

a=document.getElementByTagName("Input");
a[0].setAttribute('type','hide');

Espero te sirva.. Saludos.