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

P

Pete

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

vimal

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 --
Click to expand...


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

vimal

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...]
Click to expand...
Initially, I tried this scheme (abbreviated here, but I've checked the
behaviour with this too):
Click to expand...
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>
Click to expand...
(I'm using a local file rather than google.com so I just see the sent
request)
Click to expand...
Then in the <script>:
Click to expand...
function setGoogle(elem) {
var qbtn = document.getElementById("GOOGLE")
var form = document.getElementById("GOOGFORM")
qbtn.value = <<string extracted from elem>>;
...
}
Click to expand...
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.
Click to expand...
Then I read the faq and found a recommended method, like this:
Click to expand...
function setGoogle(elem) {
var form = document.forms["googlesearch"];
var qbtn = form.elements["q"];
qbtn.value = <<string extracted from elem>>;
}
Click to expand...
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!
Click to expand...
Hellppp....
-- Pete --
Click to expand...

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.
Click to expand...

refer this page in case u had doubts:

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

vimal
Binary karma enterprise
 
P

Pete

[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?
Click to expand...


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.
Click to expand...

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

Henry

Sorry, but this doesn't answer my question.
Click to expand...

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.
Click to expand...

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?
Click to expand...

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

Thomas 'PointedEars' Lahn

pr said:
Pete said:
[...]
var form = document.getElementById("GOOGFORM")
[...]
var form = document.forms["googlesearch"];
[...]
*why* should the first idea *not* work?
[...]
Click to expand...

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
Click to expand...

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
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How to treat an input data as variable? 4
Move a Form action="ThatPage.php" to an <input type="??" > inline 1
How can I create a table using the input element? 1
Registration Form 7
Reversing output of user input by using while loop... 2
Mandatory Elements To Conduct JavaScript Form Manipulation 7
Set value after clicking in field 11
Update element value ViewWeb2 .net Control 1

Members online

Total: 34 (members: 1, guests: 33)
Robots: 343

Forum statistics

Threads
473,767
Messages
2,569,571
Members
45,045
Latest member
DRCM

Latest Threads

Top