jQuery Tutorial: Submitting a User-Defined Set of Input (e.g. File Uploads, Checkboxes)

Hot on the tail of Saturday’s Taming the Wild Wild Web blog entry comes another jQuery tutorial as to aid developers in their behavior-level endeavors.

Tonight, we’ll tackle how one can submit a user-defined set of input, like file uploads or an array of checkboxes, without sacrificing elements of onscreen presentation.

Not quite following? Here’s a hypothetical to help bridge you along:

Suppose we had a simple file upload form that allowed users of our site to upload no more than ten images. The files would have to be processed all at once, however, screen real estate is tight and there is no reason why ten ugly file input fields should mar the front-end of our display if there is a great chance that majority of these will go unused. By having the user select the amount of files they want to upload, we can adjust the display of the screen without forcing a page reload to delegate the proper amount of fields that each user requires. If the user changes their mind mid-stream (whether they want to add more or lessen the amount file entries), our script will adjust the display accordingly without losing their already entered file paths.

Sounds good? Then let’s take a look at our form:

Nothing special going on here. Just a typical form with a select box to govern the number of files to be uploaded, followed by ten file upload fields (the maximum amount allocated for our project). The class imageFile acts as a hook for our jQuery wrappers. Notice that the file upload name attributes end with an array minded sequencing beginning with 0 rather than 1. This is important for the backend handling of these uploads, however we will not get into that here.

This is a good time to note that if you plan on using this for a real, production-level file upload script, be sure to take all proper precautions to avoid malicious files being placed on your server. In the live demo I implement absolutely no checks only because it is a dummy form. No files will be processed there.

Now let’s see how our jQuery script can add some magic to this form:

Our onChange() function is the engine here. It simply grabs the value of whatever option attribute is selected and proceeds to slice up the wrapped set accordingly. File upload fields from the start of our input list up to and including the selected value will be shown, while the rest will be hidden from screen display.

We also make sure to run this function on page load in order to hide all but the first input field (there is no selected attribute in play on this form, and as such, the default selected value will be the first option present in our select element).

And there you have it. Short, simple and sweet. The user has the illusory power of governing their screen display and input options with this form setup. By making them declare how many files they wish to upload, or whatever situation you can think of that can effectively use this method, you are essentially adding tighter controls to your backend processing as well. Without counting the files that will post, you will already have a good metric for the user’s expected amount of input. Of course users can leave fields empty, but any backend script should check such happening by default.

That concludes this jQuery simple solution tutorial. View the live demo of this example at the flexible philosophy.

Jeffrey Olchovy is a Web developer, designer and marketing strategist.