HTML-JAVASCRIPT

There are two radio buttons. On clicking a radio button, a text area must be created. If a first radio button is clicked, a text area is created. When the second button is clickHTed, a new text area must be created hiding the previous text area which is created on clicking the first radio button and vice versa

View Answers

May 15, 2013 at 6:13 PM

hi friend,

You may try the following code for solution of your query :

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Radio Button Example</title>
<script type="text/javascript">
var counterTextArea = 0;
var limit =4;
function addInput(divName)
{
    var test = document.getElementsByName("a");
    var t = document.getElementsByName("textbox");
    var text = null;
    for(var elem in test)
    {
        if(test[elem].checked)
        {
            t = test[elem].value;
            var newdiv = document.createElement('div');
            var input = document.createElement('textarea');
            input.name = 'post';
            input.maxLength = 50;
            input.cols = 2;
            input.rows = 2;         
            document.getElementById(divName).appendChild(input);
            var divEle = document.getElementById('dynamicInput');
            var divNodeLength = divEle.childNodes.length;
            if(divNodeLength > 0)
            {
                if(counterTextArea == limit)
                {
                    divEle.removeChild(divEle.childNodes[1]);
                    alert("You have reached the limit of adding " + counterTextArea + " inputs");
                    test[elem].checked=false;                   
                    counterTextArea = 0;                                                                    
                }
                else{
                divEle.removeChild(divEle.childNodes[0]);
                divEle.innerHTML = ""+t + (counterTextArea + 1) +": ";
                divEle.appendChild(input);
                counterTextArea++;
                }               
            }               
        }
    }
}
</script>
</head>
<body>
<form name="form1" action="#">

 <div id="dynamicInput">
 Textarea : 
 </div>  
 <p>
 <input type="radio" name="a" value="Fruits" onclick="addInput('dynamicInput');">Fruits</input><br/>
 <input type="radio" name="a" value="Chocolate" onclick="addInput('dynamicInput');">Chocolate</input><br/>
 <input type="radio" name="a" value="Cookie" onclick="addInput('dynamicInput');">Cookie</input><br/>
 <input type="radio" name="a" value="Icecream" onclick="addInput('dynamicInput');">Icecream</input> 
 </p>
</form>
</body>
</html>

Thanks.