Something that I seem to be doing a lot lately, is writing a handler for processing the submission of a form, and since mootools is the JS framework of choice, I’ve written this little class that handles the onsubmit of a form and adds some useful features.
- Confirmation – Provides an Ok, Cancel input box before proceeding further
- Submit Button – Disable and change the text on a submit button
- Information Div – Display a div that lets the user know something is happening
- Undo – Undo the changes (re-enable a previously disabled submit button, change the information div) that have been carried out by the class
- AJAX – Submit the form using AJAX instead of the ‘old fashioned’ way
All these should be easily implemented using the class.
Examples are provided in examples.html.
As previously, this work is released under the creative commons share alike license.
Edit: I really do dislike internet exploder… The above version failed in IE6 (mootools’ form.toQueryString() function). I’ve updated the code to 0.11 which can be found here:
Edit 2: Ok, so my hatred for IE, although deserved, was unnecessary in this situation…
I’ve updated the code to use mootools .bind(this) on the ajax onComplete function, this fixed the main problem with IE6 and makes the code look much cleaner. Also the examples file is now PHP instead of static HTML and returns a var_dump of $_POST when the form is submitted.
PS. This will be the final update to this post!