Tutorials
- ASP.NET
- C#
- C++
- Java
- JavaScript
- MySQL
- PHP
- Ruby
- SQL
- VB.NET
Code
How To
News
Forums
Pictures
Videos
Icons
Newsgroups

Building a C# Chat Client and Server

A step by step tutorial teaching you how to create your own chat client and chat server easily in C#, for local networks or the Internet.

in C# Programming Tutorials

Getting Hard Drive Information

A C# tutorial showing you how to make use of WMI to extract information on disk drives, such as model, capacity, sectors and serial number.

in C# Programming Tutorials

UPS Shipping Calculator

This tutorial will teach you how to calculate the shipping cost based on the weight, height, length and depth of the box, the distance and the UPS service type.

in PHP Programming Tutorials

Create Your Own Rich Text Editor

Creating a Rich Text Editor using JavaScript is easier to do than you might think, thanks to the support of modern browsers; this tutorial will walk you through it.

in JavaScript Programming Tutorials

Tutorials

Programming Tutorials

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

IT Jobs

From CareerBuilder

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.1 with 109 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