Optimizing Web-Forms with jQuery

Ever look at some of your forms and think, wow, that’s repeatitive.  Yep, you know those multi-level search forms, or tabbed interfaces with repeated drop down values? Those are the ones.

Ever wonder how you could optimize them for the client and reduce some of the overhead? For example, say you’ve got a site that has multiple categories, and for each category you can search by State, Region and some other ‘Long List’ of filterable data (model, manufacturer, artist, author, etc) — ever think it was a good idea to create a tabbed interface to help break it out … since Searching by Artist really has different fields then searching by Author … one’s a song, the others a book … they have similar qualities, but not the same so the form differs for each.

Say for example, you have 5 forms on your ‘search page’ and each form is hidden behind a ‘tabbed user interface’ (toggled display attributes with a little bit of simple javascript), now, on each of these forms you have the same select/option drop-down with the same values.  The only thing that differs, or may not, is the elements ID attribute.

Ever looked at how much space was consumed by a simple US State drop-down? Nearly 4kb of data is inside the <select /> tag <option value=”xxxxx”>Alabama</option> … 50+ times (especially if you include regions and sub-regions in the list).  Now, you’ve got this same drop down in 5 places on the page — thats 4kb times 5, nearly 20kb of bandwidth required by the end user to download your page now.

Be nice to trim that down to a simple 5kb, wouldn’t it?

With jQuery, we can … and here’s how:

[html]

<select id=”myFirstStateDropDown”>
<option value=”1″>Alabama</option>
<option value=”2″>Alaska</option>
….
<option value=”50″>Hawaii</option>
</select>

[/html]

We start with this, and we populate all of our values into it — pretty simple, your site probably already has this going on — multiple times (gotta love CTRL-C/CTRL-V action, eh?).

Now, we add a little bit of jQuery:

[javascript]
$(document).ready(function() {
var replicated = $(‘select.replicated’);
for(var x = 0; x < replicated.length; x++) {
var rel = $(replicated[x]).attr(‘rel’);
var src = $(‘#’ + rel);
var dst = $(replicated[x]);
dst.empty();
dst.append($(‘option’, src).clone());
}
});
[/javascript]

Wait … uhm, we’re missing something … the destination place holders, so let’s add some in:

[html]
<select id=”mySecondDropDown” rel=”myFirstStateDropDown” class=”replicated”>
<option value=””>– Any –</option>
</select>
[/html]

Repeat the above as many times as you need too, in as many places as you need, save and load up your page … watch as all the ‘replicated’ drop downs automatically populate themselves using the first drop downs values …

Pure magic, really.

Ok, it’s not magic … it’s jQuery … and even then, it’s really just as simple with pure JavaScript.  If your site does not already include jQuery in it’s list of requirements, then simply swap out the $() selector stuff with document.getElementById calls, and then write a simple ‘clone’ function (I’ll probably write something about doing it this way later on … right now, I’m hungry.)

Leave a Reply