CODEWITHSUNDEEP
javascriptjquery
SkyeBoniwell
SkyeBoniwell

Reputation: 7092

dynamically adding textarea data to a page

I have the following jQuery code that gets all the text in a group of textboxes and then displays the text elsewhere on the page between "<h2></h2>" tags in a new <div>.

The code does work, but for some reason, it is adding an extra empty <h2></h2> to the end.

So, for example, if there are 3 textboxes on the page, it will display those 3, but then add an empty <h2></h2> to the end like this:

   <div id="desc1">
       <h2>description 1</h2>
       <h2>description 2</h2>
       <h2>description 3</h2>
       <h2></h2>    <!--why is this here?-->
   </div>

I can't figure out what's going on. Could anyone offer any suggestions?

var newDiv = $("<div>").attr("id", 'desc' + counter);

var descriptions;
$(function () {
       descriptions = $('textarea.descriptionTxt').map(function () {
            return "<h2>" + this.value + "</h2>";
       }).get();
       $(newDiv ).html(answers.join(''));
});

$(newDiv).insertAfter(titleDiv).html();

Thanks!

Upvotes: 2

Views: 56

Answers (1)

karim79
karim79

Reputation: 342625

Perhaps your last description is empty? Try:

   descriptions = $('textarea.descriptionTxt[value!=""]').map(function () {
        return "<h2>" + this.value + "</h2>";
   }).get();

Upvotes: 3

Related Questions