S.O.S. pasar valor de un radio a un input text

tampon · #1 (**permalink**) 18/12/2009, 13:00

Hola eh estado intentando trabajar con botones de radio ya intente muchas formas de pasar el valor a un documento javascript y todas fueron sin exito, busque otra opcion y era pasar el valor de los botones a un input de texto, ahora el problema es que:

tengo dos grupos de radio boton, y la seleccion de uno esta ligado al otro, osea...
que si seleccionan un boton de grupo A, entonces se selecciona en automatico un boton del grupo B y asi, todos los botones estan ligados, .. bueno encontre una funcion de pasar el valor a un input text, pero resulta que con la dimamica que esta no me funciona muy bien por que me manda un valor indefinido.

bueno dejo el codigo y ojala algun experto lo pueda analizar mejor y darme una respuesta ya que esto me tiene bastante alterado

saludos y gracias de antemano.

Código HTML:

Ver original<html>
<head>
<script type="text/javascript">
 
function foco1A(){
var chek = document.getElementById("FO1A")
    if (chek.checked == true) {
        document.getElementById("FV1A").checked = true;
    }else{
        document.getElementById("FV1A").checked = false;
    }
}
 
function foco2A(){
var chek = document.getElementById("FO2A")
    if (chek.checked == true) {
        document.getElementById("FV2A").checked = true;
    }else{
        document.getElementById("FV2A").checked = false;
    }
}
 
function check1(opcion,valor) { 
    document.getElementById("opcion1A").value=opcion; 
    document.getElementById("valor1A").value=valor; 
}
 
</script>
</head>
<body>
 
<form>
<input type="radio" name="opcionA" id="FO1A" value="COI" onClick="foco1A();check1(this.value)" /> concepto1<br />
<input type="radio" name="valorA" id="FV1A" value="1.00" onFocus="check1(this.value)" disabled />1<br />
<input type="radio" name="opcionA" id="FO2A" value="SEG" onClick="foco2A();check1(this.value)" /> concepto2<br />
<input type="radio" name="valorA" id="FV2A" value="2.00" onFocus="check1(this.value)" disabled />2<br />
 
<input type="text" id="opcion1A" disabled />
<input type="text" id="valor1A" disabled />
</form>
 
</body>
</html>

AndrewFace · #2 (**permalink**) 18/12/2009, 14:22

hola, ve tu funcion check1(opcion,valor), recibe 2 parametros y siempre la llamas con un solo valor check1(this.value).

Ademas no creo que el onblur llame a check1, ya que su cheq se activa por javascript, no por efecto de un evento del navegador.

tampon · #3 (**permalink**) 18/12/2009, 14:37

hOLA SI LO QUE PASA ES QUE TRATE HACIENDOLO CON DOS FUNCIONES INDEPENDIENTES OSEA:

Código Javascript:

Ver originalfunction check1(opcion) { 
    document.getElementById("opcion1A").value=opcion; 
}
 
function check2(valor) { 
    document.getElementById("valor1A").value=valor; 
}

PERO NO ME PASABA NADA AL INPUT valor1A, POR QUE NO ERA PRESIONADO NINGUN RADIO DE ESE GRUPO, SINO QUE SE ACTIVABA DE FORMA DINAMICA, ENTONCES EL PARAMETRO ONCLICK NO APLICABA (O ALMENOS ESO PIENSO YO)

AndrewFace · #4 (**permalink**) 18/12/2009, 14:55

eso es, el onblur que pones se gatilla con un evento de usuario, el javascript no lo hace gatillar.... mejor haz algo asi:

Código HTML:

<script type="text/javascript">
function foco(num)
{
  total_de_opciones = 2;
  for(i=1;i<=total_de_opciones;i++)
  {
      aux1 = "FO"+num+"A";
      aux2 = "FV"+num+"A";
      aux3 = "opcion"+num+"A";
      aux4 = "valor"+num+"A";
      var chek = document.getElementById(aux1);
      if (chek.checked == true) 
      {
        document.getElementById(aux2).checked = true;  
        document.getElementById(aux3).value= document.getElementById(aux1).value;  
        document.getElementById(aux4).value = document.getElementById(aux2).value;  
      }else
      {
        document.getElementById(aux2).checked = false;      
      }
  }
}
</script>

<input type="radio" name="opcionA" id="FO1A" value="COI" onClick="foco(1);" /> concepto1<br />
<input type="radio" name="valorA" id="FV1A" value="1.00" disabled />1<br />
<input type="radio" name="opcionA" id="FO2A" value="SEG" onClick="foco(2); /> concepto2<br />
<input type="radio" name="valorA" id="FV2A" value="2.00"disabled />2<br />
<input type="text" id="opcion1A" disabled />
<input type="text" id="valor1A" disabled />

tampon · #5 (**permalink**) 18/12/2009, 15:02

mmm.... creo que es el mismo codigo del primer mensaje, o disculpa es que no lo veo ¿cual seria el cambio?

saludos.

AndrewFace · #6 (**permalink**) 18/12/2009, 15:45

la diferencia es que esd mas generico, y puedes poner cualquier numero de opciones:
FV1A, FV2A, FV3A...etc
FO1A,FO2A, Fv3A..etc

tampon · #7 (**permalink**) 18/12/2009, 16:45

Bueno si me recoge los valores del primer radio, pero al seleccionar el segundo no devuelve nada =s

zerokilled · #8 (**permalink**) 18/12/2009, 18:02

estudia detenidamente el ejemplo.

Código:

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN'
'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Test Development</title>
<script type='text/javascript'>
function bindGroup(master, fields){
var name = master.name, binded = [], item;
for(var i = 0; item = this[name][i]; i++) if(item === master) break;
for(var j = 0; fields[j]; j++){
this[fields[j]][i].checked = true;
binded.push(this[fields[j]][i]);
}
return binded;
} // bindGroup;

function setValuesEvent(evt){
var elem = evt.target || evt.srcElement;
if(!/^input$/i.test(elem.nodeName) || !/^radio$/i.test(elem.type))return;
var group = bindGroup.call(this, elem, ['group1', 'group2', 'group3']);
this.g1.value = group[0].value;
this.g2.value = group[1].value;
this.g3.value = group[2].value;
}
</script>
<style type='text/css'>

</style>
</head>

<body>
<form>
<div onclick="setValuesEvent.call(this.parentNode, event)">
<p>Group 1<br />
<input type="radio" name="group1" value="G1O1" /> Option 1
<input type="radio" name="group1" value="G1O2" /> Option 2
<input type="radio" name="group1" value="G1O3" /> Option 3
<input type="radio" name="group1" value="G1O4" /> Option 4</p>

<p>Group 2<br />
<input type="radio" name="group2" value="G2O1" /> Option 1
<input type="radio" name="group2" value="G2O2" /> Option 2
<input type="radio" name="group2" value="G2O3" /> Option 3
<input type="radio" name="group2" value="G2O4" /> Option 4</p>

<p>Group 3<br />
<input type="radio" name="group3" value="G3O1" /> Option 1
<input type="radio" name="group3" value="G3O2" /> Option 2
<input type="radio" name="group3" value="G3O3" /> Option 3
<input type="radio" name="group3" value="G3O4" /> Option 4</p>
</div>
<input type="text" name="g1" disabled />
<input type="text" name="g2" disabled />
<input type="text" name="g3" disabled />
</form>
</body></html>