Getting TextArea Using JQuery

Question

I am submitting a form using JQuery. The form looks like below

<form class="ask-more-form">
<div class="product_info_2">
<textarea name="product_question" class="textbox" placeholder="Ask You Question Here"></textarea>
</div>
<input type="hidden" name="product_id" value="1" id="product_id">
<a href="#" class="whiteButton submit" id="ask-more-submit-button">Ask Question</a>
</form>

And the JQuery to catch the form looks like this:

$('#ask-more').on('submit', '.ask-more-form', function() {
        var product_id = $(this).children('input[name=product_id]').val();
        var product_question = $(this).children('textarea[name="product_question"]').text();

alert(product_question);
//submitQuestion(product_id, product_question);

                });

The product_id is always read but the product question is is always null. Can anyone tell me why this is happening?

pete · Accepted Answer · 2012-03-03 17:29:15Z

17

.children only goes one level down. Use .find instead:

$('#ask-more').on('submit', '.ask-more-form', function () {
    var product_id = $(this).children('input[name=product_id]').val();
    var product_question = $(this).find('textarea[name="product_question"]').text();
    alert(product_question);
    //submitQuestion(product_id, product_question);
});

answered Mar 3, 2012 at 17:29

pete

25.2k4 gold badges40 silver badges52 bronze badges

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

2 Comments

Devin Dixon Over a year ago

Is a combination of using val() and find

pete Over a year ago

Personally, I would use .val(), but .text() will work for a textarea. See jsfiddle.net/kfD7b for a demo.

JaredPar · Accepted Answer · 2012-03-03 17:27:07Z

4

You're using text() on a <textarea> when you should be using val()

var product_question = $(this).children('textarea[name="product_question"]').val();

This is true for other input element types like <select> and <input>

answered Mar 3, 2012 at 17:27

JaredPar

759k152 gold badges1.3k silver badges1.5k bronze badges

1 Comment

user684934 Over a year ago

Should be noted that all elements designed for input, such as input, textarea, and select should be accessed using val(). This is one of the things that makes jQuery awesome.

Kunal Vashist · Accepted Answer · 2012-03-03 17:35:46Z

0

Use .val() instead of .text(). It will do the trick

answered Mar 3, 2012 at 17:35

Kunal Vashist

2,4816 gold badges33 silver badges64 bronze badges

1 Comment

sinemetu1 Over a year ago

Maybe explain the difference between .val() and .text() like here.

Brombomb · Accepted Answer · 2012-03-03 17:42:42Z

0

You don't need to use children or find. Since you already have the id of the form you can use that for your base and just use a standard jquery selector like so:

var product_question = $('textarea[name="product_question"]', this).val();

by adding a seocnd argument you are telling jquery to use only this as the DOM tree.

answered Mar 3, 2012 at 17:42

Brombomb

7,0864 gold badges40 silver badges57 bronze badges

Collectives™ on Stack Overflow

Getting TextArea Using JQuery

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related