accessing a form input value -- can anyone explain this?

Discussion in 'Javascript' started by Pete, Oct 22, 2007.

  1. Pete

    Pete Guest

    I've been creating a page that when an anchor (from a list of names)
    is clicked on, it sets that name in a form to be sent as a search to
    Google when a form button is clicked. [I'm testing with Firefox 2.0.0.5.
    Don't have access on my non-windows box to IE etc...]

    Initially, I tried this scheme (abbreviated here, but I've checked the
    behaviour with this too):

    The <body> has a form element like this:
    <form class="googler" name="googlesearch" id="GOOGFORM"
    action="junk.html/search" target="google">
    <input type=hidden name=btnG value="Google Search">
    <input type="hidden" id="GOOGLE" name=q title="Google Search" value="test string">
    <input type="submit" value="Google">
    </form>

    (I'm using a local file rather than google.com so I just see the sent
    request)

    Then in the <script>:

    function setGoogle(elem) {
    var qbtn = document.getElementById("GOOGLE")
    var form = document.getElementById("GOOGFORM")
    qbtn.value = <<string extracted from elem>>;
    ...
    }

    This would work as expected the *first* time setGoogle was called,
    but the *second* time, the value in the form that was actually sent
    was still the *first* value! Then I'd do it again, and it would
    work properly; then the third time it would fail, and so on...
    Various other odd things showed up, like the 'GOOGLE'-id element
    apparently not having an associated form, or vice versa.

    Then I read the faq and found a recommended method, like this:

    function setGoogle(elem) {
    var form = document.forms["googlesearch"];
    var qbtn = form.elements["q"];
    qbtn.value = <<string extracted from elem>>;
    }

    This works as it should, so I'm finally where I want to be, but
    *why* should the first idea *not* work? I thought the point of ids
    were that they would find the unique element with that id. There's
    nothing dynamically created here (and I made sure it was unique!)
    so things are definitely not as *I* expected!

    Hellppp....
    -- Pete --

    --
    ============================================================================
    The address in the header is a Spam Bucket -- don't bother replying to it...
    (If you do need to email, replace the account name with my true name.)
     
    Pete, Oct 22, 2007
    #1
    1. Advertising

  2. Pete

    vimal Guest

    On Oct 22, 8:52 am, (Pete) wrote:
    > I've been creating a page that when an anchor (from a list of names)
    > is clicked on, it sets that name in a form to be sent as a search to
    > Google when a form button is clicked. [I'm testing with Firefox 2.0.0.5.
    > Don't have access on my non-windows box to IE etc...]
    >
    > Initially, I tried this scheme (abbreviated here, but I've checked the
    > behaviour with this too):
    >
    > The <body> has a form element like this:
    > <form class="googler" name="googlesearch" id="GOOGFORM"
    > action="junk.html/search" target="google">
    > <input type=hidden name=btnG value="Google Search">
    > <input type="hidden" id="GOOGLE" name=q title="Google Search" value="test string">
    > <input type="submit" value="Google">
    > </form>
    >
    > (I'm using a local file rather than google.com so I just see the sent
    > request)
    >
    > Then in the <script>:
    >
    > function setGoogle(elem) {
    > var qbtn = document.getElementById("GOOGLE")
    > var form = document.getElementById("GOOGFORM")
    > qbtn.value = <<string extracted from elem>>;
    > ...
    > }
    >
    > This would work as expected the *first* time setGoogle was called,
    > but the *second* time, the value in the form that was actually sent
    > was still the *first* value! Then I'd do it again, and it would
    > work properly; then the third time it would fail, and so on...
    > Various other odd things showed up, like the 'GOOGLE'-id element
    > apparently not having an associated form, or vice versa.
    >
    > Then I read the faq and found a recommended method, like this:
    >
    > function setGoogle(elem) {
    > var form = document.forms["googlesearch"];
    > var qbtn = form.elements["q"];
    > qbtn.value = <<string extracted from elem>>;
    > }
    >
    > This works as it should, so I'm finally where I want to be, but
    > *why* should the first idea *not* work? I thought the point of ids
    > were that they would find the unique element with that id. There's
    > nothing dynamically created here (and I made sure it was unique!)
    > so things are definitely not as *I* expected!
    >
    > Hellppp....
    > -- Pete --
    >
    > --
    > ============================================================================
    > The address in the header is a Spam Bucket -- don't bother replying to it...
    > (If you do need to email, replace the account name with my true name.)



    for this u have to refer the "Document object model hierarchy"

    "forms" comes directly under "document" obj. (i.e,) forms r the member
    of document

    and if u want to access the form elements that shud b done with the
    help of the form.
     
    vimal, Oct 22, 2007
    #2
    1. Advertising

  3. Pete

    vimal Guest

    On Oct 22, 2:49 pm, vimal <> wrote:
    > On Oct 22, 8:52 am, (Pete) wrote:
    >
    >
    >
    > > I've been creating a page that when an anchor (from a list of names)
    > > is clicked on, it sets that name in a form to be sent as a search to
    > > Google when a form button is clicked. [I'm testing with Firefox 2.0.0.5.
    > > Don't have access on my non-windows box to IE etc...]

    >
    > > Initially, I tried this scheme (abbreviated here, but I've checked the
    > > behaviour with this too):

    >
    > > The <body> has a form element like this:
    > > <form class="googler" name="googlesearch" id="GOOGFORM"
    > > action="junk.html/search" target="google">
    > > <input type=hidden name=btnG value="Google Search">
    > > <input type="hidden" id="GOOGLE" name=q title="Google Search" value="test string">
    > > <input type="submit" value="Google">
    > > </form>

    >
    > > (I'm using a local file rather than google.com so I just see the sent
    > > request)

    >
    > > Then in the <script>:

    >
    > > function setGoogle(elem) {
    > > var qbtn = document.getElementById("GOOGLE")
    > > var form = document.getElementById("GOOGFORM")
    > > qbtn.value = <<string extracted from elem>>;
    > > ...
    > > }

    >
    > > This would work as expected the *first* time setGoogle was called,
    > > but the *second* time, the value in the form that was actually sent
    > > was still the *first* value! Then I'd do it again, and it would
    > > work properly; then the third time it would fail, and so on...
    > > Various other odd things showed up, like the 'GOOGLE'-id element
    > > apparently not having an associated form, or vice versa.

    >
    > > Then I read the faq and found a recommended method, like this:

    >
    > > function setGoogle(elem) {
    > > var form = document.forms["googlesearch"];
    > > var qbtn = form.elements["q"];
    > > qbtn.value = <<string extracted from elem>>;
    > > }

    >
    > > This works as it should, so I'm finally where I want to be, but
    > > *why* should the first idea *not* work? I thought the point of ids
    > > were that they would find the unique element with that id. There's
    > > nothing dynamically created here (and I made sure it was unique!)
    > > so things are definitely not as *I* expected!

    >
    > > Hellppp....
    > > -- Pete --

    >
    > > --
    > > ============================================================================
    > > The address in the header is a Spam Bucket -- don't bother replying to it...
    > > (If you do need to email, replace the account name with my true name.)

    >
    > for this u have to refer the "Document object model hierarchy"
    >
    > "forms" comes directly under "document" obj. (i.e,) forms r the member
    > of document
    >
    > and if u want to access the form elements that shud b done with the
    > help of the form.


    refer this page in case u had doubts:

    http://www.sislands.com/coin70/week1/dom.htm

    vimal
    Binary karma enterprise
     
    vimal, Oct 22, 2007
    #3
  4. Pete

    Pete Guest

    In article <>,
    vimal <> wrote:
    >On Oct 22, 8:52 am, (Pete) wrote:
    >> [severely trimmed...]
    >>
    >> function setGoogle(elem) {
    >> var qbtn = document.getElementById("GOOGLE")
    >> var form = document.getElementById("GOOGFORM")
    >> qbtn.value = <<string extracted from elem>>;
    >> ...
    >> }
    >>
    >> This would work as expected the *first* time setGoogle was called,
    >> but the *second* time, the value in the form that was actually sent
    >> was still the *first* value! Then I'd do it again, and it would
    >> work properly; then the third time it would fail, and so on...
    >> Various other odd things showed up, like the 'GOOGLE'-id element
    >> apparently not having an associated form, or vice versa.
    >>
    >> Then I read the faq and found a recommended method, like this:
    >>
    >> function setGoogle(elem) {
    >> var form = document.forms["googlesearch"];
    >> var qbtn = form.elements["q"];
    >> qbtn.value = <<string extracted from elem>>;
    >> }
    >>
    >> This works as it should, so I'm finally where I want to be, but
    >> *why* should the first idea *not* work?

    >
    >
    >for this u have to refer the "Document object model hierarchy"
    >
    >"forms" comes directly under "document" obj. (i.e,) forms r the member
    >of document
    >
    >and if u want to access the form elements that shud b done with the
    >help of the form.
    >


    Sorry, but this doesn't answer my question. I understand the DOM
    [I think...:)-)], but as I understand it, using an id attribute and
    getElementById is supposed to be a convenient alternative. In fact,
    in the same page I am accessing a <div> -- that I use as a "highlighter"
    to display over different parts of the page, and using an id for that.
    Works fine.

    Any further illumination?
    -- Pete --



    --
    ============================================================================
    The address in the header is a Spam Bucket -- don't bother replying to it...
    (If you do need to email, replace the account name with my true name.)
     
    Pete, Oct 22, 2007
    #4
  5. Pete

    pr Guest

    pr, Oct 23, 2007
    #5
  6. Pete

    Henry Guest

    On Oct 22, 8:20 pm, (Pete) wrote:
    > vimal wrote:
    >> (Pete) wrote:

    <snip>
    >>> *why* should the first idea *not* work?

    >
    >> for this u have to refer the "Document object model hierarchy"

    >
    >> "forms" comes directly under "document" obj. (i.e,) forms r
    >> the member of document

    >
    >> and if u want to access the form elements that shud b
    >> done with the help of the form.

    >
    > Sorry, but this doesn't answer my question.


    No it doesn't, and it is so confused an 'explanation' that it is
    approaching being nonsense.

    > I understand the DOM [I think...:)-)], but as I understand it,
    > using an id attribute and getElementById is supposed to be a
    > convenient alternative.


    In don't know about convenient alternative, given that the
    specification refers to the - forms - collection as a 'convenience'
    property, while getElementById is core DOM.

    > In fact, in the same page I am accessing a <div> -- that I use as
    > a "highlighter" to display over different parts of the page, and
    > using an id for that. Works fine.
    >
    > Any further illumination?


    Putting the code you posted in the form:-

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title></title>
    <script>
    function setGoogle(elem) {
    var qbtn = document.getElementById("GOOGLE")
    var form = document.getElementById("GOOGFORM")
    qbtn.value = "string extracted from elem";
    }
    </script>
    </head>
    <body>
    <form class="googler" name="googlesearch" id="GOOGFORM"
    action="junk.html/search" target="google">
    <input type=hidden name=btnG value="Google Search">
    <input type="hidden" id="GOOGLE" name=q title="Google Search"
    value="test string">
    <input type="submit" value="Google">

    <input type="button" value="test" onclick="setGoogle();">

    </form>
    </body>
    </html>

    - it works fine. So there is/was something else going on in your code
    that does not feature in the code you posted. as a result you question
    cannot be answered (and anyone who did answer it wants to take a
    closer look at their analytical skills). It is always best when asking
    this type of question to post a functional text-case that demonstrates
    the issue. That way you are guaranteed that the (or an) issue is
    present and avoid wasting anyone's time.
     
    Henry, Oct 23, 2007
    #6
  7. pr wrote:
    > Pete wrote:
    >> [...]
    >> var form = document.getElementById("GOOGFORM")
    >> [...]
    >> var form = document.forms["googlesearch"];
    >> [...]
    >> *why* should the first idea *not* work?
    >> [...]

    >
    > You have encountered the difference between a DOM Node
    >
    > http://www.w3.org/TR/DOM-Level-2-Core
    >
    > and an HTMLFormElement
    >
    > http://www.w3.org/TR/DOM-Level-2-HTML


    No, he has not. The HTMLFormElement interface inherits from the Node
    interface through the HTMLElement and Element interfaces of course.
    And if you had cared to read what you pointed to, you would have known.

    document.getElementById() in Firefox 2.0.0.x returns a reference to an
    object that implements the HTMLFormElement interface as well as
    document.forms["..."] does, and those two objects are identical. And
    if you cared to test, you would have known that, too.


    PointedEars
    --
    Anyone who slaps a 'this page is best viewed with Browser X' label on
    a Web page appears to be yearning for the bad old days, before the Web,
    when you had very little chance of reading a document written on another
    computer, another word processor, or another network. -- Tim Berners-Lee
     
    Thomas 'PointedEars' Lahn, Oct 23, 2007
    #7
    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. renata
    Replies:
    1
    Views:
    812
    Kevin Spencer
    Jun 25, 2003
  2. Michael Tsai
    Replies:
    3
    Views:
    480
    Michael Tsai
    Aug 19, 2005
  3. Wookie
    Replies:
    2
    Views:
    342
    Mr Newbie
    Nov 13, 2005
  4. Sir Bill
    Replies:
    5
    Views:
    524
    Scott Allen
    Jan 12, 2006
  5. Harry

    Can anyone explain this...

    Harry, Feb 10, 2004, in forum: Java
    Replies:
    0
    Views:
    381
    Harry
    Feb 10, 2004
Loading...

Share This Page