Learn About Doug!
View Doug Boude's online resume

View Doug Boude's profile on LinkedIn
Follow Doug Boude on Twitter
Contact Doug!
OO Lexicon
Chat with Doug!
Recent Entries
You may also be interested in...
Florida web site design

hotels boeken in 7 sec
Engagement Rings
Online Dating Australia


Czech your Page Rank!
Check Page Rank of any web site pages instantly:
This free page rank checking tool is powered by Page Rank Checker service
Surf's Up!
Visit Egosurf.org and massage YOUR web ego!
My Score: 6,828
Doug's Books

Read (and recommend)

  • Men are from Mars, Women are from Venus
  • The Wisdom of Crowds: Why the Many Are Smarter Than the Few and How Collective Wisdom Shapes Business, Economies, Societies and Nations
  • Blink: The Power of Thinking Without Thinking
  • Head First Design Patterns
  • Transact-SQL Programming
  • What's So Amazing About Grace?
  • Just So Stories (Rudyard Kipling collection)

Reading

  • Prayer: Does it Make Any Difference?
  • Data Mining (Practical Machine Learning Tools and Techniques)
<< January, 2009 >>
SMTWTFS
123
45678910
11121314151617
18192021222324
25262728293031
Search Blog

Recent Comments
Re: Using Google as your CF Mail Server (by wesdom at 12/26 2:00 PM)
Re: Refreshing Cached ColdFusion Webservices Through the Back Door (by Michael at 12/19 12:36 PM)
Re: Getting a Complete List of Timezones from Java (by PaulH at 12/17 9:32 AM)
Re: A Look at Male Enhancement (by ike at 12/16 4:44 AM)
Re: Very Useful Snippet (by Dan Vega at 12/13 11:00 AM)
Re: Very Useful Snippet (by Jason Fisher at 12/13 8:56 AM)
Re: Viewing Option Text (in IE7) that's Wider than the Select List (by nfurs dfksdjalk at 12/12 5:28 PM)
Re: SQL Forward Engineering with Visio 2003 Professional (by Peter J. Smith at 12/11 5:30 PM)
Re: Element.show/hide anomoly in Prototype (by Michael Sharman at 12/11 3:10 PM)
Re: Basic Security in Coldbox using Transfer and Coldspring - Part II (of II) (by orc at 12/08 11:44 PM)
Categories
Archives
Photo Albums
Funnies (5)
Family (3)
RSS

Powered by
BlogCFM v1.11

04 November 2008
Elegant Approach to Disabling Submit Button on Forms

A while back I had a project that required the submit button of the login form to be disabled unless both the username field AND the password field had values. There are probably several ways to skin that cat, but my good friend Boyan Kostadinov offered a more elegant solution (he's always good for the most elegant approach!), and I thought I'd share it with whoever else may benefit.

This solution uses the Prototype library (you need version 1.6). It also uses a small "login.js" file that Boyan wrote which looks for anything with the class "enableOnEntry" (the key to making this work) and then cycles through the form elements within that class, adding their IDs to an array (actually a delimited list, but it is split into an array later). Boyan then binds event listeners to each of the form fields which, while typing in values, will check to see if the submit button should be enabled or not. Anyway, you can read through the JS file if you like, but here's how to implement it, along with a working demo in this post:

1. acquire and reference the following js files in your template (in this order):
    prototype.js
    login.js
2. ensure that your form tag has the class "enableOnEntry";
3. ensure that your form has exactly one submit button (of type 'submit', not 'button');

That's it!

Working Demo:

For your convenience, here is the code used to create the working sample above:

<script src="/js/prototype.js"></script>
<script src="/js/login.js"></script>
<fieldset style="width:200px;">
<legend>Login Form</legend>
<form class="enableOnEntry" name="login" id="login" onSubmit="alert('form submitting...');return false;">
 Username:<br><input type="text" id="username" name="username" value="" /><br><br>
 Password:<br><input type="password" id="password" name="password" value="" /><br>
 <br>
 <input name="submit" id="submit" type="submit" disabled="true" value="Login" />&nbsp;&nbsp;<input type="reset" value="Clear" onClick="$('submit').disabled = true;" />
</form>
</fieldset> 

 and here are links to the js files:

 

 prototype.js

login.js

Hope it helps.




Posted by dougboude at 5:55 PM | PRINT THIS POST! |Link | 3 comments
Subscription Options

You are not logged in, so your subscription status for this entry is unknown. You can login or register here.

Re: Elegant Approach to Disabling Submit Button on Forms
I like the idea of submitting a form. One problem I've come up against is the issue of disabling a form that returns a binary rather than new web page. For example, a Report form that has a "generate report" button that streams back a PDF or an Excel document. The problem I get there is that if I disable the form on submit, it leaves the person with a binary and a page that cannot be submitted again (even though the form is visible).

Any thoughts on this? I have not come up with anything good.
Posted by Ben Nadel on November 5, 2008 at 9:11 AM

Re: Elegant Approach to Disabling Submit Button on Forms
@Ben, obvious suggestion, but: just don't disable the form/submit button in that case, or if you've got a global handler which disables all forms onSubmit, make an exception to re-enable the form/button using a local onSubmit function.

But rather than disabling onSubmit, Doug's post is more about an alternative approach to client side validation of required fields. It sounds appealing but my only concern is that it gives less feedback to the user. They see they can't submit the form, but there's nothing explaining why: just a greyed out button. I think Joel Spolsky wrote about this recently, saying that you should never disable menus etc, but instead explain *why* an option isn't available. It may be obvious to the developer (required fields are empty) but not necessarily to the user.
Posted by Julian Halliwell on November 10, 2008 at 2:47 AM

Re: Elegant Approach to Disabling Submit Button on Forms
@Julian - Awesome input! Thanks for commenting.
Posted by dougboude on November 10, 2008 at 7:18 AM

Name:   Required
Email:   Required your email address will not be publicly displayed.

Want to receive notifications when new comments are added? Login/Register for an account.

Time to take the Turing Test!!!

What letter comes four place(s) after the letter K? (in the alphabet, if that wasn't already apparent)
Type your answer exactly one time(s) in the designated box.

Type in the answer to the question you see above:

Your comment:

Sorry, no HTML allowed!