It’s Friday, so that means it’s time to take a quick break and write something. Today’s topic: Using Javascript in Web Forms

Background
One of my current web-projects, Palmer Datacat (note: authentication required), is an online collection of data, metadata, and dictionaries of units and attributes. One feature we are implementing is the ability to add and/or edit any dictionary item directly from the web page. This requires using html-built web forms to take in user data and send it to a script that processes it and writes to a database.

Problem
Pure html web forms are static. That is, they offer no elements of interactivity. This is not a problem when the form should always contain the same fields. For instance, a guestbook form is static when it always has input fields for name, email, and comment.
However, data about an attribute (in the attribute dictionary) may differ depending on that attribute’s measurement scale. For example, attributes that are “nominal” and “ordinal” require different data input than those that are “interval” and “ratio”. The “datetime” attribute also requires its own specific input fields.

How can we build a form that only shows the needed fields based on previous input values?

Solution: Javascript!
Javascript is a ubiquitous client-side programming language enabled by default in most web browsers. With javascript programs, you can add dynamic effects and layers of interactivity to your web pages.

Before building the attribute form, I did a little research online to learn more about javascript and to see if there were any helpful tools for building javascript-integrated web forms.

quirksmode.org
Quirksmode may be the best javascript reference I’ve found. The author of this site touches many subjects in friendly depth, such as event-handling and best-practices for writing javascript code. I would not have been able to build the attribute form as quickly as I did without consulting this site first.

Form Assembly
Form Assembly has a Form Builder, which is an amazing tool for building a dynamic web form. It’s geared for html-newbies, but it is the best form-generation tool I’ve ever found (most of them are bad). The Form Builder builds compliant javascript-enable forms that work in any browser. (Note that the Form Builder tool does not work in Safari because it requires a built-in XSLT engine available to javascript which Safari lacks. The forms it builds, however, do work).

The features offered by Form Assembly include:

  • Switch behavior – toggling on/off of certain fields based on previous input
  • Repeat behavior – Ability to add/remove fields if more/less data is needed
  • Pagination – Split the form on multiple pages
  • Validation – Client-side form validation

Form Assembly offers a large javascript file that contains functions for each of these behaviors. You do not need to use the Form Builder tool in order to achieve this functionality. Rather, you could develop your own web form from scratch, and attach certain functionality to given fields using class naming conventions.

The downside to Form Assembly is that the javascript file is hefty, with over 1000 lines of messy code and weighing in at 43kb. Though I was initally amazed with the Form Assembly library, I ultimately decided not to use it. I reasoned I could build my own library of javascript functions geared toward specific form elements. This not only keeps the file size low (7kb), but also optimizes the script’s performance since it is not a generic one-size-fits-all library which must accomodate anything.

Prototype
Another javascript library I’ve found is Prototype which appears to be an advanced javascript-based framework for web developers. Prototype is relatively new and is seeing heavy use by lots of “Web2.0” web sites. Using and building on Prototype, you can do lots of cool effects and tricks. Unfortunately, documentation is currently lacking.

Attribute Form
Because the palmer development site is password-protected, I’ve duplicated the attribute form on my local working site. My javascript code is also available.
The two behaviors I’ve implemented are: Switch and Repeat.

Switch Behavior
When clicking on a Measurement Scale value (nominal, ordinal, interval, ratio, and datetime), a different box of fields may show. This is accomplished by registering an “onclick” event to each of the five checkboxes. The javascript then detects an “onclick” event and calls a function toggleMeasurementScale. This function displays and hides certain html boxes (divs) by accessing their styles.

The same function applies in the NonNumericDomain box (for nominal and ordinal measurement scales). When selecting an option in the drop-down box, certain fields will display.

Repeat Behavior
With “nominal” or “ordinal” selected for Measurement Scale, and “Code Definition” selected for Non Numeric Domain, a table of input fields (with 2 columns) appears. This table is used to define a codeset, being a list of pairings of code values and their definitions. Because different attributes may differ in the size of their codesets, an “Add a row” link helps implement a dynamic table that can increase or decrease in size to accomodate the size of an attribute’s code set.

To accomplish this, the “Add a row” link is not a conventional hyperlink like most links on web pages. Instead of taking you to a new page, it instead calls a javascript function called addRowTableCodeDefinition. This function generates html for the new row of input forms and appends it the table element. Likewise, the “Remove” link removes the chunk of html from the table element.

Will this form work everywhere?
Unfortunately no. However, with most modern browsers, the answer is yes, as long as javascript is enabled (which it is by default). I tested this form in Win/IE, Firefox, and Safari, and it works fine in all of them. The form will not work in earlier browsers, such as Netscape 4 and IE 4… but seriously, who still uses these browsers?

Javascript is an added luxury. Not all platforms (mobile phones, pdas, etc.) may have it implemented, and thus having a site rely on javascript could limit your user-base. In our case (and most cases), this is not a worry. Our targeted audience are Palmer personnel with proper privileges to add/edit/delete items from our online dictionaries. Such work should always be done from a computer terminal, and with a modern browser.

Summary
Javascript can be a great aid to building dynamic web forms, and in addition, dynamic web pages. Moreover, as an integral part of AJAX (Asynchronous Javscript and XML), javascript is seeing heavy use by many latest-and-greatest web projects, such as Google Maps. This new frontier of web development helps ensure that javascript is here to stay, and will be around for a long time. Thus, it is advantageous as a web developer to learn where and how to use javascript, whether for enhancing usability or site aesthetics. Building the javascript-enabled attribute form was a great exercise for me to get started, and I am looking forward to developing more javascript applications where needed.