Ver el valor de un “Radio Button” en un formulario html en javascript
23 marzo 2012 – 13:21 Tweet Para conocer el valor de un radio button por javascript debemos utilizar document.NOMBRE_FORMULARIO.NOMBRE_CAMPO[posición].value
Veamos un ejemplo para aclarar un poco como funciona. Dentro de una página html tenemos un formulario con varios radio buttons para valorar la calidad de un página:
<form name="formu"> <input type="radio" name="valora" value="mala" />Mala<br /> <input type="radio" name="valora" value="regular" />Regular<br /> <input type="radio" name="valora" value="buena" />Buena <br /> <input type="radio" name="valora" value="muy buena" />Muy buena </form>
Para saber si uno de los elementos que conforman el grupo de radio buttons de nombre “valora” está selecionado utilizaríamos:
if(document.formu.valora[0].checked){
alert("El primer valor está seleccionado"); //en nuestro caso "Mala"
}
Como habréis visto, el primer elemento es 0 y no 1. Ahora lo que podemos hacer es recorrernos todas las opciones hasta dar con la que esté marcada de esta manera:
for(i=0;i<document.formu.valora.length;i++){
if(document.formu.valora[i].checked) {
marcado=i;
}
}
alert("El valor seleccionado es: "+document.formu.valora[marcado].value);
3 Comentarios en “Ver el valor de un “Radio Button” en un formulario html en javascript”
buenos días y muchas gracias por el aporte me sirvió de mucho
Por elkin el 05/11/2012
Gracias por tu explicación pero que si lo único que deseo es saber si han seleccionado o no un radiobotton, de modo que cuando si no se hace de el error debes seleccionar un valor.
Eje:
¿Preguta 1?
Si
No
¿Pregunta2?
Satisfecho
Conforme
Incoforme
Otro:
Seleccione
Dinero
Oportunidades
Otro:
Salud
Situación social
Respuesta
*Nombre:
*Apellidos:
*E-mail:
*Teléfono:
*Ciudad:
*Estado o Depto.:
function validacion(Encuesta){
//valido el texto, númroe y mail
var bienTexto = /^[a-zA-Z]|á|é|í|ó|ú|Á|É|Í|Ó|Ú|ä|ë|ï|ö|ü|Ä|Ë|Ï|Ö|Ü|à|è|ì|ò|ù|À|È|Ì|Ò|Ù|n|N]+$/;
var bienEmail = /^(.+\@.+\..+)$/;
var bienNum = /^([0-9s+-])+$/;
//Validar Pregunta1
if (document.getElementsByName(‘p1′).checked==false){
alert(“Por favor escoja una opción en la pregunta 2.”)
return false;// sale de la funcion y NO envia el formulario
}
//Validar Pregunta2
else if (document.getElementsByName(‘p2′).checked==false){
alert(“Por favor escoja una opción en la pregunta 2.”)
return false;// sale de la funcion y NO envia el formulario
}
//Validar Pregunta5
else if (document.getElementsByName(‘p5′).checked==false){
alert(“Por favor escoja una opción en la pregunta 5.”)
return false;// sale de la funcion y NO envia el formulario
}
//Validar Pregutna9
else if (bienTexto.test(Encuesta.p9.value)==false){
alert(“Escriba brevemente su meta, sueño u objetivo.(Escribale aunque le considere absurdo.)”)
return false;// sale de la funcio?n y NO envi?a el formulario
}
//Validar Pregunta10
else if (document.getElementsByName(‘p10′).checked==false){
alert(“Por favor escoja una opción en la pregunta 10.”)
return false;// sale de la funcion y NO envia el formulario
}
//validar Nombre
else if (bienTexto.test(Encuesta.Nombre.value)==false){
alert(“ingrese su Nombre”)
return false;// sale de la funcio?n y NO envi?a el formulario
}
//validar Apellido
else if (bienTexto.test(Encuesta.Apellido.value)==false){
alert(“ingrese su Apellido”)
return false;// sale de la funcio?n y NO envi?a el formulario
}
//validar Email
else if (bienEmail.test(Encuesta.Email.value)==false){
alert(“ingrese un Email válido”)
return false;// sale de la funcio?n y NO envi?a el formulario
}
//validar Telefono
else if (bienNum.test(Encuesta.Telefono.value)==false){
alert(“Ingrese su número de teléfono fijo o movil de contacto, sin espacios.”)
return false;// sale de la funcio?n y NO envi?a el formulario
}
//validar Ciudad
else if (bienTexto.test(Encuesta.Ciudad.value)==false){
alert(“Ingrese la ciudad donde vive actualmente.”)
return false;// sale de la funcio?n y NO envi?a el formulario
}
//validar Estado
else if (bienTexto.test(Encuesta.Estado.value)==false){
alert(“Ingrese el Estado, Departamento o Provincia correspondiente con la ciudad donde vive actualmente.”)
return false;// sale de la funcio?n y NO envi?a el formulario
}
//validar País
else if (!document.getElementById(‘Pais’).selectedIndex){
alert(“Seleccionar su País de recidencia.”)
return false;// sale de la funcio?n y NO envi?a el formulario
}
//el formulario se envia
document.formulario.target = “_blank”;
document.formulario.action = “res.php”;
document.formulario.submit();
}
Aqui solo me funciona una parte, lo es validar campos de texto pero los radio, no funcionan bien pues solo toman el primer radio.
gracias por tu pronta respuesta
Por Edward el 02/12/2012