Question

I basically am creating textarea’s when the user clicks a button. I need to be able to access the values within the textarea and push them to an array, and then convert this array to a string.

My problem is that the textarea values are ‘undefined’ even if they contain text.

<button id="addquestion">Add Q And A</button>

<div id="qandacontainer">
</div>


<button id="formatcss">Format CSS</button>

$('#addquestion').click(function() {
    $('#qandacontainer').append("<div class='q_and_a'><p><strong>Question:</strong></br><textarea id='question_ta'></textarea></p><p><strong>Answer:</strong></br><textarea id='answer_ta'></textarea></p><button id='remove_qa'>Remove</button></div>");                
});

$('#remove_qa').live('click', function() {                             
     $(this).parent().remove(); 
});

var qanda_list = [];
$('button#formatcss').click(function () {

    $('.q_and_a').each(function() {

        var _this = $(this);
        //Issue is that I cannot get the values within the textareas :(
        qanda_list.push(_this.children("textarea#question_ta").val());
        qanda_list.push(_this.children("textarea#remove_qa").val());

    });

Any advice or help is really appreciated!

Answer 1

The problem is that you’re calling children() which gets the immediate children of a parent container but your <textarea> is not the immediate children of $('.q_and_a') because is wrapped in a p. What you should do is:

qanda_list.push(_this.find("textarea#question_ta").val());

Which by the way you can just reduce to:

qanda_list.push(_this.find("#question_ta").val());