i'm able to read the value of a TEXTAREA in IE but not in FireFox

[Jake Barnes]

I wanted to teach myself AJAX this weekend so I sat down with Stuart
Landgridge's book and I started to play around. I came up with a little
page that you can add text and images to. You can see it here:

http://www.publicdomainsoftware.org/ajaxExperiment.htm

Click in any box to get the controls with which you can play around.

This function below, askForInput, was working the way I wanted, till I
tried to give it two parameters, one of which was meant to be example
text that would auto-fill the TEXTAREA and give it an intitial value.
While things still work find in IE, now this works incorrectly in
FireFox. In FireFox, whatever value is set initially in this function
becomes the only function that can later be retrieved. Obviously, that
is not what I want. If the software asks people to write in some text,
it should be what they write, and not the initial value, that is then
captured and used. What syntax do I have to use to set the initial
value to FireFox will still see the value that the user types in,
rather than the initial value set here?


function askForInput(introText, exampleText) {
var divRef = getRefToInputDiv();
var communicationBoxRef =
document.getElementById("communicationBox");
communicationBoxRef.style.display = "block";
communicationBoxRef.appendChild(divRef);
divRef.style.display = "block";

var area = document.getElementsByTagName('TEXTAREA')[0];
area.value = exampleText;
var divRef = document.getElementById("inputBox");
if (divRef.innerHTML == "" || divRef.innerHTML == undefined) {
divRef.innerHTML = exampleText;
}

var divRef = document.getElementById("inputDiv");
var firstChildNode = divRef.firstChild;
if (divRef.childNodes.length > 4) {
divRef.removeChild(firstChildNode);
firstChildNode = divRef.firstChild;
}
var newTextNode = document.createTextNode(introText);
var newLiterature = document.createElement("p");
newLiterature.appendChild(newTextNode);
var firstChildNode = divRef.firstChild;
divRef.insertBefore(newLiterature, firstChildNode);
}





function getInput() {
var divRef = document.getElementById("inputBox");
var inputText = divRef.innerHTML;
divRef.innerHTML = "";
if (inputText == "" || inputText == undefined) {
var area = document.getElementsByTagName('TEXTAREA')[0];
inputText = area.value;
area.value = "";
}
inputResults = inputText;

var communicationBoxRef =
document.getElementById("communicationBox");
var lastChildInCommunicationBox = communicationBoxRef.lastChild;
communicationBoxRef.removeChild(lastChildInCommunicationBox);
communicationBoxRef.style.display = "none";

if (nextActionToTakeAfterInput == "setTextAction")
setTextAction();
if (nextActionToTakeAfterInput == "setImageAction")
setImageAction();
if (nextActionToTakeAfterInput == "setHtmlAction")
setHtmlAction();
if (nextActionToTakeAfterInput == "setBackgroundColorAction")
setBackgroundColorAction();
if (nextActionToTakeAfterInput == "setColorAction")
setColorAction();
}

 

[RobG]

I wanted to teach myself AJAX this weekend so I sat down with Stuart
Landgridge's book and I started to play around. I came up with a little
page that you can add text and images to. You can see it here:

http://www.publicdomainsoftware.org/ajaxExperiment.htm

Click in any box to get the controls with which you can play around.

This function below, askForInput, was working the way I wanted, till I
tried to give it two parameters, one of which was meant to be example
text that would auto-fill the TEXTAREA and give it an intitial value.
While things still work find in IE, now this works incorrectly in
FireFox.

Because of your use of the proprietary innerHTML where you should have
been using standards.


In FireFox, whatever value is set initially in this function

becomes the only function that can later be retrieved. Obviously, that
is not what I want. If the software asks people to write in some text,
it should be what they write, and not the initial value, that is then
captured and used. What syntax do I have to use to set the initial
value to FireFox will still see the value that the user types in,
rather than the initial value set here?

Get the value of the text area, not the innerHTML.

[...]

function getInput() {
var divRef = document.getElementById("inputBox");

divRef is actually a reference to a textarea element, the name is
misleading. The ID "inputBox" is also misleading, give your variables
better names (I guess this is a work in progress and you likely just
started with names that seemed like a good idea at the time, but now the
names are not appropriate so fix 'em).

var inputText = divRef.innerHTML;

innerHTML has no public specification and is implemented differently in
different browsers. Here you have found one of those differences - in
IE, the innerHTML of the textarea is updated to reflect user input, in
Firefox it isn't, it keeps the default value.

You shouldn't use innerHTML here anyway: the value of the input is in
its value property:

var inputText = divRef.value;

divRef.innerHTML = "";

divRef.value = "";


[...]

 

[Jake Barnes]

Because of your use of the proprietary innerHTML where you should have
been using standards.

Actually, I was trying to use a variety of methods to get the value,
but now I realize that the way I was testing was flawed:

var divRef = document.getElementById("inputBox");
var inputText = divRef.innerHTML;
divRef.innerHTML = "";
if (inputText == "" || inputText == undefined) {
var area = document.getElementsByTagName('TEXTAREA')[0];
inputText = area.value;
area.value = "";
}
inputResults = inputText;


I suppose I should put the more standard approach first, and if its
empty, I can assume that perhaps I'm dealing with IE, at which I can
look in innerHTML.

 

[RobG]

Actually, I was trying to use a variety of methods to get the value,
but now I realize that the way I was testing was flawed:

Just use the value property, never use innerHTML to get the value of a
textarea element (or input element). You are using getElementById
without any testing, what browser supports that but not the value property?

[...]

I suppose I should put the more standard approach first, and if its
empty, I can assume that perhaps I'm dealing with IE, at which I can
look in innerHTML.

No, don't. IE introduced support the value property with IE 3 and
innerHTML with IE 4, so that is futile. Any browser that supports AJAX
will support the textarea value property (and nearly all other HTML 4
attributes).

innerHTML should only be used sparingly and for non-essential purposes,
e.g. to write some simple text or HTML that replaces the content of an
element.

 

[Jake Barnes]

Just use the value property, never use innerHTML to get the value of a
textarea element (or input element). You are using getElementById
without any testing, what browser supports that but not the value property?

Oh, that's good to know. I figured I'd go back and add in testing for
getElementById eventually, but its good to know that any browser with
getElementById support also supports values in the area of textarea.

No, don't. IE introduced support the value property with IE 3 and
innerHTML with IE 4, so that is futile. Any browser that supports AJAX
will support the textarea value property (and nearly all other HTML 4
attributes).

Wow. I had no idea. That's good to know.

innerHTML should only be used sparingly and for non-essential purposes,
e.g. to write some simple text or HTML that replaces the content of an
element.

So there is a valid use for innerHTML?