Mostrar campo dependiendo de la selección:

AdrianSeg · #1 (**permalink**) 14/02/2010, 10:49

tengo el siguiente formulario en html:

Código HTML:

<!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>Documento sin título</title>
</head>

<body>
Menú para añadir usuarios:
<p>Nombre de usuario
  <input name="usuario" type="text" />
</p>
<p>Contraseña
  <input name="usuario" type="text" />
</p>
<p>
  E-mail
    <input name="usuario" type="text" />
</p>
<p>Rango: 
 <label>
    <select name="ppppp" size="1" id="ppppp">
      <option value="1">Vicerrectorado Calidad</option>
      <option value="2">Vicerectorado Grado</option>
      <option value="3">Vicerrectorado Estudiantes</option>
      <option value="4">Coordinador CGIC</option>
      <option value="5">Miembro CGIC</option>
    </select>
  </label>

</p>
<p>
  Titulación  
  <label>
    <select name="ppppp" size="1" id="ppppp">
      <option selected="selected">Ninguna</option>
      <option value="magisterio">Magisterio</option>
      <option value="empresariales">Empresariales</option>
      <option value="derecho">Derecho</option>
    </select>
  </label>
</p>
</body>
</html>

Un formulario simple, el problema es que necesito que el campo titulación solo sea visible si se ha selecionado anteriormente en rango alguna de estas opciones:

Código HTML:

 <option value="3">Vicerrectorado Estudiantes</option>
      <option value="4">Coordinador CGIC</option>
      <option value="5">Miembro CGIC</option>

¿Hay alguna manera de hacerlo en php? ¿O tiene que ser javascript?¿Algún ejemplo?

CdG · #2 (**permalink**) 14/02/2010, 11:29

creo que esto te puede ayudar
saludos

AdrianSeg · #3 (**permalink**) 14/02/2010, 12:21

Ni idea de como usarlo tio.

Kaze71 · #4 (**permalink**) 14/02/2010, 17:53

Prueba con algo así:

Código HTML:

<!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>Documento sin título</title>
<style type="text/css">
  p#titulacion{
    display:none;
  }
</style>
<script type="text/javascript">
  function comprobar(){
    var etiqueta = document.getElementById('titulacion');
	var source = document.getElementById('ppppp');
    if(source.selectedIndex >= 2)
    {
      etiqueta.style.display = 'block';
    }
    else
    {
      etiqueta.style.display = 'none';
    }
  }
</script>
</head>

<body>
Menú para añadir usuarios:
<p>Nombre de usuario
  <input name="usuario" type="text" />
</p>
<p>Contraseña
  <input name="usuario" type="text" />
</p>
<p>
  E-mail
    <input name="usuario" type="text" />
</p>
<p>Rango: 
 <label onclick="comprobar()">
    <select name="ppppp" size="1" id="ppppp">
      <option value="1">Vicerrectorado Calidad</option>
      <option value="2">Vicerectorado Grado</option>
      <option value="3">Vicerrectorado Estudiantes</option>
      <option value="4">Coordinador CGIC</option>
      <option value="5">Miembro CGIC</option>
    </select>
  </label>

</p>
<p id="titulacion">
  Titulación  
  <label>
    <select name="ppppp" size="1" id="ppppp">
      <option selected="selected">Ninguna</option>
      <option value="magisterio">Magisterio</option>
      <option value="empresariales">Empresariales</option>
      <option value="derecho">Derecho</option>
    </select>
  </label>
</p>
</body>
</html>

CHuLoSoY · #5 (**permalink**) 14/02/2010, 18:01

El código anterior se puede simplificar y mejorar mucho a simple vista.
Para empezar, la función cambiar no existe ?¿??¿ y los onblur de los option todos innecesarios.

Código PHP:

Ver original<script type="text/javascript">
  function comprobar(){
    var titulacion = document.getElementById('titulacion');
    var rango = document.getElementById('rango');
    if(rango.value > 2)
    {
      titulacion.style.display = 'block';
    }
    else
    {
      titulacion.style.display = 'none';
    }
  }
</script>
</head>
 
<body>
Men&#250; para añadir usuarios:
<p>Nombre de usuario
  <input name="usuario" type="text" />
</p>
<p>Contrase&#241;a
  <input name="password" type="password" />
</p>
<p>
  E-mail
    <input name="email" type="text" />
</p>
<p>Rango: 
 <label>
    <select onchange="comprobar();" name="rango" id="rango">
      <option value="1">Vicerrectorado Calidad</option>
      <option value="2">Vicerectorado Grado</option>
      <option value="3">Vicerrectorado Estudiantes</option>
      <option value="4">Coordinador CGIC</option>
      <option value="5">Miembro CGIC</option>
    </select>
  </label>
 
</p>
<div id="titulacion">
  Titulaci&#243;n  
  <label>
    <select name="titulacion" size="1" id="titulacion">
      <option selected="selected">Ninguna</option>
      <option value="magisterio">Magisterio</option>
      <option value="empresariales">Empresariales</option>
      <option value="derecho">Derecho</option>
    </select>
  </label>
</div>
</body>
</html>

Ah por cierto, este tema no tiene nada que ver co nphp.

Kaze71 · #6 (**permalink**) 14/02/2010, 18:15

Oh, lo siento, fueron de una prueba anterior xDD, mensaje editado, disculpen las molestias

AdrianSeg · #7 (**permalink**) 15/02/2010, 03:07

Lo pruebo y os digo gracias.