How can I get my checkbox data into text area box in html using js or jquery?

Question

I have a html form that has check box and text area. When I check the check box, I want it to be dynamically update the text area with its value. what am I doing wrong? here is the code:

<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script type="javascript">
   function changeTA() {
   var inputElements = document.getElementByName("favorite_pet");
       for(var i=0; inputElements[i]; ++i){
           if(inputElements[i].checked){
               $('#ta').val($('#ta').val()+inputElements[i].value); 
     }
   }
</script>
</head>
<body>
<form>  
   <legend>What is Your Favorite Pet?</legend>  
   <input type="checkbox" name="favorite_pet" id="check_cat" value="Cats" onchange="changeTA()">Cats<br>  
   <input type="checkbox" name="favorite_pet" id="check_dog" value="Dogs" onchange="changeTA()">Dogs<br>  
   <input type="checkbox" name="favorite_pet" id="check_bird" value="Birds" onchange="changeTA()">Birds<br>  
       <br>  

   <textarea id="ta" rows="4" cols="50">
   </textarea>
</form>

</body>
</html>

Rafael Duarte · Accepted Answer · 2019-08-05 16:39:15Z

2

You have 3 problems in your code:

You have a typo in getElementByName, use getElementsByName
You're missing a closing bracket in your function
Change <script type="javascript"> to <script type="text/javascript">

Your code should work with these 3 problems fixed:

<html>
<head>
<meta charset="ISO-8859-1">
<title>Sample Web page</title>
<script type="text/javascript">
   function changeTA() {
        var inputElements = document.getElementsByName("favorite_pet");
        for(var i=0; inputElements[i]; ++i){
           if(inputElements[i].checked){
               $('#ta').val($('#ta').val()+inputElements[i].value); 
              }
       }
   }
</script>
</head>
<body>
<form>  
   <legend>What is Your Favorite Pet?</legend>  
   <input type="checkbox" name="favorite_pet" id="check_cat" value="Cats" onchange="changeTA()">Cats<br>  
   <input type="checkbox" name="favorite_pet" id="check_dog" value="Dogs" onchange="changeTA()">Dogs<br>  
   <input type="checkbox" name="favorite_pet" id="check_bird" value="Birds" onchange="changeTA()">Birds<br>  
   <br>  

   <textarea id="ta" rows="4" cols="50">
   </textarea>
</form>

</body>
</html>

Here's a working fiddle: https://jsfiddle.net/mrz1L4h9/

edited Aug 5, 2019 at 16:39

answered Aug 5, 2019 at 16:27

Rafael Duarte

5696 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Kiran Cyrus Ken Over a year ago

still didn't get the result I expected. the textarea box is blank

Rafael Duarte Over a year ago

you're right, you're also missing a closing bracket in your script, I updated my answer :)

Kiran Cyrus Ken Over a year ago

thank you. it s working in fiddle but not in chrome / IE. any idea? why?

Kiran Cyrus Ken Over a year ago

no..what I meant is a webpage is supposed to be run on a browser directly without any tools like fiddle. it works in fiddle but not directly in the browser. any reason that you are aware of?

Rafael Duarte Over a year ago

JSFiddle is not a tool to run your javascript code, it's just an "online IDE" that is great for sharing code snippets, all the code you write there runs on the browser.

|

Collectives™ on Stack Overflow

How can I get my checkbox data into text area box in html using js or jquery?

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related