Event.pass - a little problem

[Jan Rothe]

Hey out there,

it's the first time i got in touch with mootools and could need some help. Im trying to pass a submit-buttons anem to a function to disable the button, but it doesn't work as i hope.

Here is my code: http://jsfiddle.net/2sVhz/

'test' should be replaced with "this.getProperty('name')" later ... but 'name' is undefined in the doajax function.

Do someone have an hint for me please ?

Jan

[Sanford Whiteman]

You left out your form! But anyway, I think you were trying for this:

http://jsfiddle.net/2sVhz/2/

-- S.

[oskar.k...@gmail.com]

Two things:

1. You have a reference error in the JS (check the console)

2. Paste the entire example (including HTML) not only JS

[Jan Rothe]

Sorry,

most parts of the Form contain Contao-Related php-scrips, so i thought it doesnt really matter, but i added the entire form.

http://jsfiddle.net/2sVhz/3/ 

Console tells me that e is not defined.

[Sanford Whiteman]

Did you look at my /2?

[Jan Rothe]

Sorry, i didn't see the you altered more than just adding the form in html ... my fault ... ill try it ! Thank you very much!

[Jan Rothe]

Ok, Using your Code Snippet, name is set to test, but altering it to "doAjax.call(this,e,this.getProperty('name'));", trying to pass the name of the submit-button to the function, name is null in the function.

[Sanford Whiteman]

I'm mobile so I can't recheck your Fiddle now, but it creates a bit of a moving target if your "example" code isn't really to spec. There is likely a design re/decision that we can help you make if you can describe the wider UI/client-side goals of your app. Moo has more abstractions/macros than just call()/bind() type stuff (for example, the Form.Request class).

-- S.

[Sanford Whiteman]

> trying to pass the name of the submit-button to the function, name
> is null in the function.

That's because `this` is the FORM element, where you added the event.
If you want the *INPUT* to be `this`, then add the event to the
button.

http://jsfiddle.net/2sVhz/4/

Despite the fact that we don't literally do element.onClick=...
anymore, you have to still think of the event as a property of the
element by default. Just because you don't see the FORM doesn't mean
it doesn't have its own events to capture..

-- S.

[Jan Rothe]

Thanks a lot Sanford. With your /4 the name of the button is sent to the function.

But it leads to another Problem. If i use "$$('INPUT[type=submit]').addEvent('click', ..." Firebug tells me an Internal 500-Error and jobliste.html?isAjax=1 isn't called.

But that shouldn't be a problem, as "$$('form').addEvent('submit', function(e)" is working as intended if i give the "name" to the form instead of to the button.

And with this pointing to the form, this.getElementsByTagName("input.submit") should work to disable the submit-button, or am i wrong?

Jan

[Jan Rothe]

What are my goals with this: 

I have an Contao-CMS-based Homepage. There are registered Member (staff). I can add events (days the staff might want to work, freelancer). These events are provided in the front-end via an template, shown in /3. This creates a side with x multiple forms, as long as this is the only way i found yet, where i can pass some variables back to the cms, to use its internal var-structure, as database, member-ids and so on without a wider range of page-redirects. And, if the Member successfully hit "take part", as long as the serverrequest runs, i want to disable the button to prevent multiple hits, and if the server sends success, i want to change value of button to "cancel" if he or she accidently hit the button or maybe realised that he/she dont have time for this anymore.

To sumarize that: Memeber comes, logs in, see 1 to x possibilities where he could work, hits 0 to x buttons to tell me he wants to work there without any side-reloads, goes away!

[Sanford Whiteman]

[No need to CC:, BTW.]

> And, if the Member successfully hit "take part", as long as the
> serverrequest runs, i want to disable the button to prevent multiple
> hits, and if the server sends success, i want to change value of
> button to "cancel" if he or she accidently hit the button or maybe
> realised that he/she dont have time for this anymore.

I might suggest "Undo last action," but that's up to you (since you
have committed the last transaction at that point, you aren't
cancelling it, you are committing a new action that effectively undoes
it). "Cancel" at the UI level I associate with exiting a form without
taking _any_ action.

Anyway, if you only have one submit button per form, or if you don't
mind disabling all of them, then you can indeed attach the events to
the form's Submit and later grab the child submits:

document.id('myform').getElements('input[type=submit]').each(function(itm,idx){
// disable the itm
})

-- using the Moo way to get all the descendent elements -- and disable
each one.

But if you have more than one submit button per form, and you only
want to disable the one the user clicked, then you attach the events
to each button's Click, as we have gone over earlier.

-- S.