Disable Submit Button Upon Form Submission Using MooTools
A while back, I covered basic disabling the submit button upon form submission using vanilla JavaScript. I thought I'd show you how to do the same thing using some unobtrusive Moo.
window.addEvent('domready', function() {
$each($$('input[type=submit]'),function(el) {
el.addEvent('click',function(e) {
this.disabled = 1;
this.set('value','Processing....');
}.bind(el));
});
});
The reason to change the button's value is to communicate to the user that a change has occurred or that the page is "thinking."
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
My None-MooTools version.
function dip(x){
for (i=0, l = x.elements.length; i < l; i++)
if (/^(?:submit|reset)$/.test(x.elements[i].type)) { x.elements[i].className = “”; x.elements[i].disabled = true; }
}
just add an onsubmit=”dip(this)” .. Just a thought
Emmm and forget about x.elements[i].className = “”; … I use it for my own purposes :P
Hi, thanks for this tip, very useful.
Why is the .bind(el) necessary? What does that do?
@GB: I use “.bind(el)” so that “this” refers to the element.
@david: Thanks for your response. I’m a bit of an amateur, and I’ve never really got the hang of binding.
Am I missing something? If I remove the “.bind(el)” it still seems to work. I also tested using
el.disabled = 1;
el.set(‘value’,'Processing….’);
and it seems to work too.
And then I tried this… (would this be a “cleaner” way of doing it?)
$$(‘input[type=submit]‘).addEvent(‘click’,function() {
this.disabled = 1;
this.set(‘value’,'Processing….’);
});
What do you think?
@GB: I could be wrong and not need it. Overkill maybe!
It might be an idea to grab the parent form and add the event for the form’s submission. With your example, if you have any client side validation the submit button will no longer be available. Of course you could always set the submit button back to enabled if validation fails and user needs to re-enter data.
Hey David! Cool script!
The code is a bit excessive though… Here’s the same thing shortened down a bit (I replace 1 with true because I feel it’s more “appropriate”, feel free to change that back though, obviously):
window.addEvent(‘domready’, function() {
$$(‘input[type=submit]‘).addEvent(‘click’,function(e) {
this.disabled = true;
this.set(‘value’, ‘Processing….’);
});
});
MooTools lets you apply actions to groups like that :-)
hmmm.. Doesnt seem to work in ie6…
and here comes the workaround to ie6 problem:
(When you set the button to disabled it prevents form submission)
$$(‘input[type=submit]‘).addEvent(‘click’,function(e){
this.clone().inject(this,’after’).set(‘disabled’,true).set(‘value’,'Processing…’);
this.setStyle(‘display’,'none’);
});
Enjoy
3magine Studios – Web Design and Development
Hi Karl, thanks for that IE6 workaround, but I am afraid I am not good enough in JavaScript, so I don’t know how to use. Here is what I have:
function DisableButton(b)
{
b.disabled = true;
b.value = ‘Submitting’;
}
and then I have this function associated as an onclick event with the submit button: onclick=”DisableButton(this);”
How do I have to change the function to make it work in IE6?
Thanks for your help,
Michael
Please study the following and then come back to my solution…. There’s too much explaining if you dont know how to use mootools… good luck
MooTorial
Enjoy
3magine Toronto Web Design
When the request returns, use onComplete – which if I am correct will execute regardless of return status – to change the buttons text back to what it was originally. To do this, use the new (ish) store() and retrieve (element storage) functions.
Just an idea.
I used this for the mootools formcheck. It was useful.
Thanks.
hello very nice working perfectly, I had to implement this:
$$(‘input[type=submit]‘).addEvent(‘click’,function(e){this.clone().inject(this,’after’).set(‘disabled’,true).set(‘value’,'Processing…’);
this.setStyle(‘display’,'none’);
});
what I would like to find out is it possible to exclude a couple of buttons from this script
you could add a class to the buttons you want to process and that would exclude any other buttons:
$$(‘input.myFormButton‘).addEvent(‘click’,function(e){
this.clone().inject(this,’after’).set(‘disabled’,true).set(‘value’,'Processing…’);
this.setStyle(‘display’,'none’);
});
thank you so much for the quick reply, and this will work 100% but I have more button that I want to include than exclude for example I have about 590 buttons I want to include in this and exclude actually only 5. is thare not a way to say ALL inputs excluding the ones with a specific class?
what I was thinking was to exclude the other buttons by giving them an ID and then excluding them this way:
window.addEvent('domready', function () {
$each($$('input[type=submit]' && 'input[id=]'), function (el) {
el.addEvent('click', function (e) {
this.clone().inject(this, 'after').set('disabled', true).set('value', 'Processing…');
this.setStyle('display', 'none');
} .bind(el));
});
});
Now I’ve done $$(‘input[type=submit]‘ && ‘input[id=]‘) <- that and it works great exept that if my textbox does not have an ID it implements the disable to that as well… any Ideas are welcome..
very simple, your imagination is the key, try something like this:
$$('input[type=submit]').each(function(input){
if(!input.hasClass('.restrictThisOne') && input.get('id')!='restrictedId'){
input.addEvent('click',function(e){
this.clone().inject(this,'after').set('disabled',true).set('value','Processing…');
this.setStyle('display','none');
});
}
});
oops, syntax mistake [sucks no comment editing :(]:
input.hasClass('.restrictThisOne')should be without a dot:input.hasClass('restrictThisOne')sorry did not update this… its exactly what I did… thank you again for the rapid resonses
Hello David,
this.disabled = 1;
I can disable fields with my version of MooTools (1.1 I think in Joomla! 1.5) but I cannot enable disable fields by going:
this.disabled = 0;
Is there a way to do so?
Thanks for the code; however it seemed to stop form submission in Safari 5.1.2 (on OS X 10.6.8 at least). The solution for me was to listen to the “submit” event on the form, rather than the “click” event on the submit button. Thus, when the event triggers, the submission is already happening, and so Safari does not stop it on the grounds there is no enabled submit button.