¿como hago radiobuttons dependientes?

cristian_cena · #1 (**permalink**) 15/03/2010, 05:57

Hola, resulta que quiero hacer que el valor de un grupo de radiobutons dependa del valor de un radiobutton y que este valor se muestre en un <imput type="text"/>. Como lo hacen en este sitio en donde el precio de la cantidad de páginas depende de la cantidad de días.

Cree algo casi igual, lo pueden ver aquí. (con código comentado ya que el post solo permite 10000 caracteres)

Aca el código:

Código:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>formulario dinamico</title>
    <script type="text/javascript">    
        function cambiaNroPags (elem) { 
            var elemento = document.getElementById('paginas'); 
            elemento.value= elem;    

            var nuevoTexto = document.createTextNode(elem);                       
            var nuevoElemento = document.createElement("strong");                   
            nuevoElemento.appendChild(nuevoTexto);                                    
            var elementoExistente = document.getElementById("paginasResumen");      
            var padre = elementoExistente.parentNode;                                
            var reemplazo = padre.replaceChild(nuevoElemento, elementoExistente); 
            nuevoElemento.setAttribute("id", "paginasResumen");                       
            }
    
        function cambiaNroDias (elem2) { //entran de 1 a 30
            var elemento = document.getElementById('dias');
            elemento.value= elem2;                
                
            var nuevoTexto = document.createTextNode(elem2);                        
            var nuevoElemento = document.createElement("strong");                    
            nuevoElemento.appendChild(nuevoTexto);                                    
            var elementoExistente = document.getElementById("diasResumen");      
            var padre = elementoExistente.parentNode;                                
            var reemplazo = padre.replaceChild(nuevoElemento, elementoExistente); 
            nuevoElemento.setAttribute("id", "diasResumen");                       
        }

AQUI las filas representan la cantidad de días y las columnas la cantidad de páginas
solo a modo de muestra de lo que deseo utilizar pero no se como.
pueden ver funcionando lo que quiero realizar en http://w3-markup.com/order#details
*/        
    window.onload = function(){    
    var PreciosDias = 
//    1    2    3    4    5    6    7     8     9     10    11    12    13    14
   [[249, 398, 548, 697, 847, 996, 1145, 1295, 1444, 1594, 1743, 1892, 2042, 2194],  // 1 dia
    [233, 373, 513, 653, 793, 933, 1073, 1213, 1353, 1493, 1633, 1773, 1913, 2053],  // 2 ...
    [219, 350, 481, 612, 743, 874, 1006, 1137, 1268, 1399, 1530, 1661, 1793, 1924],  // 3 ...
    [205, 328, 451, 574, 696, 819, 942,  1065, 1188, 1311, 1434, 1557, 1680, 1803],  // 4 ...
    [192, 307, 422, 537, 653, 768, 883,  998,  1113, 1228, 1344, 1459, 1574, 1689],  // 5 ...
    [180, 288, 396, 504, 611, 719, 827,  935,  1043, 1151, 1259, 1367, 1475, 1583],  // 6 ...
    [169, 270, 371, 472, 573, 674, 775,  876,  977,  1078, 1180, 1281, 1382, 1483]]; // 7 dias
    
    }

    </script>

</head>

<body>    
    <div id="contenedor">
        <div id="derecha">
        <form id="formulario" action="trabajo.php" method="post">
            <fieldset id="pagYdias" class="3niveles">
                    <legend>Detalles del pedido</legend>
                    <p id="cuantas">¿Cuantas páginas desea?</p>
                    <input name="paginas" id="paginas" type="text" value="5"/>
                        <input id="radiop1"   type="radio" name="nroPag"  value="1"   class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop1').value)"/>
                        <input id="radiop2"   type="radio" name="nroPag"  value="2"   class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop2').value)"/>
                        <input id="radiop3"   type="radio" name="nroPag"  value="3"   class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop3').value)"/>
                        <input id="radiop4"   type="radio" name="nroPag"  value="4"   class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop4').value)"/>
                        <input id="radiop5"   type="radio" name="nroPag"  value="5"   class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop5').value)" checked="checked"/>
                        <input id="radiop6"   type="radio" name="nroPag"  value="6"   class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop6').value)"/>
                        <input id="radiop7"   type="radio" name="nroPag"  value="7"   class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop7').value)"/>
                        <input id="radiop8"   type="radio" name="nroPag"  value="8"   class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop8').value)"/>
                        <input id="radiop9"   type="radio" name="nroPag"  value="9"   class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop9').value)"/>
                        <input id="radiop10"  type="radio" name="nroPag"  value="10"  class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop10').value)"/>
                        <input id="radiop11"  type="radio" name="nroPag"  value="11"  class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop11').value)"/>
                        <input id="radiop12"  type="radio" name="nroPag"  value="12"  class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop12').value)"/>
                        <input id="radiop13"  type="radio" name="nroPag"  value="13"  class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop13').value)"/>
                        <input id="radiop14"  type="radio" name="nroPag"  value="14"  class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiop14').value)"/>
                        <input id="radiopMas" type="radio" name="nroPag"  value="Descuento Extra" class="radio" onclick="javacript:cambiaNroPags(document.getElementById('radiopMas').value)"/>
                    <br>
                    <p>¿En cuantos días?</p>
                    <input name="dias" id="dias" type="text" value="5" />
                        <input id="radiod1"       type="radio" name="nroDia"   value="1"          class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radiod1').value)"/>
                        <input id="radiod2"       type="radio" name="nroDia"   value="2"          class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radiod2').value)"/>
                        <input id="radiod3"       type="radio" name="nroDia"   value="3"          class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radiod3').value)"/>
                        <input id="radiod4"       type="radio" name="nroDia"   value="4"          class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radiod4').value)"/>
                        <input id="radiod5"       type="radio" name="nroDia"   value="5"          class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radiod5').value)" checked="checked"/>
                        <input id="radiod6"       type="radio" name="nroDia"   value="6"          class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radiod6').value)"/>
                        <input id="radioSemana"   type="radio" name="nroDia"   value="7"            class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radioSemana').value)"/>
                        <input id="radioQuincena" type="radio" name="nroDia"   value="15"           class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radioQuincena').value)"/>
                        <input id="radioMes"      type="radio" name="nroDia"   value="30"         class="radio" onclick="javacript:cambiaNroDias(document.getElementById('radioMes').value)"/>
                    <br>
                    <p>Entregar como:</p>
                    <span>XHTML</span>      <input id="xhtml"      type="radio" name="entregar"  value="xhtml" class="radio" onclick="cambiaPanel();"/>
                    <span>XHTML Email</span><input id="xhtmlEmail" type="radio" name="entregar"  value="xhtml email" class="radio" onclick="cambiaPanelEMAIL();" />
                    <span>Wordpress</span>  <input id="wp"         type="radio" name="entregar"  value="wordpress" class="radio"  onclick="cambiaPanelWP();"/>
                    <span>Joomla</span>        <input id="j"          type="radio" name="entregar"  value="joomla" class="radio" onclick="cambiaPanelJ();"/>
                </fieldset>
            </form>
        </div>
        <div id="izquierda">
            <p name="paginasResumen">Páginas: <strong id="paginasResumen">5</strong></p>
            <p name="diasResumen">Días: <strong id="diasResumen">5</strong></p>
            <p name="delivery">Entregar como: <strong id="delivery">XHTML</strong></p>
            <p name="subtotalResumen">TOTAL: <input name="total1" id="total1" type="text" value=""/></p>
        </div>
    </div>
</body>
</html>

Por favor, les pido me den una pista, por más mínima que sea me va a servir. Estuve toda la noche sin poder resolverlo y mis ojos sangran frente al monitor

.

Cualquier cosa si no me expliqué bien, lo explico nuevamente.

Desde ya muchas gracias. Saludos.

AnesGy · #2 (**permalink**) 15/03/2010, 08:52

La página no usa radiobutons para los sliders. Usa javascript.

De todas maneras radiobutons con el mismo nombre se comportarán como un grupo y de entre todos los que compartan nombre no se podrá seleccionar más que uno. Si quieres sacar el valor que marca cada radio entonces hay que poner una propiedad onclick al radio, tal y como:

Código HTML:

Ver original<input type="radiobutton" name="miradiob" value="mivalue" onclick="document.getElementsById("ID_del_textbox").value=this.value"/>

Con esto el campo de formulario con el ID ID_del_textbox (que debería ser un text) valdrá lo que valga el atributo value del radio cuando hagamos click en él.

cristian_cena · #3 (**permalink**) 15/03/2010, 09:48

Hola Anes, muchas gracias por responder. Paso a explicarme un poco más en detalle:

Cita:

Iniciado por AnesGy

La página no usa radiobutons para los sliders. Usa javascript.

Quise hacerlo con radiobuttons porque no se utilizar mootools. vi el codigo html y css usando firebug pero no entendi el javascript asociado. De todos modos utilizo radiobuttons + javascript

Cita:

Iniciado por AnesGy

De todas maneras radiobutons con el mismo nombre se comportarán como un grupo y de entre todos los que compartan nombre no se podrá seleccionar más que uno. Si quieres sacar el valor que marca cada radio entonces hay que poner una propiedad onclick al radio.

A eso ya lo tengo claro, igual gracias por mencionarlo. Si te fijas creo el html
<input id="radiop1" type="radio" name="nroPag" value="1" class="radio" onclick="javacript:cambiaNroPags(document.getElementById( 'radiop1').value)"/>
llamando, en este caso a la funcion cambiaNroPags()

Cita:

Iniciado por AnesGy

Con esto el campo de formulario con el ID ID_del_textbox (que debería ser un text) valdrá lo que valga el atributo value del radio cuando hagamos click en él.

En las funciones cambiaNroPags() y cambiaNroDias() lo que hago es cambiar los valores value de los imput text a traves de los value de los radiobuttons.

Mas el problema que me toca enfrentar es que deseo asignar un precio a cada pagina, y que ese precio dependa de la cantidad de días.

Por tanto tengo 9 radiobutons para la cantidad de dias y 15 radiobutons para el precio. (deseo hacer lo mismo que en https://w3-markup.com/order#details)

A los value de los radiobuton los tengo ya agotados en las dos funciones para dar el numero a los imput text cuya id son respectivamente "paginas" y "dias" por esto necesito algun recurso para darles un nuevo valor.

Lo puedo poner en una variable nueva, por ejemplo: radiopagina1=document.getElementById('radiop1').va lue;

O también puedo utilizar el parámetro (elem) de las funciones ya que por el paso en la llamada a los value de los radiobuttons (<input id="radiop1" type="radio" name="nroPag" value="1" class="radio" onclick="javacript:cambiaNroPags(document.getEleme ntById('radiop1').value)"/>)

El tema es que no solo debo dar un nuevo valor, sino que el valor de los radiobutons destinados a marcar la cantidad de paginas debe depender del valor de los radiobutons destinados a marcar el número de paginas para que luego pinche cual pinche me muestre en el imput text (<input name="total1" id="total1" type="text" value=""/>) el valor de la cantidad de páginas de acuerdo al tiempo de entrega.

Al ser nuevo con javascript me falta esa fluidez que me permita darme cuenta de como articular el codigo para salirme con la mía, por eso les agradezco de corazón por cualquier pista que sirva para orientarme un poco.

Saludos!

AnesGy · #4 (**permalink**) 15/03/2010, 16:07

Oh, vale, eso se hace con matemáticas.

Por ejemplo quermos que cada página cueste un 5% menos que la anterior y la primera cueste 10 euros, entonces:

10 + 10*0.95 + 10*0.95^2 -> lo cual es una serie geométrica de razón 0.95 y base 10. Entonces:

10*(1 - 0.95^(n+1))/(1 - 0.95)

donde n es el número de páginas (la demostración es una chorrada, búscala en google).

Luego puedes complicar el algoritmo añadiendo un plus por el número de días que puede ser algo como 5$ mas por cada día y página, por tanto:

5*d*n

Si d es los días y n el número de pa´ginas.

En total se suman y tienes el resultado. Pero esto no lo tienes que hacer desde javas sólo, alguien podría manipular los resultados. Esto primero lo haces en Javascript para hacerlo parecer bonito y luego con PHP o ASP o JSP o lo que quieras vuelves a calcularo para que no haya agujeros de seguridad en tu sistema.

cristian_cena · #5 (**permalink**) 15/03/2010, 21:17

Hola anes, admirable respuesta!!.

Mira, en base a tu consejo he hecho lo siguiente:

Código:

dia1=document.getElementById('radiod1');

pag1=document.getElementById('radiop1');
pag2=document.getElementById('radiop2');
 
if( dia1.value=1 && pag1.value=1){
var i = document.createTextNode(aqui la serie geométrica);
subtotal=document.getElementById('total1').value;    
subtotal.appendChild(i);
}
else if(dia1.value=1 && pag2.value=2){
if( dia1.value=1 && pag1.value=1){
var i = document.createTextNode(aqui la serie geométrica);
subtotal=document.getElementById('total1').value;    
subtotal.appendChild(i);
}

... y asi hasta completar todas las paginas para el dia1
... luego comienzo por el dia 2 y asi sucesivamente hasta llegar al ultimo dia.

Pero esto, que en teoría parece ser la solución, por alguna razon no funciona.
¿Podré anidar funciones?¿Como?

AnesGy · #6 (**permalink**) 16/03/2010, 02:39

Si anidar funciones es como anidar ifs que es meter funciones dentro de funciones. En principio si, pero, una función B que esté dentro de la función A sólo y exclusivamente podrá ser llamada desde dicha función A.

Si vas a hacer un caso para cada condición de dial1 y page1 vas a tardar siglos. Usa las matemáticas.

cristian_cena · #7 (**permalink**) 16/03/2010, 17:44

Muchas gracias AnesGy, ya me va saliendo el codigo, cuando lo termine lo comparto, pues a esta altura ya es mas suyo que mio.

Un abrazo!