jQuery Update Textarea without replacing content

Question

In JavaScript you could just use the =. or += to add existing data to data. How do I do this in jQuery. I am trying to add a check-box list to my form, each field should building up a list in the textarea separating data by a comma.

Can't seem to figure it. It just replaces the q value and does not add.

jQuery

function ExportButton(){
    var data = $('#orders').text();
    var selected = new Array();
        $('.mycb:checked').each(function() {
        var q = $(this).attr('value');
        alert(q);
        $('#orders').text(data+q+',');

    });
}

HTML

<div><input type="checkbox" id="mycb2" class="mycb" value="Chocolate" /> Chocolate</div>
<div><input type="checkbox" id="mycb1" class="mycb" value="Vanilla" /> Vanilla</div>
<a href="javascript:ExportButton()">Export to Textarea</a>
<textarea rows="10" cols="80" id="orders" name="orders"></textarea>

jsFiddle

http://jsfiddle.net/GJXKW/3/

Any help would be appreciated. I want to a build a list like 4,5,3,4,24,2424,2, in the textarea ending without the comma would be a bonus but I will do regex maybe?

jQuery's text() method does not add content, it completely replaces it. Try prepend() or append() instead. — adeneo
– adeneo, Commented May 15, 2013 at 15:02

adeneo · Accepted Answer · 2013-05-15 15:45:04Z

4

Noone seems to recognize that this is inside a loop, and that text(), html() and val() will overwrite the content on each iteration. All you really have to do is concentenate the string in the loop, and append it once after the loop :

function ExportButton(){
  var data = "";

  $('.mycb:checked').each(function(i,el) {
      data += el.value + ',';
  });

  $('#orders').text( data );
}

FIDDLE

edited May 15, 2013 at 15:45

answered May 15, 2013 at 15:08

adeneo

319k29 gold badges410 silver badges392 bronze badges

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

2 Comments

TheBlackBenzKid Over a year ago

+1 for detail and reading my question correctly. I added a blank liner to ensure the form is blank before running the function so that no data is ever duplicated.

adeneo Over a year ago

@TheBlackBenzKid - You're welcome, and if you'd like to start with an empty textarea each time, just don't get it's value to begin with. I'll update the answer !

Anoop · Accepted Answer · 2013-05-15 15:09:05Z

1

Use .val instead of .text jsFiddle

    function ExportButton(){
    var data;
    var selected = new Array();
        $('.mycb:checked').each(function() {
        var q = $(this).attr('value');  
            data = $('#orders').val();
            if(data ){
              data = data + "," +q 
            }else {
                  data = q 
            }
        $('#orders').val(data);

    });
}

edited May 15, 2013 at 15:09

answered May 15, 2013 at 15:02

Anoop

23.2k10 gold badges65 silver badges79 bronze badges

1 Comment

TheBlackBenzKid Over a year ago

Interesting to use an conditional statement so plus 1 for that.

JordiVilaplana · Accepted Answer · 2013-05-15 15:03:30Z

0

It's just because jQuery doesn't recognize the text() of a <textarea>. As it is like an input field, you may use the val() function:

function ExportButton(){
    var data = $('#orders').val();
    var selected = new Array();
    $('#mycb:checked').each(function() {
        var q = $(this).attr('value');
        alert(q);
        $('#orders').val(data+q+',');
    });
}

answered May 15, 2013 at 15:03

JordiVilaplana

4853 silver badges10 bronze badges

Comments

Steely Wing · Accepted Answer · 2013-05-15 15:23:03Z

0

Have a see at this http://jsfiddle.net/steelywing/GJXKW/8/

$('#export').click(function () {
    var checked = [];
    $('input:checked').each(function () {
        checked.push($(this).val());
    });
    $('textarea').val(checked.join(','));
});

answered May 15, 2013 at 15:23

Steely Wing

17.9k10 gold badges63 silver badges55 bronze badges

Comments

probablyup · Accepted Answer · 2013-05-15 15:02:51Z

-1

You can always intermix jQuery and vanilla JS, so if you have something that works, just do it and don't call the overhead of jQuery for a simple text node append.

answered May 15, 2013 at 15:02

probablyup

8,2441 gold badge29 silver badges40 bronze badges

1 Comment

TheBlackBenzKid Over a year ago

What are you talking about?

Collectives™ on Stack Overflow

jQuery Update Textarea without replacing content

5 Answers 5

2 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related