Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > i'm able to read the value of a TEXTAREA in IE but not in FireFox

Reply
Thread Tools

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

 
 
Jake Barnes
Guest
Posts: n/a
 
      02-05-2006

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(lastChildInCommuni cationBox);
communicationBoxRef.style.display = "none";

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

 
Reply With Quote
 
 
 
 
RobG
Guest
Posts: n/a
 
      02-06-2006
Jake Barnes wrote:
> 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 = "";


[...]


--
Rob
 
Reply With Quote
 
 
 
 
Jake Barnes
Guest
Posts: n/a
 
      02-06-2006

RobG wrote:
> Jake Barnes wrote:
> > 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.


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.

 
Reply With Quote
 
RobG
Guest
Posts: n/a
 
      02-06-2006
Jake Barnes wrote:
> RobG wrote:
>
>>Jake Barnes wrote:
>>
>>>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.

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


--
Rob
 
Reply With Quote
 
Jake Barnes
Guest
Posts: n/a
 
      02-06-2006

RobG wrote:
> Jake Barnes wrote:
> > RobG wrote:
> >
> >>Jake Barnes wrote:
> >>
> >>>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.

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


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.





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


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?

 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Not able to display color in excel not able to display color in excel using xml sed_y XML 0 02-15-2012 09:46 PM
Able to hide <div> with javascript in Firefox but not IE? cargo303 Javascript 6 05-22-2006 07:22 PM
Connect to 802.11b but not 802.11g... but used to be able to...? jbraly@gmail.com Wireless Networking 1 03-13-2006 11:05 PM
Textarea Inside of a textarea wperry1@gmail.com ASP General 6 02-05-2006 08:00 AM
Removing carriage returns from <textarea></textarea> input Augustus ASP General 1 09-10-2003 04:55 AM



Advertisments