Prevent Default Value Selections in a List Box

A pretty typical scenario is a drop-down list box with a standard default selection that instructs the user to choose an option. It is enclosed in

tags, which the user will submit and looks something like this:

 

However, you don’t want the user picking the default response of “Baseball Player Answer”. A good way to prevent this selection from happening is to handle the submit yourself and check the value of the SELECT box. You change the FORM tag onsubmit event so the new tag looks like this:

 

Note that when the onsubmit event is fired it will now attempt to call the checkvalue function when the “Submit Answer” button is pressed. You define this short JavaScript routine on the client-side like this:

 

If the default option at index 0 is selected, you pop up a message and cancel the request. This type of simple client-side validation is useful because it can prevent unnecessary roundtrips to the server.

Share the Post:
Share on facebook
Share on twitter
Share on linkedin

Overview

Recent Articles: