Update textarea with jquery

Question

Trying to get current data from textarea with jquery and replace it with what server returns. so far q value is picked up right, instead of updating it with server returned content, it just replaces it with ' '

q = $('textarea#id_message').val();
alert(q)
$("textarea#id_message").val(' ').load( '/process/url?html=' + q );

Update

I just tried it passing server data to test results <div>, this does work, <textarea> does not.

$( '#results' ).html( ' ' ).load( '/process/url?html=' + q );

Answer 1

I am guessing the load command is failing because you are passing the value of the textarea to as a GET parameter without any sanitation.

using escape(q) might help, but we'd need to know what happens server side to tell for sure.

Answer 2

I wonder if the val() is causing problems. Does it work if you remove the .val(' ') altogether?

Answer 3

Shouldn't you just use text or html function instead of val for textarea? AFAIR textarea doesn't have val attribute. It's just <textarea>Text inside textarea</textarea>

Answer 4

This is because when you use .load() on an element, you're calling .html() on the same element later to put the response in there (jQuery core source code here), but that doesn't work on inputs, you need .val(). To do this, you can use $.get() with a callback, like this:

var val = $('#id_message').val();
$.get('/process/url?html=' + val, function(data) {
  $('#id_message').val(data);
});

You could also sanitize the input if the server accepts POST by passing the params as an object like this:

$.get('/process/url', {html: $('#id_message').val()}, function(data) {
  $('#id_message').val(data);
});