:: crear opciones con radio y divs::

oecarlitos · #1 (**permalink**) 02/12/2006, 17:05

Hola amigos del foro, estoy tratando de buscar algun escript que me muestre lo siguiente.

Código HTML:

<html>
<head>
<title>prueba</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body>
<div align="center">
  <p>PRUEBA</p>
  <form action="" method="post" name="" id="">
    <table width="457" border="1">
      <tr>
        <td><div align="center">
            <input name="se" type="radio" value="noticias">
          Noticias - 
          <input name="se" type="radio" value="deportes">
          Deportes - 
          <input name="se" type="radio" value="horoscopo">
          Horoscopo</div></td>
      </tr>
      <tr>
        <td><div align="center">
          <p>Opciones cambiantes</p>
          <p>&nbsp; </p>
        </div></td>
      </tr>
      <tr>
        <td><div align="center">
          <input type="submit" name="Submit" value="Enviar">
        </div></td>
      </tr>
    </table>
  </form>
  <p>&nbsp;</p>
</div>
</body>
</html>

Donde dice opciones cambiantes, quisiera que cuando selecciones en noticias, se abra abajito noticias y unos imput text para insertar noticias, luego si haces click en deportes, otro formulario pequeñito donde dice opciones cambiates pàra completar pèro de la opcion deportes, de la misma manera con horoscopo.

Espero que me hallan entendido, estare muy agradecidos por la ayuda que sea necesaria. saludos

JavierB · #2 (**permalink**) 03/12/2006, 03:22

Hola oecarlitos

Puedes crear tres div:

<div id="noticias">
<div id="deportes">
<div id="horoscopo">

y los vas mostrando/ocultando según te haga falta. Para mostrar:

document.getElementById('noticias').style.display = 'block';

Para ocultar:

document.getElementById('noticias').style.display = 'none';

Saludos,

oecarlitos · #3 (**permalink**) 03/12/2006, 11:25

entendido, pero podrias darme mas detalles para colocarlos en mis divs o en mis opciones. te estare profundamente agradecido.

saludillos

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

Hola de nuevo.

Código PHP:

  <html>
<head>
<script type="text/javascript">
var visto = null;
function mostrar(valor) {
  if (visto) visto.style.display = 'none';
  obj = document.getElementById(valor);
  obj.style.display = 'block';
  visto = obj;
}
</script>
</head>
<body>
<div align="center">
  <p>PRUEBA</p>
  <form action="" method="post" name="" id="">
    <table width="457" border="1">
      <tr>
        <td><div align="center">
            <input name="se" type="radio" value="noticias" onclick = "mostrar(this.value)">
          Noticias - 
          <input name="se" type="radio" value="deportes" onclick = "mostrar(this.value)">
          Deportes - 
          <input name="se" type="radio" value="horoscopo" onclick = "mostrar(this.value)">
          Horoscopo</div></td>
      </tr>
      <tr>
        <td>
        <div id="noticias" style="display:none"><input type="text" value="Noticias"></div>
        <div id="deportes" style="display:none"><input type="text" value="Deportes"></div>
        <div id="horoscopo" style="display:none"><input type="text" value="Horoscopo"></div>
        </td>
      </tr>
      <tr>
        <td><div align="center">
          <input type="submit" name="Submit" value="Enviar">
        </div></td>
      </tr>
    </table>
  </form>
  <p>&nbsp;</p>
</div>
</body>
</html>

Saludos,

oecarlitos · #5 (**permalink**) 03/12/2006, 12:50

GRACIAS BROTHER, dime una pregunta, solo se envia lo que muestra el div cierto, osea no se proceso los otros si no se encuentras seleccionados verdad. gracias de todas maneras

JavierB · #6 (**permalink**) 03/12/2006, 13:32

Cita:

Iniciado por oecarlitos

solo se envia lo que muestra el div cierto

Se manda todo, porque lo que estás haciendo es ocultar algunos elementos del formulario, pero no desaparecen.

Me parece que si los deshabilitas (disabled=true) no se envía, pero esto tendría que confirmartelo alguien más puesto en estos temas.

Saludos,

oecarlitos · #7 (**permalink**) 03/12/2006, 13:42

entonecs tendria que deshabilitarlo, donde lo modifico en el script que esta en la cabecera o en el mismo div.?