[Javascript] Targeting the correct form??

[Troy III Ajnej]

Hi Terry

 

The working example:

> function forms(h) {

> var daItems = $$('.'+h);

> for (iItem=0; iItem < daItems.length; iItem++) {

> var o=daItems[iItem]

> o.onsubmit=doforms;

> }

> }

> 

> var doforms = function() {

> alert(this.id);

> return false;

> }

 

is (almost) equal to:

 

o.onsubmit=function(){alert(this.id);return false;}

 

and it'll work, since you are alerting the returned string

of the this[object].id.value, belonging to current o.[variable] 

reference/object.

 

But, you are overdoing it, because "var doforms", is not necessary

if you go:

 

function doforms(), since "doforms" is nothing but a function variable

name. So the:

 

"var doforms = function()"

 

is just another syntax of saying exactly:

 

"function doforms()"

(except for these 4 to 7 extra characters of wasted bandwidth). 

:)

 

The reason why the other one is not working is the following: 

 

o.onsubmit=function(){return doforms(this)};

function doforms() {alert(this);return false;}

 

* alert(this) // will allways report itself as: [object], although empty!

The following 3 examples, will all work...

 

example 1:

...

o.onsubmit=doforms;

function doforms() {alert(this.id);return false;}

 

example 2: [more like the one you are using]

...

o.onsubmit=function(){return doforms(this)} 

function doforms(f) {alert(f.id);return false}

 

example 3:

...

o.onsubmit=function(){doforms(this); return false}

function doforms(f){alert(f.id)}

 

Meaning: "this" keyword never made it to the "doforms function".


Regards.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

                                      Troy III

                         progressive art enterprise

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

 


 
> From: riegel at clearimageonline.com
> To: javascript at lists.evolt.org
> Date: Wed, 25 Feb 2009 14:07:23 -0500
> Subject: Re: [Javascript] Targeting the correct form??
> 
> David,
> 
> Thanks for your reply. I think I have been caught with this several 
> times over the years and for some reason can't get my head around it. 
> I know I have asked questions like this on this exact same issue in 
> the past and this group (possibly you) have been very kind to answer.
> 
> I do have one followup question...
> 
> I tried both of your methods but only one worked. Any idea what was 
> wrong with the second I listed here...
> 
> Perhaps is something obvious I am missing.
> 
> 
> 
> This one worked
> ----------------
> function forms(h) {
> var daItems = $$('.'+h);
> for (iItem=0; iItem < daItems.length; iItem++) {
> var o=daItems[iItem]
> o.onsubmit=doforms;
> }
> }
> 
> var doforms = function() {
> alert(this.id);
> return false;
> }
> 
> 
> This one did not work
> ---------------------
> function forms(h) {
> var daItems = $$('.'+h);
> for (iItem=0; iItem < daItems.length; iItem++) {
> var o=daItems[iItem]
> o.onsubmit=function(){return doforms(this)};
> }
> }
> 
> function doforms() {
> alert(this);
> return false;
> }
> 
> 
> 
> Thanks again,
> 
> Terry
> 
> 
> 
> 
> On Feb 25, 2009, at 12:07 PM, David Dorward wrote:
> 
> > Terry Riegel wrote:
> >> Hello everyone. I am struggling with a particular function. I have a
> >> page with multiple forms on it. I am applying unobtrusive javascript
> >> to it and am having difficulty targeting the right form with my code.
> >> Via an onload I call forms() and that works great. When I go to 
> >> submit
> >> the form I simply alert the id of the form submitted. At least thats
> >> what I would think my code would do (listed below). Instead 
> >> regardless
> >> of what form button I click on It alerts the id of the last form
> >> element on the page.
> >>
> > This is a common error.
> >
> >> Any help will be greatly appreciated.
> >>
> >>
> >> function forms(h) {
> >> var daItems = $$('.'+h);
> >> for (iItem=0; iItem < daItems.length; iItem++) {
> >> var o=daItems[iItem]
> >> o.onsubmit=function(){return doforms(o)};
> >> }
> >> }
> >>
> >> function doforms(o) {
> >> alert(o.id);
> >> return false;
> >> }
> >>
> >
> > When you assign function(){return doforms(o)};, "o" means "The 
> > variable
> > o" not "The current value of the variable o".
> >
> > Since the loop keeps going - o ends up being the last value that it
> > reaches by the time the function is ever called.
> >
> > I could explain how to use closures to work around this, but its much
> > simpler to just suggest you use this instead.
> >
> > o.onsubmit=function(){return doforms(this)};
> >
> >
> > Or even easier:
> > var doforms = function () {
> > alert(this.id);
> > return false;
> > };
> >
> > and
> > o.onsubmit=doforms;
> >
> >
> > And just for good measure, insert rant about obfuscated code:
> > http://dorward.tumblr.com/post/79674407/the-dollar-function-must-die
> >
> > -- 
> > David Dorward
> > http://dorward.me.uk/
> > _______________________________________________
> > Javascript mailing list
> > Javascript at lists.evolt.org
> > http://lists.evolt.org/mailman/listinfo/javascript
> 
> _______________________________________________
> Javascript mailing list
> Javascript at lists.evolt.org
> http://lists.evolt.org/mailman/listinfo/javascript

_________________________________________________________________
It’s the same Hotmail®. If by “same” you mean up to 70% faster. 
http://windowslive.com/online/hotmail?ocid=TXT_TAGLM_WL_HM_AE_Same_022009