This tutorial will show how to make a textbox display a text depending on which radio button was checked.
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">
<!--
function vote()
{
var t="Your favourite sport is: "
for (i=0; i<document.myform.sports.length; i++)The initial value of i is 0, because the first index of the form is 0. The final value is document.myform.sports.length, basically the last index of the form.
The next part checks if a radio button was checked, starting with the first radio button, index 0 (i=0).
{
if (document.myform.sports[i].checked==true)
{
t =t +document.myform.sports[i].value
}
}If a radio button was checked then the t variable will become “Your favourite sport is ” + the radio button’s value. If not, t will remain the same.
This part displays the t variable in the textbox.
document.getElementById("txt").value=t
}
-->
</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, <html> <!-- --> </html>, 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">
<!--
function vote()
{
var t="Your favourite sport is: "
for (i=0; i<document.myform.sports.length; i++)
{
if (document.myform.sports[i].checked==true)
{
t =t +document.myform.sports[i].value
}
}
if (t=="Your favourite sport is: ")
{
document.getElementById("txt").value="Choose a sport"
}
else
{
document.getElementById("txt").value=t
}
}
-->
</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>
