Tutorials and Code

ActionScript (5)
ASP (7)
ASP.NET (28)
Assembly (1)
C (6)
C# (131)
C++ (33)
CSS (6)
General (4)
HTML (6)
Java (27)
JavaScript (38)
MySQL (2)
Objective C (1)
Pascal (1)
PHP (59)
Python (3)
Ruby (18)
Silverlight (1)
SQL (7)
VB.NET (5)
Visual Basic (3)

Syndication

My Account

Community Forums

Webmaster Tools

Tech Jobs

Geekpedia » JavaScript Tutorials » Using radio buttons with JavaScript

Using radio buttons with JavaScript

This tutorial will show how to make a textbox display a text depending on which radio button was checked.

On Monday, September 4th 2006 at 02:05 PM

By Sorin Sodolescu (View Profile)

(Rated 4.3 with 49 votes)

Contextual Ads

More JavaScript Resources

In this tutorial we will see how to make a textbox display a text, depending on what radio button is checked.
Let's say that you have the following form, containing radio buttons, a button, used to call the JavaScript function, and a textbox:

<html>
   <body>
      Vote for your favourite sport:
      <form name="myform">
         <input type="radio" name="sports" value="Fotball" />Football<br />
         <input type="radio" name="sports" value="Hockey" />Hockey<br />
         <input type="radio" name="sports" value="F1" />F1<br />
         <input type="radio" name="sports" value="Basketball" />Bascketball<br />
         <input type="radio" name="sports" value="Tennis" />Tennis<br />
         <input type="radio" name="sports" value="Golf" />Golf<br />
         <input type="button" value="VOTE" onClick="vote()" /><br>
         <input type="text" id="txt" />
      </form>
   </body>
</html>

In order to display the chosen sport in the textbox, we will have to loop through the form to find out what radio button was checked. To do this we will use a variable, i, with the "for" statement.

<head>
   <script type="text/javascript">
   
   </script>
</head>

But there is the possibility of the function being called without clicking a radio button. In that case the textbox will read "Your favourite sport is ". We can avoid this situation by using an if statement after the for loop, replacing the "document.getElementById("txt").value=t" line above with:

if (t=="Your favourite sport is: ")
{
   document.getElementById("txt").value="Choose a sport"
}
else
{
   document.getElementById("txt").value=t
}

After doing so, if the function is called without clicking a radio button first, the textbox will read "Choose a sport".
Finally, i've put the function into a HTML comment tag, <code><html>  </html></code>, to keep old browsers that can't recognize the script from displaying it.
Here is the entire code, that you can paste into a HTML document:

<html>
   <head>
      <script type="text/javascript">
      
      </script>
   </head>
   <body>
      Vote for your favourite sport:
      <form name="myform">
         <input type="radio" name="sports" value="Fotball" />Football<br />
         <input type="radio" name="sports" value="Hockey" />Hockey<br />
         <input type="radio" name="sports" value="F1" />F1<br />
         <input type="radio" name="sports" value="Basketball" />Bascketball<br />
         <input type="radio" name="sports" value="Tennis" />Tennis<br />
         <input type="radio" name="sports" value="Golf" />Golf<br />
         <input type="button" value="VOTE" onClick="vote()" /><br>
         <input type="text" id="txt" />
      </form>
   </body>
</html>

Digg It!

Del.icio.us Reddit

StumbleIt

Newsvine

Furl

BlinkList

Rate this tutorial

Current Comments

by Blippo on Sunday, January 7th 2007 at 05:34 PM

So far, I have no idea on how to read radiobutton values in Greasemonkey scripts.
I really would like to see a version of the script that is compatible with Firefox\'s XPCNativeWrappers.
Anyone have some good ideas?

by KOOchi on Wednesday, September 12th 2007 at 08:48 AM

gochii

by WashingTon on Wednesday, September 12th 2007 at 08:49 AM

by Kadrus on Saturday, September 15th 2007 at 05:31 AM

I did it in an other way...but still the same result

<html>
<head>
<script type="text/javascript">
function check(sport)
{
document.getElementById("answer").value=sport
}
</script>
</head>
<body>

<p>What's your favorite sport?</p>

<form>
<input type="radio" name="sport" onclick="check(this.value)" value="Basketball">Basketball<br />
<input type="radio" name="sport" onclick="check(this.value)" value="Football">Football<br />
<input type="radio" name="sport" onclick="check(this.value)" value="Baseball">Baseball<br />
<input type="radio" name="sport" onclick="check(this.value)" value="Soccer">Soccer<br />
<br />
Your favorite sport is: <input type="text" id="answer" size="20">
</form>

</body>
</html>

by Sorin Sodolescu on Saturday, September 15th 2007 at 06:09 AM

Hi Kadrus

Yes, putting the "Your favourite sport is: " text in the body and calling the function by clicking the radio button saved you from writing some extra code. That's great! But the point of this tutorial was to introduce beginners to for loops, arrays and obviously radio buttons. Nevertheless, congratulations for writing shorter, more efficient code!

by sdfsdf on Friday, June 20th 2008 at 04:16 AM

fdbgdbgdf

by fcdasdas on Tuesday, September 23rd 2008 at 01:22 AM

dsfdsfds

by Rana on Monday, November 17th 2008 at 02:57 AM

We can use this for other validation
<script type="text/javascript">

</script>

<form name="myform">
<input type="radio" name="sports" value="Fotball" />Football<br />
<input type="radio" name="sports" value="Hockey" />Hockey<br />
<input type="radio" name="sports" value="F1" />F1<br />
<input type="radio" name="sports" value="Basketball" />Bascketball<br />
<input type="radio" name="sports" value="Tennis" />Tennis<br />
<input type="radio" name="sports" value="Golf" />Golf<br />
<input type="button" value="VOTE" onClick="validForm()" /><br>
</form>

by Chetan on Tuesday, November 25th 2008 at 01:36 AM

Thanx Kadrus!!!!

by Chetan on Tuesday, November 25th 2008 at 01:36 AM

Thanx Kadrus!!!!

by hi on Wednesday, January 28th 2009 at 06:59 AM

wst site very poor site

by vrushali on Wednesday, February 25th 2009 at 05:46 AM

Hi...
i have one query...if on clicking radio button I want all the value related to that record,thn how can we achieve it..
for example:
when I click on 1st radio button I should have all (username,userid,address,zip,city,country)these values to be displyed on the screen....

by vczxv on Monday, April 20th 2009 at 06:19 AM

xvc b

by vczxv on Monday, April 20th 2009 at 06:19 AM

xvc b

by vczxv on Monday, April 20th 2009 at 06:19 AM

xvc b

by vinesh on Thursday, July 2nd 2009 at 07:19 AM

@vrushali
u shud look into jQuerry, its gives u neat methods to do that