Tema: ¿como hago radiobuttons dependientes?
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 15/03/2010, 05:57
Avatar de cristian_cena
cristian_cena
Colaborador
  
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 10 meses
Puntos: 269
Pregunta ¿como hago radiobuttons dependientes?
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.