Radio button that prints text to a text box?

I’m working on an html assignment using javascript and I need to have two radio buttons as well as a text box. When you click on one of the radio buttons it needs to display text inside the text box.

right now I have:

<form>
	<input type="radio" name="yes" value="" onclick ="  "/> yes</br>
	<input type="radio" name="no" value="" onclick = "   "/> no</br>
	<input type="text" name="textbox1" value=""/><br />
			
</form>

but I can’t figure out what to put in the onclick = " ".

hmmm…looks like you haven’t done much of the assignment at all so far.

The onclick need to call a function that writes whatever is passed to the function into the textbox.

You haven’t specified where the text to go into the textbox will come from and your post implies the same text will be written regardless of which radio button is clicked

The onclick function needs to do the following.

  1. get a reference to the textbox object

  2. set the value of the object in 1) to whatever value was passed to the onclick function

Short of writing the code and doing the assignment for you, I can’t help much more.

Here’s an example function i wrote quickly, as Kalon said you need to refer the onclick event to a javascript function.

function insertData(txt){
    var e = document.getElementsByTagName('input');
    
    for(var i=0; i<e.length; i++){
        if (e[i].name == 'textbox1'){
            e[i].value = txt;
        }
    }
}

there you go - SgtLegend’s done the assignment for you :slight_smile:

if you want you can cut down the code by removing the for loop by assigning an id to the textbox as well and using getElementById() instead of getElementsByTagName().

Thanks for the help guys. I figured I’d have to use a function kalon. Unfortunately, the class I’m doing this for has one of the WORST professors I’ve ever had we haven’t gone over anything other than a function that generates a random number. So yea, I’m pretty much expected to read online and figure out how to do it, then show that I know how.

Anyways, enough ranting.

SgtLegend, thanks a lot for the example. I tried to implement it though and I must be doing something wrong. This is what I tried:


<script type = "text/javascript" >
	function insertData(txt){
            var e = document.getElementsByTagName('input');
		    
             for(var i=0; i<e.length; i++){
		        if (e[i].name == 'textbox1'){
		            e[i].value = txt;
		        }
		    }
		}

	
</script>
	
		
<form>
<input type="radio" name="yes" value="" onclick ="insertData(hi) "/> yes </br> 
<input type="radio" name="no" value="" /> no </br>
<input type="text" name="textbox1" value=""> </br>
</form>

This however isn’t working. Is there something else I should have changed with your function? If not, can you explain where I’m going wrong

How do I assign an id to the textbox? Sorry, but I seriously feel like I’ve been dropped in the ocean and then asked to swim. So I don’t know a lot of the stuff I should know by the time I take on a project like this.

This is another way of doing it

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
function insertData(str) {
    document.getElementById("textbox1").value = str;
}
 
</script>

</head>
<body>
 
<form>
    <input type="radio" name="yes" value="" onclick ="insertData('hi');"/> yes </br> 
    <input type="radio" name="no" value="" /> no </br>
    <input type="text" name="textbox1" id="textbox1" value="" /> </br>
</form>
 
</body>
</html>

Have a look at the w3schools tutorial on getElementById()

I hope he/she is not a refugee from sitepoint :lol:

If she is maybe she’ll realize we’re not paying to be told to learn on our own :stuck_out_tongue:

I appreciate all the help.

ok :slight_smile:

if you like, work through the other tutorials on the w3schools link I posted. sounds like you might learn more from them and they’re FREE…!!! :slight_smile:

I actually was able to do most of my assignment (there were other parts not involving radio buttons) simply with that small piece of advice. I even made the function better, by allowing different buttons to pass it a textbox number and then it would output text into that textbox! (helpful as I have multiple buttons and text boxes)

Anyways, I did run into another problem. If I want to have a drop-down list is there a way to put an onclick value in them? I tried :


<select name = "favorite color">
<option value= "red" onclick = "insertData('red');">red</option>
<option value= "blue" onclick = "insertData('blue');">blue</option>
</select>

but that didn’t work at all. I’d imagine since each value isn’t a technical box I can’t add an onclick option? If not, could I write a function where, at the push of a button, it would check and see what value I had in the drop-down menu? If so, when I wrote the function would tests such as :


var e = document.getElementById(dropdown1);

if (e.value == red) {


work?

So you want an event that shows the option you select from a drop down?

<select onchange="alert(this.value)">
    <option value="">Something</option>
</select>

To show the value in the text box you do

<select onchange="insertData(this.value)">
    <option value="something">Something</option>
</select>

in that case you need something similar to this

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
 
function showValue(elem) {
    if(elem.selectedIndex != 0) {
        alert('Option selected is:     '+elem.options[elem.selectedIndex].value);
    }
}
</script>
 
</head>
<body>
 
<select name="selMyList" onchange="showValue(this)">
    <option value="">Select an option</option>
    <option value= "red">red</option>
    <option value= "blue">blue</option>
</select>
 
</body>
</html>

and with both of those the “showValue(this)” will show whatever value I have selected? so if I select red it would be the same as showValue(red) ?

the this in showValue(this) refers to the <select> element object itself and that is what is passed to the function.

the function accepts the <select> object in a variable called elem.

the <select> option elements are stored in an array called options attached to the <select> object

the <select> object has a property called selectedIndex which is the array index of the selected option.

elem.options[elem.selectedIndex].value outputs the value of the value attribute for the selected option.

The IF statement just checks if the user selected “Select an option” and so the function does nothing if they did.