CODEWITHSUNDEEP
javascripttextarea
RedFury
RedFury

Reputation: 465

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

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?

Upvotes: 32

Views: 27220

Answers (6)

Sarfaraz
Sarfaraz

Reputation: 25

.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 .

Upvotes: 1

MountainMan
MountainMan

Reputation: 785

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.

Upvotes: 1

Skamielina
Skamielina

Reputation: 802

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

Upvotes: 33

Dornail
Dornail

Reputation: 21

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.

Upvotes: 2

RedFury
RedFury

Reputation: 465

.value and .innerHTML seemed to fix the problem

Upvotes: 12

David Yell
David Yell

Reputation: 11855

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

Upvotes: 1

Related Questions