Why does this work? (buttonref.form)

[Erwin Moller]

Hi,

I am using variants of the following code a lot but I don't actually
understand why it works.

<input type="button" value="delete" name="myButton"
onClick="confirmDeleteProject(this);">

<script type="text/javascript">
function confirmDeleteProject(butRef){
butRef.form.submit();
}
</script>

I do understand the 'top down' approach of getting a reference, eg:
document.forms.myButton.value="new value for button";

But why does butRef.form.etc work too?

Does every (form)element hold a reference to the original form it is
placed in?
In my (clearly wrong) mental image I would expect that the form holds
the references to its sibblings, and not the other way round.
It seem that the sibblings themself have references to their 'parent'
(the form itself) too.

Now I think a little longer about it: Is it designed like this because
of performance? If the sibblings DIDN'T hold references to their
parents, JavaScript should look up every object to find out if it holds
a reference to the object in question (butRef), which is slower of
course. But that is just my first thought.

Can anybody enlighten me a little on this?

Thanks for your time.
Regards,
Erwin Moller

PS: The longer I code JavaScript, the more I realize how little I know. ;-)


--
"There are two ways of constructing a software design: One way is to
make it so simple that there are obviously no deficiencies, and the
other way is to make it so complicated that there are no obvious
deficiencies. The first method is far more difficult."
-- C.A.R. Hoare

 

[RobG]

Hi,

I am using variants of the following code a lot but I don't actually
understand why it works.

<input type="button" value="delete" name="myButton"
onClick="confirmDeleteProject(this);">

<script type="text/javascript">
  function confirmDeleteProject(butRef){
        butRef.form.submit();
  }
</script>

I do understand the 'top down' approach of getting a reference, eg:
document.forms.myButton.value="new value for button";

But why does butRef.form.etc work too?

Does every (form)element hold a reference to the original form it is
placed in?

Yes, read the DOM 2 HTML spec:

In my (clearly wrong) mental image I would expect that the form holds
the references to its sibblings, and not the other way round.
It seem that the sibblings themself have references to their 'parent'
(the form itself) too.

Now I think a little longer about it: Is it designed like this because
of performance?

I think it's in the spec for convenience, nothing more.

If the sibblings DIDN'T hold references to their
parents, JavaScript should look up every object to find out if it holds
a reference to the object in question (butRef), which is slower of
course. But that is just my first thought.

User agents can do whatever they want, as long as the property returns
a reference to the form that the control is in. *How* they do it is
up to them - your assumption is a reasonable one, but I can't comment
on whether it is correct in any browser.

 

[Tim Slattery]

Erwin Moller

Hi,

I am using variants of the following code a lot but I don't actually
understand why it works.

<input type="button" value="delete" name="myButton"
onClick="confirmDeleteProject(this);">

<script type="text/javascript">
function confirmDeleteProject(butRef){
butRef.form.submit();
}
</script>

I do understand the 'top down' approach of getting a reference, eg:
document.forms.myButton.value="new value for button";

But why does butRef.form.etc work too?

Does every (form)element hold a reference to the original form it is
placed in?

Yes. Buttons, text fields, checkboxes, etc objects have a "form"
property that references the form they belong to.