Simple pluralization with jQuery
Don’t you hate it when a html form shows something like this?
I understand we’re in a territory that most people would label as “cosmetics”, but I was taught better than this, and the idea of writing “1 days” still makes my stomach ache.
The most obvious solution is to follow the traditional paper forms convention and write something like “day/days”, but can we really stop automation?
So here’s my solution. It’s a simple one, based on the wonderful library that is jQuery.
First, add a couple of spans after your input, one for singular, one for plural.
<input id="interval" name='interval' size='2' value=''></input> <span class='interval-desc' id="interval-singular">day</span> <span class='interval-desc' id="interval-plural">days</span>
Then, put this script somewhere in your <head>:
// Make sure the src attribute points to // the actual location of jQuery <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> //<![CDATA[ $j=jQuery.noConflict(); function updateIntervalDescriptor () { $j(".interval-desc").hide(); var number = "-plural"; if ($j('input#recurrence-interval').val() == 1 || $j('input#recurrence-interval').val() == "") number = "-singular" var descriptor = "span#interval-" + number; $j(descriptor).show(); } $j(document).ready( function() { updateIntervalDescriptor(); $j('input#recurrence-interval').keyup(updateIntervalDescriptor); } //]]> </script>
The concept is pretty straighforward. If your input contains a value bigger than 1, or no value, the “day” span is shown, otherwise the “days” span is shown. It’s really a no-brainer, but I thought I’d share it, for the love of grammar 
Of course you can use the same rationale to make your forms more dynamic. The original script behind this post changes the text according to frequency, so you have day/s, week/s and month/s. Once you grasp the basics it’s pretty easy to automate your forms this way.
As a side note, you may have noted this line:
$j=jQuery.noConflict();
This is to stay on the safe side and avoid potential conflict with other libraries. In my case, I acquired this habit after starting coding wordpress plugin; Wordpress, at least up to 2.5, uses both Prototype and jQuery; both libraries use the $ selector.
Update
Gary Jones suggests an even simpler way to pluralize through jQuery.
I do favour myself his method, which is more synthetic than mine.
My example was actually born stripping heavily from production code. For the sake of focusing, I decided to take out most of the context. In the original code, part of Events Manager 2.0, I don’t use “day” but a localised string, introduced through
_e('day', 'dbem');
I prefer not to mingle javascript and PHP when not strictly necessary. Moreover, the string displayed depends also on a frequency selector, so I have also ‘weeks’ and ‘months’, and a more complicated id structure. That is why I went for a longer approach and more spans. If your needs aren’t that complicated, go with Gary’s tip.
Lovedeity has also a point reminding me that many languages have more complicated rules for plural. When I find a French localiser, I’ll have to look into this.
Thank ye all folks, we’re having a nice discussion here!
2009-01-24 at 8.17 pm
For English, that’s an appropriate mechanism. Once you go beyond that, it gets a lot more difficult. For example, French has a zero value with a singular designation (zero day). Russian has three forms for pluralization based on some complicated rules.
…just something to consider if you ever decide to internationalize.
I found this to be an excellent resource for pluralization:
https://developer.mozilla.org/en/Localization_and_Plurals
2009-01-25 at 5.56 am
Didn’t remember you can use noClonflict() to change the selector to what you want.. maybe i try to get used to taht from now on
2009-01-25 at 11.36 am
@lovedeity
You’re right there. Actually I meant to put a footnote about those languages with the dual number and so on, but I forgot in the process. Good point, and thanks for sharing the resource.
@Jose The noConflict() method comes in really handy especially when you’re dealing with other people’s frameworks, that is, you never know what might be in it. In my case i was forced to use it after realising that Prototype had already taken possessiojn of
$.2009-01-26 at 10.18 am
Hi Davide,
While your version works and everything, I can’t help but feel it’s a bit clunky for such a simple task. I’ve written up my thoughts at http://garyjones.co.uk/blog/pluralization/ . Regards, Gary.
2009-01-26 at 2.39 pm
Good tip, I updated the post to acknowledge it. As far as the blur() suggestion goes, i had also used it at first, but I guess I prefer more responsiveness, so I went with keyup().
2009-01-26 at 3.14 pm
Hat tip appreciated, thanks
The “Gary’s tip” link in the update is almost certainly pointing to the wrong URL.
2009-01-26 at 3.18 pm
Fixed that
2009-12-09 at 5.38 pm
Hi Davide,
I’m getting some odd 404’s to my site from links in the post and comment of this page.
I think it’s the Google Analytics plugin (or another) which, when adding the rel=”nofollow” is using the wrong (single) quotes – check the source of this page and you’ll see. The browser (Firefox at least) interprets the invalid code correctly, but the Analytics doesn’t giving me 404s recorded like http://garyjones.co.uk/‘%20rel=’external%20nofollow . Any chance you could fix these up?
Thanks (and feel free to delete this comment – I couldn’t find a contact form for you!)
Gary.