A web developer's blog. PHP, MySQL, CakePHP, Zend Framework, Wordpress, Code Igniter, Django, Python, CSS, Javascript, jQuery, Knockout.js, and other web development topics.

jQuery: Getting the latest text/value inside a textarea

Now, I was not expecting this. You can get the text inside the textarea using something like:

alert($('#id_of_textarea').text());

That works, but if you bind it with an event, let’s say onkeyup — you will never get the “latest” text inside the textarea. This was a complete surprise to me. The best way to do it would be to use the attr(‘value’)

$('#id_of_textarea').attr('value'); //to get and...
$('#id_of_textarea').attr('value','updated value of textarea'); //to set it...

Here is a short example:

<textarea id="editor_desc" onkeyup="update_textarea(this)"></textarea>
 
function update_textarea(obj)
{
    $('#mydiv').text($(obj).attr('value')); //whatever you type in the textarea would be reflected in #mydiv
}
This entry was posted in General and tagged , , . Bookmark the permalink.

9 Responses to jQuery: Getting the latest text/value inside a textarea

  1. Wenbert says:

    I’m thinking I should be able to get the value using .val()

    but I haven’t tested it yet…

  2. Franz Rinkleff says:

    Thanks, This posting fixed an issue for me in FireFox. $(‘#id_of_textarea’).text() appeared to work fine in IE.

  3. Wenbert says:

    @Franz Rinkleff you’re welcome :) I’m glad that you found this post helpful.

  4. Andy Staudacher says:

    Observing the same issue with FF 3. text(), val() and html() don’t return the current value of the textarea, but a previous value.

    E.g. if I first set the value via jQuery’s .text(‘foo’), then manually change the value (entering some text in the browser into that text field), and finally get the value via .text(), it returns ‘foo’ and not the current value of the textarea.

    Did you file a bug about this?

  5. Wenbert says:

    @Andy Staudacher, nope I did not file a bug about that. But you can file a bug at: http://dev.jquery.com/

  6. reddy says:

    Had the same problem. Didn’t know what to do, so Thnx a lot.

  7. I ran into the same problem (which is how I found this page).

    However, it turns out that it is NOT a jQuery problem, but rather a general JavaScript “feature”. See http://www.webmasterworld.com/javascript/3660758.htm – Quote from that page:

    The reason it is doing this is because the DOM is not updated when the user changes the inputs/textareas value

  8. zerolimit says:

    Thanks..

  9. Pingback: Getting HTML table data (td) (i.e. text or val) using table header (th) into Textarea | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes

Leave a Reply to Stephen Cronin Cancel reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>