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

Discussion in 'Javascript' started by Jake Barnes, Feb 5, 2006.

  1. Jake Barnes

    Jake Barnes Guest

    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();
    }
     
    Jake Barnes, Feb 5, 2006
    #1
    1. Advertising

  2. Jake Barnes

    RobG Guest

    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
     
    RobG, Feb 6, 2006
    #2
    1. Advertising

  3. Jake Barnes

    Jake Barnes Guest

    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.
     
    Jake Barnes, Feb 6, 2006
    #3
  4. Jake Barnes

    RobG Guest

    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
     
    RobG, Feb 6, 2006
    #4
  5. Jake Barnes

    Jake Barnes Guest

    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?
     
    Jake Barnes, Feb 6, 2006
    #5
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Augustus
    Replies:
    1
    Views:
    398
    Ken Schaefer
    Sep 10, 2003
  2. Textarea Inside of a textarea

    , Feb 4, 2006, in forum: ASP General
    Replies:
    6
    Views:
    363
    Anthony Jones
    Feb 5, 2006
  3. sed_y
    Replies:
    0
    Views:
    1,062
    sed_y
    Feb 15, 2012
  4. cargo303
    Replies:
    6
    Views:
    91
    Randy Webb
    May 22, 2006
  5. Replies:
    1
    Views:
    357
    Bart Van der Donck
    Jul 4, 2007
Loading...

Share This Page