Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > accessing a form input value -- can anyone explain this?

Reply
Thread Tools

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

 
 
Pete
Guest
Posts: n/a
 
      10-22-2007
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.)
 
Reply With Quote
 
 
 
 
vimal
Guest
Posts: n/a
 
      10-22-2007
On Oct 22, 8:52 am, (E-Mail Removed) (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.

 
Reply With Quote
 
 
 
 
vimal
Guest
Posts: n/a
 
      10-22-2007
On Oct 22, 2:49 pm, vimal <(E-Mail Removed)> wrote:
> On Oct 22, 8:52 am, (E-Mail Removed) (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

 
Reply With Quote
 
Pete
Guest
Posts: n/a
 
      10-22-2007
In article <(E-Mail Removed). com>,
vimal <(E-Mail Removed)> wrote:
>On Oct 22, 8:52 am, (E-Mail Removed) (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.)
 
Reply With Quote
 
pr
Guest
Posts: n/a
 
      10-23-2007
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

See also

http://www.jibbering.com/faq/
 
Reply With Quote
 
Henry
Guest
Posts: n/a
 
      10-23-2007
On Oct 22, 8:20 pm, (E-Mail Removed) (Pete) wrote:
> vimal wrote:
>>(E-Mail Removed) (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.

 
Reply With Quote
 
Thomas 'PointedEars' Lahn
Guest
Posts: n/a
 
      10-23-2007
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
 
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
Form Input Value to change a later value Christa Lee Javascript 2 10-01-2005 07:56 PM
IIS 6 security - anyone can explain this for me ? Michael Tsai ASP .Net 3 08-19-2005 03:05 AM
Pass input Array value to function to calc different input value Susan Cranford Javascript 2 07-05-2005 02:53 AM
Can anyone explain me about this command? Keung Cisco 1 11-28-2004 11:20 AM
Newbie question: Can anyone explain to me how the As New works? renata ASP .Net 1 06-25-2003 12:26 PM



Advertisments