Despliegue de campos al seleccionar radio button

dragonfire256 · #1 (**permalink**) 11/11/2014, 08:51

Buenos dias:

Estoy realizando una pagina en jsp, pero quiero realizar algo en dicha pagina, que estoy casi seguro que puede hacerse en js. Actualmente, la pagina posee un menu con tres radio button, que digamos poseen valor1, valor2, y valor3; a su vez, cada radio button, despliega a su vez mas opciones, dependiendo del valor seleccionado
Lo que deseo realizar es que cuando se seleccione el valor3 y la opcion 2, se despliega a su vez otros campos; se que los tiros van por cambiar el valor de display:none, pero como no conozco mucho de javascript, no he podido realizarlo

Muchas gracias

GeekGirl · #2 (**permalink**) 11/11/2014, 09:09

No se entiende bien. Podrías compartir tu JS para que podamos ver el problema?

dragonfire256 · #3 (**permalink**) 11/11/2014, 09:19

Lo que pasa es que el archivo tiene cientos de lineas, asi que no estaria tan facil copiarlo
Voy a tratar de explicar nuevamente

La pagina posee un menu con 3 radio button, con valor1, valor2 y valor3; al seleccionar alguno de los valores, estos a su vez despliegan mas opciones. Lo que intento realizar es que cuando se elija el valor3 y una de las opciones desplegadas, de manera especifica, muestre unos campos adicionales, que estaran ocultos. Estoy casi seguro que el tema va por cambiar, a traves de javascript, el valor display de esos campos, pero no he logrado plasmarlo, porque a lo mejor estare haciendo algo mal

Muchas gracias

GeekGirl · #4 (**permalink**) 11/11/2014, 09:27

Hacé lo siguiente:

Código Javascript:

Ver original<script type="text/javascript">
// Todo el código necesario para llegar a que se seleccionó el valor 3. Hagamos de cuenta que la variable selección contiene el valor del radiobutton
 
if (seleccion == 3) {
    // Con el id de los campos ocultos, en este caso tuCampo
    document.getElementById('tuCampo').style.display = 'block';
} else {
    document.getElementById('tuCampo').style.display = 'none';
}
 
</script>

dragonfire256 · #5 (**permalink**) 11/11/2014, 09:37

Eso era mas o menos lo que estaba haciendo, pero el diseño es un poco complicado, porque hay que trabajarlo con tablas (lo se, a mi tampoco me gusta, pero como ya hay un monton de paginas hechas asi, pues ni modo)

Código Javascript:

Ver original<tr >
                <td nowrap>
                    <table cellspacing="0" cellpadding="2" width="100%" border="0" id="fecha" style="display:none">
                <tr id="trdark">
                <td nowrap align="center" valign="middle">
                    <select name="E22BDD" id="E22BDD">
                        <%for (int i = 1; i <= 31; i++) {%>
                        <option value="<%=i%>" <%if (client.getE22BDD().equals(new Integer(i).toString())) out.print("selected");%>><%=i%></option>
                        <%}%>
                    </select>
                    <select name="E22BDM" id="E22BDM"> 
                        <%for (int i = 1; i <= 12; i++) {%>
                        <option value="<%=i%>" <%if (client.getE22BDM().equals(new Integer(i).toString())) out.print("selected");%>><%=i%></option>
                        <%}%>
                    </select> 
                    <select name="E22BDY" id="E22BDY" onblur="run()">
                        <%
                        DateFormat formatY = new SimpleDateFormat("yyyy");
                        Date year = new Date();
 
                        for (int i = 1910; i <= new Integer(formatY.format(year)).intValue(); i++) {
                        %>
                        <option value="<%=i%>" <%if (client.getE22BDY().equals(new Integer(i).toString())) out.print("selected");%>><%=i%></option>
                        <%}%>
                    </select>
                    </td>
                </tr>
                </table>
                </td>
                </tr>

Estos son los campos que se encuentran ocultos (es una mezcla de html y java, como podras ver)

Muchas gracias por tu colaboracion

GeekGirl · #6 (**permalink**) 11/11/2014, 10:21

Deberías ocultar y/o mostrar todos los elementos dentro de ese row? Si es así, simplemente podés hacer algo así (te hago una estructura simplificada para que entiendas mi idea):

Código HTML:

<html>
<body>
    <table border="1">
        <thead>
            <tr>
                <th>pri</th>
                <th>seg</th>
            </tr>
        </thead>
        <tr id="oculto">
            <td>1</td>
            <td>2</td>
        </tr>
        <tr>
            <td>1.1</td>
            <td>1.2</td>
        </tr>
    </table>
    <script type="text/javascript">
        var ocultoTags = document.getElementById('oculto').getElementsByTagName('td');

        for(var a = 0; a < ocultoTags.length; a++) {
            ocultoTags[a].style.display = 'none';
        }
    </script>
</body>
</html>

De esta manera sólo ocultas los td y no los tr para que no se rompa la maquetación de tu tabla.