Referencing widgets - document.formname vs this.form

[Data Guy]

In my approach to validation for widgets, i write javascript functions.
At the end of the document, inside the form, i invoke the function as

<FORM NAME="testit">
<INPUT TYPE="TEXT" VALUE="2" NAME="_widge1">
<INPUT TYPE="BUTTON" VALUE="Edit" onclick="valfunc(this.form);">
</FORM>

where

function valfunc(f) {
if (f._widge1.value == 2) {alert("A 2!");}
}

Sometimes, oddly, the javascript cannot find _widge1. In such cases, I
must rewrite the function as

function valfunc(f) {
if (document.testit._widge1.value == 2) {alert("A 2!");}
}

This is clearly a little less general, as it only applies to one group
of forms, those with the name testit.

Why does this problem occur? Is there some rule about when I can pass
along that form as "this.form"?

 

[Randy Webb]

In my approach to validation for widgets, i write javascript functions.
At the end of the document, inside the form, i invoke the function as

<FORM NAME="testit">
<INPUT TYPE="TEXT" VALUE="2" NAME="_widge1">
<INPUT TYPE="BUTTON" VALUE="Edit" onclick="valfunc(this.form);">
</FORM>

where

function valfunc(f) {
if (f._widge1.value == 2) {alert("A 2!");}
}

Sometimes, oddly, the javascript cannot find _widge1. In such cases, I
must rewrite the function as

function valfunc(f) {
if (document.testit._widge1.value == 2) {alert("A 2!");}
}

This is clearly a little less general, as it only applies to one group
of forms, those with the name testit.

Try using the elements collection instead of the dot notation:

if (f.elements['_widge1'].value == 2){.....}

Why does this problem occur?

It shouldn't unless the _ is causing a problem.

Is there some rule about when I can pass
along that form as "this.form"?

I could be wrong but I believe its related more to the element name than
the this.form. But what browser is displaying that behavior?

 

[Lee]

Data Guy said:

In my approach to validation for widgets, i write javascript functions.
At the end of the document, inside the form, i invoke the function as

<FORM NAME="testit">
<INPUT TYPE="TEXT" VALUE="2" NAME="_widge1">
<INPUT TYPE="BUTTON" VALUE="Edit" onclick="valfunc(this.form);">
</FORM>

where

function valfunc(f) {
if (f._widge1.value == 2) {alert("A 2!");}
}

Sometimes, oddly, the javascript cannot find _widge1. In such cases, I
must rewrite the function as

function valfunc(f) {
if (document.testit._widge1.value == 2) {alert("A 2!");}
}

This is clearly a little less general, as it only applies to one group
of forms, those with the name testit.

Why does this problem occur? Is there some rule about when I can pass
along that form as "this.form"?

You need to learn new terminology.

They're not widgets, they're controls, or form controls.
They're not forms with the same name, they are controls of
the same form (which is named "testit".
Form controls always have an attribute named "form", which
will always have references to all of the controls it owns.

So, if you can't access this.form.somename, then somename
is not a control in the same form.

Post a small example of a case in which you can't access a
control this way, and somebody will probably be able to spot
why.

 

[Lasse Reichstein Nielsen]

if (document.testit._widge1.value == 2) {alert("A 2!");}

....
Try using the elements collection instead of the dot notation:

if (f.elements['_widge1'].value == 2){.....}

Shouldn't change a thing. "_widge1" is a perfectly good identifier.

It shouldn't unless the _ is causing a problem.

A cuncur, and the "_" shouldn't be causing a problem.

/L

 

[Matt Kruse]

<INPUT TYPE="BUTTON" VALUE="Edit" onclick="valfunc(this.form);">
function valfunc(f) {
if (f._widge1.value == 2) {alert("A 2!");}
}

I would question why you're passing in the form from a specific element.

Instead, I would do
onClick="valfunc(this);"

function valfunc(obj) {
if (obj.value == 2) {alert("A 2!");}
}


Then inside valfunc, if you need a reference to the form you can use
obj.form.

The benefit of this is that you can use the same function to valid several
input objects, and the form element names are not hard-coded into the
function.

 

[Randy Webb]

I would question why you're passing in the form from a specific element.

Instead, I would do
onClick="valfunc(this);"

"this", in that context, refers to the input button, does it not?

function valfunc(obj) {
if (obj.value == 2) {alert("A 2!");}
}

Then your function is comparing the value of your button to 2 which is
isn't so it would never alert.

Then inside valfunc, if you need a reference to the form you can use
obj.form.

Given that obj refers to the element, then obj.parentNode will give you
(in most circumstances, if not all) a reference to the form.

The benefit of this is that you can use the same function to valid several
input objects, and the form element names are not hard-coded into the
function.

Agreed.

 

[Matt Kruse]

"this", in that context, refers to the input button, does it not?
Then your function is comparing the value of your button to 2 which is
isn't so it would never alert.

I'm brain dead, and mis-read his original HTML. I was thinking his
validation function was validating the input object that was triggering it.
Thanks for clearing that up

Given that obj refers to the element, then obj.parentNode will give
you (in most circumstances, if not all) a reference to the form.

Not true - The input object can exist within a table, within a div, etc.
The "form" property of an input object is the best way to get a reference to
the form, AFAIK.

 

[Randy Webb]

Not true - The input object can exist within a table, within a div, etc.
The "form" property of an input object is the best way to get a reference to
the form, AFAIK.

How ironic that it actually works.

Does that imply that a form is a property of the elements is a property
of the form is a property.... ?

objRef.form.name does give me the form name (although I didn't believe
it would)

function validate(elem){
alert(elem.form.myButton.name)
}

<input type="button" value="Edit" onclick="validate(this)" name="myButton">

 

[Jc]

How ironic that it actually works.

Does that imply that a form is a property of the elements is a property
of the form is a property.... ?

It's actually a quite handy shortcut, although not as well-known as it
should be. Here's a quote from the FAQ notes
(http://www.jibbering.com/faq/faq_notes/form_access.html): "Form
control objects all have a property named "form" that holds a reference
to the FORM element that contains them."

 

[Matt Kruse]

objRef.form.name does give me the form name (although I didn't believe
it would)

Indeed, I rarely if ever pass a reference to the form itself from a form
element event handler. It's always easier to pass the element because then
you can have a reference to it if needed, and you can always get the form
from element.form.

 

[Michael Winter]

On 13/06/2005 02:58, Randy Webb wrote:

[snip]

Given that obj refers to the element, then obj.parentNode will give you
(in most circumstances, if not all) a reference to the form.

With Strict document types, FORM elements must contain at least one
block-level or SCRIPT element. Inline elements are not legal children.
In that case, the FORM element would never be the parent node of any of
its controls.

[snip]

Mike