A combo box (combobox) can automatically submit an HTML form when the current item is changed by the user

by Curtis Krauskopf

Sometimes web users demand features that aren't standard in web user interfaces. One of those times is when the user wants a combo box (sometimes also called a combobox, a select box or selectbox) to automatically submit web forms when the current item in the combo box is changed.

Figure 1: A live example of
a standard submit button

The standard way of submitting a web form is with a submit button (figure 1). As shown in this live example, the submit button has customized text that helps the user understand the purpose of the submit action.

Users that want an automatically submitted web form are looking for a shortcut. They don't want to select a combo box item and THEN go through all the hassle of clicking on a submit button.

Automatic combo box forms are particularly suited to the following situations:

When there are a limited number of choices
When the selection of any particular choice does not doom the user to an irreversible action. One example of that would be: "Are you sure you want to delete this transaction?".
When the user is on an Intranet or on a fast Internet connection that does not have a significant turnaround time for processing the submitted page and refreshing the page (or rendering a new page).
When there are few (or no) other form elements on the web page.

Figure 2 shows a combo box that has been rigged to automatically submit when any of the combo box items are chosen.

Figure 2: An example combo box
that will automatically submit
when an item is selected.

The source code for Figure 2 is shown in Figure 3. All of the code in Figure 3 can be selected by clicking anywhere in the frame.

<form name=frmTest action="NextPage.asp" method=POST>
  <p>
  <select name=ComboName size=1 onChange="frmTest.submit();">
    <option value="" SELECTED>Choose One 
    <option value="1">Numbers
    <option value="2">Fruit
    <option value="3">Animals
    <option>Rock
    <option>Scissors
    <option>Paper
    <option value="H">Hearts
    <option value="D">Diamonds
    <option value="C">Clubs
    <option value="S">Spades
  </select>
  </p>
</form>

Figure 3: Source code for an example combo box. Click anywhere in the frame to highlight all of the text.

Notes:

The onChange="frmTest.submit();" select option is the magic that makes this work. Since this is in Javascript, the capitalization of the parameter is important. Notice that the capitalization of frmTest matches the name of the form.
If the user does not have a Javascript enabled browser or the user wants to choose the default option, then this method will not work. Because either of those cases are common, the form should contain a SUBMIT button that forces the page to be submitted.
The JavaScript code is surrounded by double quotes "frmTest.submit();". This is part of the syntax for this method. It is very easy to forget to surround the parameter with quotes.

Go Back to the WebApp Server and ASP Tips Page

Other Popular DataFlex topics at The Database Managers, Inc.: