How to add value to textarea when checkbox is checked

Question

I am using the following function that I just found here on SO that does the work with regards to my question only one issue is that, I have a long list of selection and when a user check more than 3-4 checkboxes some of the text or value that is added on the textarea are no longer visible. Is there any way so that everytime a box is check the text that is being added to the text area is always visible? Any help is greatly appreciated.

-thanks ahead!

<input type="text" value="" class="textfield" id="video0_tags" name="video0_tags">
<div class="taglist">
<label><input type="checkbox" value="2D Animation">2D Animation</label>
<label><input type="checkbox" value="3D Animation">3D Animation</label>
<label><input type="checkbox" value="Animatronics">Animatronics</label>
<label><input type="checkbox" value="Architectural">Architectural</label>
<label><input type="checkbox" value="Cartoon">Cartoon</label>
<label><input type="checkbox" value="Cell Animation">Cell Animation</label>
<label><input type="checkbox" value="Character Animation">Character Animation</label><label><input type="checkbox" value="Cut & Paste">Cut & Paste</label>
<label><input type="checkbox" value="Doodle">Doodle</label>
<label><input type="checkbox" value="HDR">HDR</label>
<label><input type="checkbox" value="High Speed">High Speed</label>
<label><input type="checkbox" value="Illustration">Illustration</label>
<label><input type="checkbox" value="Live Action">Live Action</label>
<label><input type="checkbox" value="Macro">Macro</label>
<label><input type="checkbox" value="Motion Design">Motion Design</label>
<label><input type="checkbox" value="Motion Graphics">Motion Graphics</label>
<label><input type="checkbox" value="Moving Installation">Moving Installation</label>
</div>


function updateTextArea() {     
   var allVals = [];
   $('.taglist :checked').each(function() {
      allVals.push($(this).val());
   });
   $('#video0_tags').val(allVals)
   }
   $(function() {
      $('#video0_tags input').click(updateTextArea);
      updateTextArea();
});

so did you want the text area to grow each time you added something? — Patricia
– Patricia, Commented Mar 28, 2011 at 13:38
Is that to say that the textarea's content overflows? You could force a scroll. — canon
– canon, Commented Mar 28, 2011 at 13:39
You're saying "textarea" but your code shows a text input. They are very different, which one do you mean? — Albireo
– Albireo, Commented Mar 28, 2011 at 13:47
Do you want to make sure the most recently checked item is the most prominently visible, or just make sure its possible (e.g. scrolling) to view it? — ExtraGravy
– ExtraGravy, Commented Mar 28, 2011 at 13:54
@kappa thank you for clarifying. I'm sorry everyone I was wrong when I use the word textarea. Its the input that I am referring. I want to make sure that the most recently checked item is the most prominently visible as what extragravy said any idea? — vaqz
– vaqz, Commented Mar 28, 2011 at 14:37

Alex Pacurar · Accepted Answer · 2011-03-28 13:52:54Z

3

first, you will need to have a textarea element, so change the input tag with the textarea. Then on updateTextArea function, you can set the rows attribute on it so that all the text within it is visible. see http://jsfiddle.net/7b5fk/1/

answered Mar 28, 2011 at 13:52

Alex Pacurar

5,8814 gold badges28 silver badges33 bronze badges

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

1 Comment

vaqz Over a year ago

Hi Alex thank you for that great working example. Is there any way so that the text is just added next to the word that is already in the input (btw I was wrong when I use the word textarea I meant to say input) and when it reaches the end (I mean the right side of the input) the text moves to the left giving a space to the new text added to the right? any thoughts? thanks ahead!

Black Box Operations · Accepted Answer · 2011-03-28 13:59:47Z

2

First, you'll want to change video0_tags to a textarea. Next, you'll want to attach the .click() event to each checkbox so that every selection updates the textarea accordingly.

<textarea id="video0_tags"></textarea>

$(document).ready(function(){
    $(".taglist input").click(function(){
         $("#video0_tags").text('');
         $(".taglist :checked").each(function(){
              $("#video0_tags").append( $(this).val() + "\n");
         });
    });
});

answered Mar 28, 2011 at 13:59

Black Box Operations

2571 silver badge5 bronze badges

Comments

jmccarthy · Accepted Answer · 2011-03-28 13:51:08Z

1

Change the text input to a textarea and it will automatically add a scrollbar as it needs it.

answered Mar 28, 2011 at 13:51

jmccarthy

4804 silver badges16 bronze badges

Collectives™ on Stack Overflow

How to add value to textarea when checkbox is checked

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related