Adding/Removing Checkbox Values into TextArea

Question

I scoured the the site and found a few examples, I got close but not close enough. I have 2 checkboxes and if a user checks them they are placed in the textarea, if the user removes the check. the value is removed. I want to keep cursor position too.

I am able to add but its still clunky.

My fiddle is http://jsfiddle.net/pU2P9/18/

here is my code

Testing. Values from another field will be inserted here.

    <form>

           <p>Favorite Color  <label><input type="checkbox" value="Green" />Green</label>
    <label><input type="checkbox" value="Red" />Red</label></p>
    </form>


 var textarea = document.getElementById("myTextArea1");
  // $('input[type=checkbox]').click(function () {
  $('input[type=checkbox]').change(function () {
  var $parentForm = $(this).closest("form");

 // var text = $(".insert-text", $parentForm).val();
  var text = $('input[type=checkbox]:checked').val() + " ";

 //  var text = $('input[type=checkbox]:checked', $parentForm).val() + " ";

  insertAtCursor(textarea, text);
  });

 function insertAtCursor(myField, myValue) {
  if (document.selection) {
    myField.focus();
    sel = document.selection.createRange();
    sel.text = myValue;
}

else if (myField.selectionStart || myField.selectionStart == '0') {
    var startPos = myField.selectionStart;
    var endPos = myField.selectionEnd;
    myField.value = myField.value.substring(0, startPos) + myValue +            myField.value.substring(endPos, myField.value.length);
  }
else {
    myField.value += myValue;
    }
 }
 ;

Any help would be appreciated.

Dutchie432 · Accepted Answer · 2012-03-19 17:11:08Z

1

Not sure exactly what you are trying to do, but it seems you're a little confused.

Try something like

$('input[type=checkbox]').change(function () {
    if ($(this).is(':checked')) {
        var text = $(this).val() + " ";
        insertAtCursor(textarea, text);    
    }
});

answered Mar 19, 2012 at 17:11

Dutchie432

29.3k20 gold badges94 silver badges110 bronze badges

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

2 Comments

Michael Hahn Over a year ago

very close. i just need the checkbox to delete if it unchecked and were good. I can keep clicking the checkbox and it keeps adding , i need to to remove trying to think of the logic

Michael Hahn Over a year ago

your solution while it didnt delete, the cursor kept position and added the checkbox value perfectly.

Ethan Brown · Accepted Answer · 2012-03-19 17:30:01Z

1

I think you're going to drive yourself crazy trying to treat the textarea like you are. You can prepend the colors easily enough, but what do you do when the user un-checks them? For example, what if they check green, then red, then un-checks green? It's now no longer a simple matter of removing 5 characters from the textarea.

If I understand your application, though, you're combining values from different fields in the textarea, so I would do something like this:

function updateTextArea() {
  var text = "";
  $('input[type=checkbox]:checked').each( function() {
    text += $(this).val() + " ";
  });
  $('input[type=text]').each( function() {
    text += $(this).val() + " ";
  });
  $('#myTextArea1').val( text );
}

Then you can just call this every time one of your values changes. For example, when the user changes one of the check boxes:

$('input[type=checkbox]').change(function () {
  updateTextArea();
});

I believe that this will be much cleaner than the approach you're outlining. You can see it in action here: http://jsfiddle.net/8y4D8/19/

Also, you could consider using Backbone.js (http://documentcloud.github.com/backbone/) or some similar Javascript MVC framework.

answered Mar 19, 2012 at 17:30

Ethan Brown

27.4k5 gold badges84 silver badges95 bronze badges

1 Comment

Michael Hahn Over a year ago

im just using this for a twitter textbox, they will check the box to add a particular hashtag where ever in there status message. I used colors to show the example easier. let me see if i can get the cursor part working now and i am good

Collectives™ on Stack Overflow

Adding/Removing Checkbox Values into TextArea

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related