How can I display the value of a radio button in a form text box? I'd like it to change when the radio button is clicked.
Here is my radio buttons:
<input type="radio" name="testPassed" id="TestPassed" value="TestPassed">
<input type="radio" name="testFailed" id="TestFailed" value="TestFailed">
The text box:
<textarea name="description" cols="50" rows="5" id="description">Test Status: radioButtonValueHere </textarea>
Many thanks
How can I display the value of a radio button in a form text box? I'd like it to change when the radio button is clicked.
Here is my radio buttons:
<input type="radio" name="testPassed" id="TestPassed" value="TestPassed">
<input type="radio" name="testFailed" id="TestFailed" value="TestFailed">
The text box:
<textarea name="description" cols="50" rows="5" id="description">Test Status: radioButtonValueHere </textarea>
Many thanks
Share Improve this question edited Nov 23, 2009 at 14:33 Pekka 450k148 gold badges987 silver badges1.1k bronze badges asked Nov 23, 2009 at 14:25 JamieJamie 2,56510 gold badges28 silver badges31 bronze badges 3- The formatting of the question looks confusing. – ndim Commented Nov 23, 2009 at 14:33
- Set name property the same, so that <input> controls can be radio buttons: name="testResults". – artdanil Commented Nov 23, 2009 at 15:02
-
I think what @artdanil was trying to say is that you should use the
nameattribute to group your radio buttons appropriately. Read the following tutorial for more information: echoecho./htmlforms10.htm – Topher Fangio Commented Nov 23, 2009 at 15:41
3 Answers
Reset to default 2Well, you can implement an OnClick function with your radio button like this: <input type="radio" name="sports" value="Football" onClick="doSomething();"> or you can have a function to iterate through all the radio buttons on your form and whichever is checked, will fill the textbox with your value:
<form name="myform">
<input type="text" id="txt" />
...
<script type="text/javascript">
for (i=0; i<document.myform.sports.length; i++)
if (document.myform.sports[i].checked==true)
{
t =t +document.myform.sports[i].value
}
}
document.getElementById("txt").value=t
You can write a function that will pass the result value to the text area:
<head>
<script type="text/javascript">
<!--
function writeResult(text){
document.myform.testResultDescription.value = text;
}
//-->
</script>
</head>
<body>
<form name="myform">
<input type="radio" name="testResults" id="TestPassed" value="TestPassed" onclick="writeResult('Test Passed');" />
Test Passed<br />
<input type="radio" name="testResults" id="TestFailed" value="TestFailed" onclick="writeResult('Test Failed');" />
Test Failed<br />
<textarea name="testResultDescription" cols="50" rows="5" id="testResultDescription"></textarea>
</form>
</body>
With jQuery this is really simple
HTML
<div id="radiobuttons">
<--! put here radios buttons -->
</div>
$("#radiobuttons input:radio").click(function() {
$("textbox_id").val($(this).val());
});