Cant update textarea with javascript after writing to it manualy

Question

Hello.

So here's the thing...
I'm writing an online application where I save some texts to the database.
There are like 5 "textarea"-s and 5 "input type=text"-s.
I'm also implementing a search to easily find and edit the DB entries. A new select window is displayed(using prototype and ajax), and when clicking on any of its entries the below form gets populated (it's the same form that was used to add new results). Now here's where the problem arises....
If i add a new form or edit any existing one ALL TEXTAREA fields that were modified, get locked or something like it (only textareas, the inputs still work) ... They won't obey Javascripts .update anymore, so they don't change when i select the next entry .... OR AT LEAST THEY WONT IN FireFox (3.5.something). It works fine in IE, but since i'm a FF user and i wan't it work there as well i'm wondering if someone has come across any similar problems and solved it with ease.
The problem seem to go away when i call form.reset(), but that messes up some code generated select/option fields, besides i wan't the data to remain ...

To me it looks like FF decided that the text I entered is more important than text javascript is trying to enter, so it overrides it... and i can't figure out why. At this point I'm blaming .update(), but i'm not sure how to do it otherwise.
The INPUT fields seem to have problems with .update (or it just didn't work for me), so i had to rewrite them to .value= (have tried .value with textareas as well, hoping that would fix anything, sadly with no avail).

So, has anyone any clues why this is happening and how to fix it, without having to reset the form on every step?

Answer 1

I have this exact problem. So far I have tried

$('#addofferlink').click(function(){
 var offer = "#OFFER_"+$('#offer_id').val()+"#";
 $('#message').append(offer);
});

I have also tried,

    $('#addofferlink').click(function(){
 var e = $('#message').html();
 var offer = "#OFFER_"+$('#offer_id').val()+"#";
 $('#message').html(e+offer);
});

The problem seems to be that if the user types into the textarea (#message) then clicks the button to add the offer link, nothing is displayed. Looking at the source, using Firebug, I can see that the actual text contained in the textarea is being amended, but not displayed on the screen.

It seems that the javascript is changing the html contents of the tag, but the browser is storing the currently typed contents in memory (i assume) or elsewhere.

Updating the textarea using val(e+offer) will remove the entered text and replace it with the offerlink, and using innerHTML = e+offer doesn't work at all, showing no change in the textarea.

---

I've managed to sort this!

My thinking revolved around the fact that because tag contains the text, and has it's own closing tag, that I would have to get it's contents using .html().

By using .val() to get the contents of the field you can then pull and update the contents simply. I ended up with the following,

    $('#addofferlink').click(function(){
 var e = $('#message').val();
 var offer = "#OFFER_"+$('#offer_id').val()+"#";
 $('#message').val(e+offer);
});

Answer 2

.value and .innerHTML seemed to fix the problem