Multi-select for JavaScript form serialization

2006-08-25 00:54:00

I just got an e-mail yesterday from Craig Anderson at SitePoint, letting me know that one of the folks who bought my book had noticed a small deficiency with the function that handles form serialization for the example code in the book -- the mellifluously named 'formData2QueryString.' (Man, that just rolls off the tongue, doesn't it?) The code for this function is a also in my downloads section here at Fleegix.org.

The guy wanted multi-selects -- which I have always avoided like the plague because they confuse the hell out of novice users, and annoy the hell out of advanced users when their fingers slip and deselect all those 17 different, laboriously selected options. Not that that's every happened to me. No, I'm just being an advocate for the end-user here, really.

In any case, Craig was cool enough to add the multi-select case himself, and was just submitting it as a patch. The only problem was that he had implemented it the way raw form data appear on the server for items with multiple values, e.g.:


This was an issue because the original implementation added a little 'magic' to things with multiple values like banks of checkboxes to the values would get collapsed into a set of comma-delimited values, like this:


There are a few different reasons you might want to do this -- for example if you don't want to have to wrangle the same query-string-parsing code for multiple-values in several different server-side programming languages.

However, upon reflection it seemed like the best behavior for the default is probably just to duplicate the way the browser would submit it in a normal form. Then you can always allow people to override the default behavior to get the original 'magic' behavior.

So, I sat down and implemented the 'unmagic' behavior for checkboxes, and added an optional parameter that allows you to pass in a JavaScript object containing formatting options. So now, if you call the function like this:

var str = formData2QueryString(formRef);

You'll get the correct, raw form data with the multiple, redundant variable names in the string for multiple values.

If you call it like this:

var str = formData2QueryString(formRef, { 'collapseMulti': true });

It will collapse the multiple values into a comma-delimited list with a single variable name in the string.

I also used this opportunity to add a bit of actual JSDoc-style documentation at the top, so it looks all prim and proper now. Again, the code is available here in the downloads section. Please do let me know of any bugs that you find. Very nice work Craig, and thanks for the help.


voldmar (2006-09-12)
Does your function work with non-ASCII symbols? Wouldn't be using of encodeURI a better solution?


This is the blog for Matthew Eernisse. I currently work at Yammer as a developer, working mostly with JavaScript. All opinions expressed here are my own, not my employer's.


Previous posts

All previous posts ยป

This blog is a GeddyJS application.