HTML-JAVASCRIPT

Ads
 

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.

Ads









Related Tutorials/Questions & Answers:
HTML-JAVASCRIPT
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
HTML-JAVASCRIPT
HTML-JAVASCRIPT  There are two radio button and one text area. The values should be generated on the text area based on the selection of radio buttons. Hardcoding is also allowed
Advertisements
how to validate the telephone number without using jquery in html with javascript
how to validate the telephone number without using jquery in html with javascript  how to validate the telephone number without using jquery in html with javascript
mini project using html,javascript and ms access with source code
mini project using html,javascript and ms access with source code  I want a mini project which uses html and java script and backend as ms access with source code. plz send its important and urgent
changing an image based on checking checkbox using HTML & JavaScript, Please put div blocks
changing an image based on checking checkbox using HTML & JavaScript, Please put div blocks   Hello, PLease check the below code, and let me know...;script type="text/javascript"> function showImage
How to display user entered information using HTML and JavaScript
How to display user entered information using HTML and JavaScript. We are going to describe How to display user entered information using HTML and JavaScript. First of all we have created HTML form with two text fields "
coding for horizontal menubar using using html or javascript - JSP-Servlet
coding for horizontal menubar using using html or javascript  hii friends, i wanted to implement horizontal menubar in my project tht wil open the links to diffrnt pages kindly help
JavaScript createAttribute method
JavaScript createAttribute method       In the HTML JavaScript we have one of the important method createAttribute which can be used to create the html tag's attribute
JavaScript array functions
JavaScript array functions We are going to describe How to create JavaScript Array function. Now we have created JavaScript Array function by help of HTML and JavaScript language.In this simple example we have used basic
javaScript
javaScript  How to open a browser window that cannot be resized? (HTML + Javascript
Echo 2
Echo 2       Echo 2 allows you to code Ajax apps in pure Java (Demo)which automatically generates HTML and Javascript. Read full Description
IFrame.IN- Just Another Encode Tools
IFrame.IN- Just Another Encode Tools       This site will help you quickly encode and obfuscate your HTML/JavaScript code many different methods, as well as generate browser redirect
Ajax method
. thism should be done using ajax,html,javascript. And xml should contain data
Ajax method
. thism should be done using ajax,html,javascript. And xml should contain data
Dynamic web pages
Dynamic web pages  hi, i am just creating a web page using html and javascript. i want to give it a eye catching look using javascript. I just want to know how could i make it happen using javascript functions,like zoom in &
javaScript+Html
javaScript+Html  print("code sample");(Use ExtJS 3 or 4) and create following (HTML, Javascript,ExtJS) a. Create a single page application divided into 4 sections - Top Header, Footer,Left Navigation (Tree), Center Panel
Html form using JavaScript to display the table content
Html form using JavaScript to display the table content  HI There, Greetings, I am new to this java and I need your assistance. I have created... want to write a Html JavaScript coding to display the content from database
how to print HTML using javascript or Jquery
how to print HTML using javascript or Jquery  is there any way to print a document(created using Html and javascript) without using window.print, which works for all the browser specially chrome and firefox, I have used
Simple HTML example
can use HTML with JavaScript to create more dynamic WebPages. These days HTML...Simple HTML example In this section we will give you very simple example of a HTML page. After reading this page you should be able to create simple HTML
Dynamic html examples
Dynamic html examples  Hi, What is Dynamic HTML? Explain with dynamic html examples. Thanks   Hi, DHTML stands for Dynamic HTML and is uses the HTML, JavaScript, DOM, & CSS in a program. Following is very simple
java web application without running tomcat
java web application without running tomcat  I did a project by using jsp,html,javascript,css,tomcat,editplus and MSAccess as backend..i created set up file by using NSIS tool..but the problem when i will the project to some
How to handle enter key in javascript
of button.   Enter key event in html JavaScript This is very simple. You...How to handle enter key in javascript  Can any one tell me how to handle the enter key event on a Button in HTML. Like in my simple HTML page i want
Example program to pass value from Html to java script
value from HTML to JavaScript </TITLE> <script language="JavaScript... Example program to pass value from Html to java script... html code to java script easily. To show this we have created an example Html page
JavaScript where to place in HTML
JavaScript where to place in HTML   Where to place JavaScript code into HTML Code?   Placing JavaScript code into HTML Code In HTML.... See the example given below. Declaring JavaScript in HTML Head Tag <
stuts java script validation is not working.
; <html:javascript formName="logonForm"/> > Enter name:<html:text property="username"/> > Enter pass:<... and validation.xml file's code. pls help --of jsp page-- > <html:form action
How to substring in JQuery?
will extracted till end of the string. Here is the complete example html and javascript code... JavaScript"; I just want to take the value JavaScript from the above variable..., There is no need to use the jQuery for getting the smaller from a big string. JavaScript
Ajax Web Framework, Frameworks for Ajax
the knowledge of HTML, CSS, JavaScript and Ajax. In this kind of framework developer... into Ajax, HTML and JavaScript. In such framework high level language is used... HTML and JavaScript for Ajax support. The server-side framework renders
Conditions In Java Script
the user's browser opens the HTML file. JavaScript is different from the Java language... in HTML within a <SCRIPT> tag. It can be used to any number of JavaScript... of JavaScript and create your first JavaScript program. About JavaScript Java
Traditional Means of Web Application Development
frames which is inserted by html and JavaScript. This technique is much similar..., simple HTML web pages, later on it became dynamic by using CGI script (Perl..., again when server sent back data that is accessed by JavaScript.  Another way
Getting content of alert message into textfield
); } } 2)If you want the code in html-javascript, then here is it: <...Getting content of alert message into textfield  how to get content of alert message into textfield using javascript   Getting content
Getting content of alert message into textfield
); } } 2)If you want the code in html-javascript, then here is it: <...Getting content of alert message into textfield  how to get content of alert message into textfield using javascript   Getting content

Ads