Checking Radio buttons using Javascript

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
NotOnUrNelly
Forum Commoner
Posts: 61
Joined: Wed Mar 24, 2004 4:45 pm

Checking Radio buttons using Javascript

Post by NotOnUrNelly »

Hi all,

I have a simple javascript command for checking form elements, this command is nested within PHP. Basically when the form is submitted I need to check each of the elements has a value selected.

I can get this to work for text boxes and drop down lists as shown in the code below.

Code: Select all

function validate()
{

if(document.form1.username.value.length <1)
{
alert ("Please enter a value for Username");
document.form1.username.focus();
return false;
}
return true;
}
Basically if the textbox above has no value the function returns false and the form is not submitted.

I am trying to achieve this for a two radio button selection set

the name of the each radiobutton is

gender

button 1's value is Male
button 2's value is female.

How would I go about using my cheking function on radio buttons

here is the code for my button

Code: Select all

<td width="12%" class="lefttopbottom"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">&nbsp;Gender</font></td>
                  <td width="8%" class="bottomtop"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">Male 
                    <input type="radio" name="gender" value="Male">
                    </font></td>
                  <td width="13%" class="bottomtop"><font color="#FFFFFF" size="2" face="Arial, Helvetica, sans-serif">Female 
                    <input type="radio" name="gender" value="Female">
                    </font></td>
I have tried the following

Code: Select all

function validate()
{

if(document.form1.gender.value == "")
{
alert ("Please enter a value for Gender");
//document.form1.username.focus();
return false;
}
return true;
}
This did not seem to work

Can anyone help please.

Many Thanks
Jamie
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

you need to loop over the radio button element and check the 'checked' property to see if one has been selected.

ex:

Untested

Code: Select all

for(i=0;i<document.getElementById('myradio').length;i++)
{
   if(document.getElementById('myradio').item(i).checked == true)
      break;
}
User avatar
hawleyjr
BeerMod
Posts: 2170
Joined: Tue Jan 13, 2004 4:58 pm
Location: Jax FL & Spokane WA USA

Post by hawleyjr »

You need to loop through the radio buttons to determine which one is checked.

A couple tutorials I just found:

http://javascript.about.com/library/blradio1.htm

http://www.codeave.com/javascript/code.asp?u_log=7049
NotOnUrNelly
Forum Commoner
Posts: 61
Joined: Wed Mar 24, 2004 4:45 pm

Post by NotOnUrNelly »

Thanks for your reply,

I have tried the following, but keep getting an object required javascript error.

Code: Select all

function valButton(btn) {
    var cnt = -1;
    for (var i=btn.length-1; i > -1; i--) {
        if (btn[i].checked) {cnt = i; i = -1;}
    }
    if (cnt > -1) return btn[cnt].value;
    else return null;
}
                  

function validate()
{

//if (!valButton(form1.gender){
//alert ("Please enter a value for Age Group");
//return false;
//}
var btn = valButton(form1.gender);
if (btn == null) alert('No radio button selected');
return false;
else alert('Button value ' + btn + ' selected');
}
Am I doing something wrong

Jamie
NotOnUrNelly
Forum Commoner
Posts: 61
Joined: Wed Mar 24, 2004 4:45 pm

Post by NotOnUrNelly »

Hi There

Sorry to G this one up, but can anoyone help me or give help me with a work around.

Many Thanks
Jamie
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

did you try what I suggested?
NotOnUrNelly
Forum Commoner
Posts: 61
Joined: Wed Mar 24, 2004 4:45 pm

Post by NotOnUrNelly »

Hi Burito,

Im really sorry, Im not to sure on how to put this into my code. Is it Javascript, and how do I get an output to send the alert.

Uhm.
NotOnUrNelly
Forum Commoner
Posts: 61
Joined: Wed Mar 24, 2004 4:45 pm

Post by NotOnUrNelly »

Hi Burito

I have tried the following code from what you posted and seem to be getting somewhere

Code: Select all

for(i=0;i<document.form1.gender.length;i++) 
{ 
   if(document.form1.gender.item(i).checked == true) 
      break; 
	  alert ("Please enter a value for Gender");
	  return false;
}
The code above gives me a message to enter gender when non of the two option buttons are selected, and when the second is selected.

The code bypassed if the first one is checked, but I still get a message if the second one is checked. Which I should not.


So for no radiobutton checked,( i get the alert which is correct)
If the first button is checked (i dont get the alert which is correct
if the second button is checked ( i still get the alert, which is wrong)

There must be something slightly wrong in my code.

Many thanks
jamie
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

try this:

Code: Select all

for(i=0;i<document.form1.gender.length;i++)
{
   if(document.form1.gender.item(i).checked == true)   
      return true;
   else
      continue;
}
alert ("Please enter a value for Gender");
          return false;
NotOnUrNelly
Forum Commoner
Posts: 61
Joined: Wed Mar 24, 2004 4:45 pm

Post by NotOnUrNelly »

Hi burrito

That seemed to work, for the radio buttons. I then want to check the validity of text boxes.

The code just seems to exit, after checking the radio buttons.

If the routine was used as part of a function named validate, that returns a true after everything is selected. How would I close the loop and go onto check the next form element in this case a text box (ages)

Code: Select all

function validate()
{

for(i=0;i<document.form1.gender.length;i++) 
{ 
   if(document.form1.gender.item(i).checked == true)    
      return true; 
   else 
      continue; 
} 
alert ("Please enter a value for Gender"); 
          return false;


if(document.form1.ages.value == 0)
{
alert ("Please enter a value for Age Group");
document.form1.ages.focus();
return false;
}

return true;

}
It just seems to exit now without checking the value of (ages)

Many Thanks, sorry Im pretty new to this.
Jamie
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

you could set a boolean flag then above your loop and change it if one is checked then break out of the loop. You need to get rid of the return statement as well (I didn't realize you needed to do more in this function).

let me know if you need some code help and I'll whip something up for you.
NotOnUrNelly
Forum Commoner
Posts: 61
Joined: Wed Mar 24, 2004 4:45 pm

Post by NotOnUrNelly »

Im struggling with Boolean flags to be honest.

The validate function I am using to check all form elements. I am using validate over a number of pages with a varying number of form elements.

Uhm could you have a quick look if you dont mind.

Many Thanks
Jamie
User avatar
Burrito
Spockulator
Posts: 4715
Joined: Wed Feb 04, 2004 8:15 pm
Location: Eden, Utah

Post by Burrito »

untested:

Code: Select all

function validate()
{
var msg = "The following information needs attention \n\n";
var gen = true;
for(i=0;i<document.form1.gender.length;i++)
{
   if(document.form1.gender.item(i).checked == true)
   {
      gen = false;
      break;
   }
}
if(gen)
   msg += "You must select a gender \n";

if(document.form1.ages.value == 0)
{
  msg += "Please enter a value for Age Group";
}

if(msg.length > 50)
{
   alert(msg);
   return false;
}
return true;

} 
NotOnUrNelly
Forum Commoner
Posts: 61
Joined: Wed Mar 24, 2004 4:45 pm

Post by NotOnUrNelly »

Many Thanks for That

Burrito,

My Javascript needs a lot more work, just getting to grips with PHP nevermind implementing java within it.

Much appreciated
Jamie
Post Reply