Obtaining User Input Through Forms

HTML Forms

Form elements are often used in mapping mashups to:

• provide the user with predefined mapping options,
• allow the user to enter data to be added to the database and/or map.

Guess where I'm sending you next. That's right, w3schools. Work through w3schools' tutorial on HTML forms, and then come back to the lesson to see how form entries can be processed.

Handling form submissions

Form data are typically processed in one of two ways. The first method was briefly discussed on the w3schools page you just read and involves setting the form element's action attribute to the name of a server-side (e.g., PHP or ASP) script that will handle the user's entries. There are situations when this method is desirable (e.g., if the user's entries are to be simply added to a database on the web server).

However, I'd like to focus on using forms to give the user a set of mapping options. These options could be categories of features to display, ranges of dates, or regions to zoom to. In that context, where selections made from the form affect the appearance of a map on the same page as the form, sending the user's input to a server-side script is not actually necessary.

So, let's move to a different method that makes more sense for a mapping application. This method involves using some of the DOM and Dynamic HTML concepts you learned about earlier in the course. Specifically, a button can be added to the form and its onclick event handler can be set to the name of some JavaScript function stored in the document (or in an external file that is referenced by the document). That function can then obtain the user's input from the form and act accordingly, whether that means adding overlays from some data source, zooming into a region or something else.

Have a look at this example that demonstrates the usage of four commonly used form elements: text boxes, drop-down lists, radio buttons, and checkboxes. First, be sure to note the following aspects of the HTML that differ from the examples in the w3schools tutorial or may not have caught your attention:

• All elements in the form are nested within a fieldset element. While not strictly necessary and thus often omitted, this element is important in providing clarity on your document's organization to assistive technologies like screen readers.
• Labels are applied by nesting the input and select elements inside label elements for the same reason.
• Each input (and select) element is given a name.
• To define a group of related radio buttons or checkboxes, each element must have the same name.
• The button's onclick attribute is set to the name of a JS function defined in the head of the document (in this case, called process).

The process() function obtains the values entered in the text boxes and the selections made from the other controls. It begins by obtaining a reference to the form element by its ID ("myform").

The script then takes advantage of the fact that the elements of a form are available in JavaScript as properties of that form object. In other words, the element named "firstname" can be accessed using the syntax frm.firstname, the element named "country" can be accessed using frm.country, etc.

Obtaining the string entered into a text box (the two name fields in the example) or the option selected from a drop-down list (the country list) is as simple as reading the element's value property.

Determining which option the user selected in a set of radio buttons is a bit more complex. In the example, each radio button has its name attribute set to "six". Thus, the expression frm.six returns not just one element, but all the elements having that name (as an array). The general strategy then is as follows:

1. Set up a loop from 0 to one less than the length of the array.
2. Inside the loop, check to see if the button at position i is checked.
3. If the button is checked, read the button's value property, then break out of the loop. It is good practice to break out of the loop since only one option can be selected from a group of radio buttons. Once you've found that option, there's no need to continue looping.

Checkboxes can be handled in much the same way as radio buttons with the exception that the user can select multiple options from a group of checkboxes. The approach shown in the example is to create a list of the selected boxes separated by commas. The loop contains no break statement since all the boxes must be examined. After the loop is complete, the last two characters in the list string (a comma and space that aren't necessary because they come after the last selected box) are removed.

Now that you've gone through some of the basics of using HTML forms to obtain user input, let's put this information into a web-mapping context.