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="valfun c(this.form);">
</FORM>

where

function valfunc(f) {
if (f._widge1.valu e == 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.testi t._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]

Re: Referencing widgets - document.formna me vs this.form

Data Guy wrote:[color=blue]
> 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="valfun c(this.form);">
> </FORM>
>
> where
>
> function valfunc(f) {
> if (f._widge1.valu e == 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.testi t._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.[/color]

Try using the elements collection instead of the dot notation:

if (f.elements['_widge1'].value == 2){.....}
[color=blue]
> Why does this problem occur?[/color]

It shouldn't unless the _ is causing a problem.
[color=blue]
> Is there some rule about when I can pass
> along that form as "this.form" ?[/color]

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?


--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

[Lee]

Re: Referencing widgets - document.formna me vs this.form

Data Guy said:[color=blue]
>
>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="valfun c(this.form);">
></FORM>
>
>where
>
>function valfunc(f) {
>if (f._widge1.valu e == 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.testi t._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" ?[/color]

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.somen ame, 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]

Re: Referencing widgets - document.formna me vs this.form

Randy Webb <HikksNotAtHome @aol.com> writes:

[color=blue][color=green]
>> if (document.testi t._widge1.value == 2) {alert("A 2!");}[/color][/color]
....[color=blue]
> Try using the elements collection instead of the dot notation:
>
> if (f.elements['_widge1'].value == 2){.....}[/color]

Shouldn't change a thing. "_widge1" is a perfectly good identifier.
[color=blue][color=green]
>> Why does this problem occur?[/color]
>
> It shouldn't unless the _ is causing a problem.[/color]

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

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Matt Kruse]

Re: Referencing widgets - document.formna me vs this.form

Data Guy wrote:[color=blue]
> <INPUT TYPE="BUTTON" VALUE="Edit" onclick="valfun c(this.form);">
> function valfunc(f) {
> if (f._widge1.valu e == 2) {alert("A 2!");}
> }[/color]

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

Instead, I would do
onClick="valfun c(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.

--
Matt Kruse

http://www.JavascriptToolbox.com

http://www.AjaxToolbox.com

[Randy Webb]

Re: Referencing widgets - document.formna me vs this.form

Matt Kruse wrote:
[color=blue]
> Data Guy wrote:
>[color=green]
>><INPUT TYPE="BUTTON" VALUE="Edit" onclick="valfun c(this.form);">
>>function valfunc(f) {
>>if (f._widge1.valu e == 2) {alert("A 2!");}
>>}[/color]
>
>
> I would question why you're passing in the form from a specific element.
>
> Instead, I would do
> onClick="valfun c(this);"[/color]

"this", in that context, refers to the input button, does it not?
[color=blue]
> function valfunc(obj) {
> if (obj.value == 2) {alert("A 2!");}
> }[/color]

Then your function is comparing the value of your button to 2 which is
isn't so it would never alert.
[color=blue]
>
> Then inside valfunc, if you need a reference to the form you can use
> obj.form.[/color]

Given that obj refers to the element, then obj.parentNode will give you
(in most circumstances, if not all) a reference to the form.
[color=blue]
> 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.[/color]

Agreed.

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

[Matt Kruse]

Re: Referencing widgets - document.formna me vs this.form

Randy Webb wrote:[color=blue]
> "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.[/color]

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 ;)
[color=blue]
> Given that obj refers to the element, then obj.parentNode will give
> you (in most circumstances, if not all) a reference to the form.[/color]

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.

--
Matt Kruse

http://www.JavascriptToolbox.com

http://www.AjaxToolbox.com

[Randy Webb]

Re: Referencing widgets - document.formna me vs this.form

Matt Kruse wrote:[color=blue]
> Randy Webb wrote:
>[color=green]
>>Given that obj refers to the element, then obj.parentNode will give
>>you (in most circumstances, if not all) a reference to the form.[/color]
>
>
> 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.[/color]

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.nam e 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="valida te(this)" name="myButton" >

--
Randy
comp.lang.javas cript FAQ - http://jibbering.com/faq & newsgroup weekly

[Jc]

Re: Referencing widgets - document.formna me vs this.form

Randy Webb wrote:[color=blue]
> Matt Kruse wrote:[color=green]
> > Randy Webb wrote:
> >[color=darkred]
> >>Given that obj refers to the element, then obj.parentNode will give
> >>you (in most circumstances, if not all) a reference to the form.[/color]
> >
> >
> > 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.[/color]
>
> 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.... ?[/color]

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_not..._access.html): "Form
control objects all have a property named "form" that holds a reference
to the FORM element that contains them."

[Matt Kruse]

Re: Referencing widgets - document.formna me vs this.form

Randy Webb wrote:[color=blue]
> objRef.form.nam e does give me the form name (although I didn't believe
> it would)[/color]

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.

--
Matt Kruse

http://www.JavascriptToolbox.com

http://www.AjaxToolbox.com

[Michael Winter]

Re: Referencing widgets - document.formna me vs this.form

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

[snip]
[color=blue]
> Given that obj refers to the element, then obj.parentNode will give you
> (in most circumstances, if not all) a reference to the form.[/color]

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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.