I have been trying to figure out how to work with radio buttons and javascript. In the script below I wish to grab the value of the selected radio button.
The value of the text "tyear" box is obtained with no problem, and is reported in the aler message.
The radio buttons named "grouptype" are found, but the value of the selected button is reported as undefined. The html code has a value set for each radio button.
Code:
function checkForm(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("organizationName", "tyear", "grouptype");
// Enter field description to appear in the dialog box
var fieldDescription = Array("Organization Name", "Year", "Group Type");
// dialog message
var alertMsg = "Please complete the following fields:\n";
var l_Msg = alertMsg.length;
for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
//textbox tyear value
if (fieldRequired[i] == "tyear")
{
alert(obj.value);
}
// radio button grouptype value
if (fieldRequired[i] == "grouptype")
{
alert(obj.value);
}
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
}
}
}
if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}
Radio buttons are stored in an array.
You get the value like:
formname.radioname[0].value
formname.radioname[1].value
and so on
So, you need to get the value IF it is checked, right?
if (formname.radioname[0].checked)
alert(formname.radioname[0].value);
and so on.
If there are a bunch, you can loop through the collection.
__________________
If this post contains any code, I may or may not have tested it. It's probably just example code, so no getting knickers in a bunch over a typo, OK? If it doesn't have basic error checking in it, such as object detection or checking if objects are null before using them, put that in there. I'm giving examples, not typing up your whole app for you. You run code at your own risk.
Bored? Visit http://www.kaelisspace.com/
Also see this for other options in getting the checked radio-button's value...
Also if there is one button that you are specifically checking for, for example:
o Yes, I have read the terms
o No, I do not accept the terms
and you wish to make sure the person clicks 'Yes' before proceeding, then give each button a different ID. The name can still be the same so that it gets passed by submit(), but with different id's you can check:
Code:
if (document.getElementById('yesButton').checked) proceed();
This is what I created. The "if (fieldRequired[i] == "grpType")" block looks pretty ugly. If there is a more efficient way let me know. Thanks for all the replies.
Code:
function checkForm(formobj){
// Enter name of mandatory fields
var fieldRequired = Array("tmonth", "tday", "tyear", "tourtime", "FirstName", "LastName", "Address", "City", "State", "ZIP", "Phone", "Email", "grpName", "grpPhone", "grpNumber", "grpType");
// Enter field description to appear in the dialog box
var fieldDescription = Array("Month", "Day", "Year", "Time", "First Name", "Last Name", "Address", "City", "State", "Zip Code", "Phone Number", "Email Address", "Group Name", "Group Phone", "Number in Group", "Group Type");
// dialog message
var alertMsg = "Please complete the following fields:\n";
var l_Msg = alertMsg.length;
for (var i = 0; i < fieldRequired.length; i++){
var obj = formobj.elements[fieldRequired[i]];
if (fieldRequired[i] == "grpType")
{
for (index = 0; index < document.DailyVisit.grpType.length; index++)
{
if (document.DailyVisit.grpType[index].checked)
{
var groupChecked = document.DailyVisit.grpType[index].value;
if (groupChecked == "School")
{
if (document.DailyVisit.gradekto6.value != parseInt(document.DailyVisit.gradekto6.value))
{
alert("Grades K-6 must be a number.");
return false;
}
if (document.DailyVisit.grade7to8.value != parseInt(document.DailyVisit.grade7to8.value))
{
alert("Grades 7-8 must be a number.");
return false;
}
if (document.DailyVisit.grade9.value != parseInt(document.DailyVisit.grade9.value))
{
alert("Grade 9 must be a number.");
return false;
}
if (document.DailyVisit.grade10.value != parseInt(document.DailyVisit.grade10.value))
{
alert("Grade 10 must be a number.");
return false;
}
if (document.DailyVisit.grade11.value != parseInt(document.DailyVisit.grade11.value))
{
alert("Grade 11 must be a number.");
return false;
}
if (document.DailyVisit.grade12.value != parseInt(document.DailyVisit.grade12.value))
{
alert("Grade 12 must be a number.");
return false;
}
}
}
}
}
if (obj){
switch(obj.type){
case "select-one":
if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].text == ""){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "select-multiple":
if (obj.selectedIndex == -1){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
case "text":
case "textarea":
if (obj.value == "" || obj.value == null){
alertMsg += " - " + fieldDescription[i] + "\n";
}
break;
default:
}
if (obj.type == undefined){
var blnchecked = false;
for (var j = 0; j < obj.length; j++){
if (obj[j].checked){
blnchecked = true;
}
}
if (!blnchecked){
alertMsg += " - " + fieldDescription[i] + "\n";
}
}
}
}
if (alertMsg.length == l_Msg){
return true;
}else{
alert(alertMsg);
return false;
}
}