Can't update textarea with javascript after writing to it manually

Question

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?

Mutazilite

Can you supply some code for us to look at? – Gula

not necessary anymore, the problem was with .update()... i tried the innerHTML and it worked well, just for kicks i tried .value again and it worked all of a sudden ... i have no idea what happened yesterday (when i spent the whole afternoon on this), that it didn't want to work like it (i may have used .text instead of .value, or there was some error in PHPs iduno) Anyways sorry to have bothered you all for nothing – Mutazilite

I think you should post an answer to your own question (just saying the above) and then check it, so this question can be removed from the unanswered questions queue – Varrian

Answer 1

.value and .innerHTML seemed to fix the problem

Mutazilite

Because of some reason, that I don't konw you need to set the value of textarea as your acctual value. So it is diffrent to the HTML. If you want to give the textarea a value in html you need to put your value between the textarea tags. In JS you need to set the value. So follow this: HTML: <textarea>Your value</textarea> JS: document.getElementsByTagName("textarea")[0].value = "your value" – Evanthe

Answer 2

I had this same problem. When HTML is parsing to DOM object, content of textarea is innetHTML of <textarea>

<textarea cols="10" rows="10">Content of textarea</textarea>

Values document.getElementByTagName('textarea').innerHTML and document.getElementByTagName('textarea').value returns this same value Content of textarea

But after loading DOM object, changing innerHTML value doesn't change content of textarea box. A solution to change it is modifying value field.

document.getElementByTagName('textarea').value="New content of textarea";

or in jquery

$("textarea").val("New content of textarea");

Aspire

Answer 3

I fixed this odd problem simply by:

document.forms[0].text_area_name.value = "STUFF";

Even after modifying the textarea the script will overwrite.

innerHTML didn't work for me after modifying the textarea.

Holusbolus

Answer 4

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);
});

Basilio

Answer 5

.innerHTML : refers to the content written between the tags. Here, the text is being written in the text area, which changes the value associated with not the .innerHTML, so .value can be used to get updated content of .

Inotropic

Answer 6

Sometimes you may wish to display in a textarea, a particular string and let the user see what it is, then possibly make changes to it; but, you wish to enable them to see what the original text was. Textareas are pretty unwieldy, but even a manual change in the edited text is reversable using this setup.

<button id="ShowNOWxItmDscptn" onClick="EditItmDesc(1)">What is it now?</button>
<button id="OpnTAxWriteNewEdit" onClick="EditItmDesc(2)">Write / Edit</button>
<textarea id="RUBYxDescribe" max="500" width="75" placeholder="Magic"> </textarea>

// a global variable:
// UVarDescriptionTxt = ("This is the first line.\r\nSecond line!");

function EditItmDesc(x){
    console.log("*x* = "+x+".");
    console.log("Text to reset : "+UVarDescriptionTxt+".");

    var InnyShow = document.getElementById("RUBYxDescribe");
    InnyShow.value = UVarDescriptionTxt;

    if(x == 1) {
        InnyShow.innerHTML = "";
        InnyShow.textContent = "";
        InnyShow.innerHTML = UVarDescriptionTxt;
    }

    if(x == 2){
        InnyShow.value = "";
    }
}

The above structure solved that problem for me.

Cineraria