My Project - Video Waker Alarm
Get Video alarm on Google Play

Select radio button with text box to be visible – JavaScript


You can link radio button with text box with JavaScript. You may come across some of the situation, of enabling only one text box corresponding to the selected radio button. As you don’t want to confuse your user for filling other text box too. So how you can link selected radio button with text box to be visible. We will make use of JavaScript and CSS functionality with html to do the same. CSS is used to make the element visible or invisible. And JavaScript gives the functionality to handle the visibility of the element or text box.

Let us make a HTML page which link radio button with text box. We will make three radio button and three text box. A JavaScript script function named as radioWithText() which will be called when we will click on radio button. And According to the radio button selected, its corresponding text box will be visible. Visibility of text box depends on its CSS property display.
Here is the demo you can see :

OneRadio
TwoRadio
ThreeRadio


One

Select radio button with text box to be visible :

demo.html

 

<html>
<head>
<script type="text/javascript" language="JavaScript">
function radioWithText(d) {
    document.getElementById('one').style.display = "none";
    document.getElementById('two').style.display = "none";
    document.getElementById('three').style.display = "none";
    document.getElementById(d).style.display='inline'; 
}
</script>

</head>

<body>
<form name="radiowithtexbox">
OneRadio<input type="Radio" name="radio2text" value="Radiobutton1" 
onclick="javascript:radioWithText('one')" checked="checked" />

TwoRadio<input type="Radio" name="radio2text" value="Radiobutton2" 
onclick="javascript:radioWithText('two')" unchecked />

ThreeRadio<input type="Radio" name="radio2text" value="Radiobutton2" 
onclick="javascript:radioWithText('three')" unchecked />

<div id="one" style="display:visible;">
    <br>One<input type="Text" name="one">
</div>

<div id="two" style="display:none;">
    <br>Two<input type="Text" name="three">
</div>

<div id="three" style="display:none;">
    <br>Three<input type="Text" name="three">
</div>
</form>
</body>
</html>

 

You can comment here below to ask question regarding the same.