CODEWITHSUNDEEP
jquery
MadTurki
MadTurki

Reputation: 343

JQuery textarea value is empty

This type of question tends to immediately get a negative vote. If you have the answer, please help! Thanks.

I have a script that adds a textarea to the dom. When I enter data and later try to retrieve it the value returns empty.

This successfully sets the value of the textarea:

$("textarea").each(function(){
    $(this).val("ASDFASDF");
});

This successfully sets the css background property of the textarea:

$("textarea").each(function(){
    $(this).css({"border":"2px solid red"});
});

But this does not return the value:

$("textarea").each(function(){
    alert($(this).val());
});

I've tried .text(), .html(), .value - they all return nothing! It doesn't alert "undefined" or null but simply an empty value.

I can't figure out why.

Thanks in advance for the suggestions.

MORE INFO

HTML is:

<textarea id="Bio" rows="4"></textarea>

JQuery Library: http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js

Function is triggered by a button after the dom is loaded.

A simplified version of the code is here: http://social-gamer.com/textarea.html

Upvotes: 2

Views: 26331

Answers (3)

VMRodriguez
VMRodriguez

Reputation: 52

how are you,

Listen, the TextArea is the only one of the inputs that don't get and set the value with val(), because when you put the value on textarea, you put inside of the tag.

There's an example

<textarea>Inside is the content so to 
get the content inside of tags you use HTML or TEXT</textarea>

So, when you try to get the data you must to do this:

$('textarea').text();

And for set the data of a textarea this:

$('textarea').text("HERE'S THE CONTENT.");

Here is a fiddle for you can see all i'm saying

http://jsfiddle.net/nfTVJ/

Good luck, and good bye

Upvotes: 0

MadTurki
MadTurki

Reputation: 343

The problem ended up being a duplicate ID. Normally I would check this first BUT I wasn't even accessing the element by its ID but simply by the input type "textarea".

So, even when targeting an element by class or simply by it's position in the DOM, if it has a duplicate ID it will fail. I didn't really give this much thought earlier because I wasn't getting by ID!

Upvotes: 3

Ruan Mendes
Ruan Mendes

Reputation: 92274

It does work, something else is the problem. You can see it working here

<textarea>Hello One</textarea>
<textarea>Hello One two</textarea>
<textarea>Hello One two three</textarea>

$("textarea").each(function(){
    alert($(this).val());
});
  • What version of jQuery are you using?
  • Is your code running before the DOM is loaded?
  • What does your HTML look like? Are you assigning a value attribute to the textarea? That does not work, see http://jsfiddle.net/2bjLJ/1/

Other Notes

No need for each when you want to call a method on all the underlying objects.

$("textarea").each(function(){
    $(this).val("ASDFASDF");
});

$("textarea").each(function(){
    $(this).css({"border":"2px solid red"});
});

It can just be 

$("textarea").val("ASDFASDF");
$("textarea").css({"border":"2px solid red"});

However, when reading it, you do have to call each, otherwise you'll get the value from the first object in the jQuery collection

Working Example

Upvotes: 4

Related Questions