radiobotones dependientes para mostrar valor en un input text

cristian_cena · #1 (**permalink**) 26/03/2010, 14:59

Hola compas, resulta que tengo un script con el que quiero lograr que dos grupos de radiobotones queden dependientes y con ello pasar un valor a un input de texto.

Bien no se que esta andando mal, o si todo anda mal que se yo. una manito? aqui les dejo el código.

Código:

function total(){
        var PAG1 = document.getElementById("radiop1").value;
        var PAG2 = document.getElementById("radiop2").value;
        var PAG3 = document.getElementById("radiop3").value;
        var DIA1 = document.getElementById("radiod1").value;
        var DIA2 = document.getElementById("radiod2").value;

        var TOTAL1 = document.getElementById("total1").value;

        //alert("anda la funcion 2");

            if(PAG1==checked  && DIA1==checked){
            TOTAL1 = 249; 
            }
            else if(PAG2==checked  && DIA1==checked){
            TOTAL1 = 398;
            }
            else if(PAG3==checked  && DIA2==checked){
            TOTAL1 = 513;
            }
        }

Código HTML:

<input id="radiop1" type="radio" name="nroPag" value="1" class="radio" onclick=" total()"/>
<input id="radiop2" type="radio" name="nroPag" value="2" class="radio" onclick=" total()"/>
<input id="radiop3" type="radio" name="nroPag" value="3" class="radio" onclick=" total()"/>

<input id="radiod1" type="radio" name="nroDia" value="1"  class="radio" onclick=" total()"/>
<input id="radiod2" type="radio" name="nroDia" value="2"  class="radio" onclick=" total()"/>

<p name="subtotalResumen">TOTAL: <input name="total1" id="total1" type="text" value="100"/></p>

Desde ya muchas gracias.

Adler · #2 (**permalink**) 26/03/2010, 16:36

Hola

Prueba así

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function total() {
var elemArr = new Array();
var total1 = document.getElementById("total1");
var elemInput = document.getElementById('formulario').getElementsByTagName('label');
    for(var i = 0; i < elemInput.length; i++){
        var elem = elemInput[i].getElementsByTagName('input');
        for(var j = 0; j < elem.length; j++){
 
            if(elem[j].checked){
            elemArr.push(elem[j].value);
            }
        }
    }
 
alert ("El arreglo es: " + elemArr);
total1.value = parseInt(elemArr[0] * elemArr[1]);
}
</script>
</head>
<body>
<form id="formulario">
<label for="nroPag">
<input id="nroPag[]" type="radio" name="nroPag[]" value="100" class="radio"/>
<input id="nroPag[]" type="radio" name="nroPag[]" value="200" class="radio"/>
<input id="nroPag[]" type="radio" name="nroPag[]" value="300" class="radio"/>
</label>
<label for="nroDia">
<input id="nroDia[]" type="radio" name="nroDia[]" value="1"  class="radio"/>
<input id="nroDia[]" type="radio" name="nroDia[]" value="2"  class="radio"/>
</label>
<button onclick="total();return false;" >Ver Datos</button>
<p name="subtotalResumen">TOTAL: <input name="total1" id="total1" type="text" value="100"/></p>
</form>
</body>
</html>

Suerte

cristian_cena · #3 (**permalink**) 26/03/2010, 21:55

Muchas gracias Adler, tu script funciona perfecto. Mas no puedo alterar el valor de los value de los input (<input id="radiop1" type="radio" name="nroPag" value="1" class="radio" onclick=" total()"/>) ya que a estos ya los estoy utilizando para una funcion que se ejecutara primero. (cosa que no avise en la consulta

) es decir, lo que tengo es:

<input id="radiop1" type="radio" name="nroPag" value="1" class="radio" onclick=" funcion1(); total()"/>

y funcion1() trabaja con los value, por lo que debería modificar el valor de los value de forma dinámica supongo. En otras palabras, el html (codigo fuente) no puede ser modificado.

Asimismo, modificando tu linea 19 ( total1.value = parseInt(elemArr[0] * elemArr[1]); ) y utilizando bien las matematicas calculo voy a lograr lo que ando buscando. Por.ej:
total1.value = parseInt(elemArr[0] * elemArr[1] * impuestoPorPagina );

Muchas gracias, analizaré bien tu ejemplo y veré como adaptarlo a mi necesidad en concreto.

Ah .. una consulta: ¿ Afecta en algo que cambie id="nroPag[]" por digamos id="nuevaId" ?, gracias

p/d: acabo de darme una vueltita por las faq de js y no se como agradecer tanta data, impresionante.

Bam_Margera · #4 (**permalink**) 26/03/2010, 22:15

ya que el suyo está solucionado, este tema es reciente y estoy igual... yo lo estoy probando así

(a mi me tiene que mostrar cada vez que elija un plato el menú seleccionado)

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>Menú del día</title>
        <script type="text/javascript">
            function avisar(dish){
				var num_platos = document.forms[dish].plato.length;

				var marcados = document.getElementById("r" + dish);
				marcados.innerHTML = "";
				for(x = 0; x < num_platos; x++){
					if(document.forms[dish].plato[x].checked){
		
						var mostrar = "<p>" + document.forms[dish].toppingcheck[x].value + "</p>";				
						marcados.innerHTML = marcados.innerHTML + mostrar;
						
					}
				}
				
			}
			avisar("primerp");
			avisar("segundop");
			avisar("tercerp");
            
            
        </script>
    </head>
    <body>
    
    <h1>Menu Del día</h1>
    
        
        <h2>Primer Plato</h2>  
        <form name="primerp"> 
        	<input type="radio" name "plato" value "Gazpacho" onClick="avisar('primerp');" checked="checked" />  Gazpacho
        	<input type="radio" name "plato" value "Ensalada" onClick="avisar('primerp');" />  Ensalaa
        	<input type="radio" name "plato" value "Sopa" onClick="avisar('primerp');" />  Sopa
            </form>
            
             <h2>Primer Plato</h2>  
             <form name="segundop"> 
        	<input type="radio" name "plato" value "Atun" onClick="avisar('segundop');" checked="checked">  Atun
        	<input type="radio" name "plato" value "Lomo" onClick="avisar('segundop');" />  Lomo
        	<input type="radio" name "plato" value "pasta" onClick="avisar('segundop');" />  Pasta
            </form>
            
             <h2>Postre</h2>   
             <form name="tercerp">
        	<input type="radio" name "plato" value "h" onClick="avisar('tercerp');" checked="checked"/>  Helado
        	<input type="radio" name "plato" value "f" onClick="avisar('tercerp');" />  Fruta
        	<input type="radio" name "plato" value "s" onClick="avisar('tercerp');" />  Tarta
            </form>

        
        
     
     <div id="Resultao">
     		<h1>Menú Seleccionado</h1>
            <div id="rprimerp"></div>
            <div id="rsegundop"></div>
            <div id="rtercerp"></div>
     </div>
    </body>
</html>

-edit-

Así tampoco me hace ni caso...

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>Menú del día</title>
        <script type="text/javascript">
            function avisar(dish){
				var platos = document.forms["f" + dish].plato;
				var num_platos = platos.length;
				var marcados = document.getElementById("r" + dish);
				marcados.innerHTML = "";
				for(var x = 0; x < num_platos; x++){
					if(platos[x].checked){
						alert(platos[x].checked);
		
						/*var mostrar = "<p>" + document.forms[dish].toppingcheck[x].value + "</p>";				
						marcados.innerHTML = marcados.innerHTML + mostrar;*/
						
					}
				}
				
			}
			avisar("primerp");
			avisar("segundop");
			avisar("tercerp");
            
            
        </script>
    </head>
    <body>
    
    <h1>Menu Del día</h1>
    
        
        <h2>Primer Plato</h2>  
        <form name="fprimerp"> 
        	<input type="radio" name "plato" value "Gazpacho" onClick="avisar('primerp');" checked="checked" />  Gazpacho
        	<input type="radio" name "plato" value "Ensalada" onClick="avisar('primerp');" />  Ensalaa
        	<input type="radio" name "plato" value "Sopa" onClick="avisar('primerp');" />  Sopa
            </form>
            
             <h2>Primer Plato</h2>  
             <form name="fsegundop"> 
        	<input type="radio" name "plato" value "Atun" onClick="avisar('segundop');" checked="checked">  Atun
        	<input type="radio" name "plato" value "Lomo" onClick="avisar('segundop');" />  Lomo
        	<input type="radio" name "plato" value "pasta" onClick="avisar('segundop');" />  Pasta
            </form>
            
             <h2>Postre</h2>   
             <form name="ftercerp">
        	<input type="radio" name "plato" value "h" onClick="avisar('tercerp');" checked="checked"/>  Helado
        	<input type="radio" name "plato" value "f" onClick="avisar('tercerp');" />  Fruta
        	<input type="radio" name "plato" value "s" onClick="avisar('tercerp');" />  Tarta
            </form>

        
        
     
     <div id="Resultao">
     		<h1>Menú Seleccionado</h1>
            <div id="rfprimerp"></div>
            <div id="rfsegundop"></div>
            <div id="rftercerp"></div>
     </div>
    </body>
</html>

EL caso es que in me inicializa la previsualización ni me la actualiza al cambiar de opción..... No lo entiendo; alguna pista?

Adler · #5 (**permalink**) 27/03/2010, 15:24

Hola

Cita:

Iniciado por cristian_cena

Ah .. una consulta: ¿ Afecta en algo que cambie id="nroPag[]" por digamos id="nuevaId" ?, gracias

No, siempre y cuando el for del label sea "nuevaId"

Bam_Margera, aunque el tema esté resuelto y expongas un tema que está relacionado, la próxima vez abre un nuevo tema

Prueba con esto

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
function valores() {
var comida = new Array();
var primero = document.getElementById("rprimerp");
var segundo = document.getElementById("rsegundop");
var postre = document.getElementById("rtercerp");
var elemLabel= document.getElementById('formulario').getElementsByTagName('label');
    for(var i = 0; i < elemLabel.length; i++){
 
        var elemInput = elemLabel[i].getElementsByTagName('input');
        for(var j = 0; j < elemInput.length; j++){
            if (elemInput[j].checked) {
                comida.push(elemInput[j].value);
            }
        }
    }
primero.innerHTML = comida[0];
segundo.innerHTML = comida[1];
postre.innerHTML = comida[2];
}
 
 
 
function init() {
var comida = new Array();
var primero = document.getElementById("rprimerp");
var segundo = document.getElementById("rsegundop");
var postre = document.getElementById("rtercerp");
var elemLabel= document.getElementById('formulario').getElementsByTagName('label');
    for(var i = 0; i < elemLabel.length; i++){
 
var elemInput = elemLabel[i].getElementsByTagName('input');
        for(var j = 0; j < elemInput.length; j++){
            if (elemInput[j].checked) {
                comida.push(elemInput[j].value);
            }
            elemInput[j].onclick = valores;
        }
    }
primero.innerHTML = comida[0];
segundo.innerHTML = comida[1];
postre.innerHTML = comida[2];
}
 
window.onload = function() {init()};
</script>
</head>
    <body>
    
    <h1>Menu Del día</h1>
    
        
        <h2>Primer Plato</h2>  
<form id="formulario">
<label for="primerp">
            <input type="radio" name="primerp[]" id="primerp[]" value="Gazpacho" checked="checked" />  Gazpacho
            <input type="radio" name="primerp[]" id="primerp[]" value="Ensalada" />  Ensalaa
            <input type="radio" name="primerp[]" id="primerp[]" value="Sopa" />  Sopa
</label>
            
             <h2>Primer Plato</h2>  
<label for="segundop">
            <input type="radio" name="segundop[]" id="segundop[]" value="Atun" checked="checked" />  Atun
            <input type="radio" name="segundop[]" id="segundop[]" value="Lomo" />  Lomo
            <input type="radio" name="segundop[]" id="segundop[]" value="pasta" />  Pasta
</label>
            
             <h2>Postre</h2>   
<label for="tercerp">
            <input type="radio" name="tercerp[]" id="tercerp[]" value="h" checked="checked" />  Helado
            <input type="radio" name="tercerp[]" id="tercerp[]" value="f" />  Fruta
            <input type="radio" name="tercerp[]" id="tercerp[]" value="s" />  Tarta
</label>
</form>
 
        
     <div id="Resultao">
             <h1>Menú Seleccionado</h1>
            <div id="rprimerp"></div>
            <div id="rsegundop"></div>
            <div id="rtercerp"></div>
     </div>
    </body>
</html>

Suerte