Using JavaScript to Determine the User's Input to a Form

JavaScript accesses the user's input on a form via the properties of the individual form elements.  Changes in these properties are monitored by use of event handlers.  The properties and event handlers differ by type of form element, and these are summarized in the table below.  

Textbox, Textarea - For example, suppose there a form with a name of form1 and a textbox with the name of element1.  The user's input to this textbox is accessed by document.form1.element1.value.  If the user types something in the textbox and then clicks to another form element, the onChange event handler for the former textbox is activated.  One can test whether the user has entered anything in the textbox by if statements such as if (document.form1.element1.value=="") ... or if (document.form1.element1.value.length<1)

Drop Down List - The selectedIndex property indicates which option the user has chosen.  In Internet Explorer, but not Netscape 4.7, the value property of the <select> object is set equal to the value of the selected item.  For cross-browser compatibility, use of selectedIndex is therefore preferable for determining which (or whether an) item has been selected.  The value of the selected item can be determined by using selectedIndex as an index into the options array.  For example, for a form named "form1" and a select element named "bill", one would write document.form1.bill.options[document.form1.bill.selectedIndex].value

Radio Button, Checkbox - Use the checked attribute.  Note that the onClick event handler is triggered when a radio button or checkbox is clicked so that the checkbox or button is selected and also when a checkbox which is already selected is clicked, thereby eliminating the check mark.  Therefore, at least for a checkbox, one must also test the state of the box using the checked attribute.

Because radio buttons in a group must have the same name, they must have different values so that when the form information is submitted and name=value pairs are transmitted, the recipient of that information will know which radio button was checked.  Although a name=value pair is transmitted, the expression (document.form1.radiobuttonname.value) will be undefined so use the checked attribute with regard to the individual radio buttons to determine which button is checked.

Submit or Reset Button - When the submit button is clicked, the form input is submitted.  This triggers the onSubmit event handler; if one wants code to execute when this occurs, this code is placed in the <form> tag.  Alternatively, one can specify this code in the onClick event handler that would be placed in the <input type="submit"> tag.  Similarly, clicking the reset button resets the form to its original state, clearing any user input.  Therefore if one wants code to execute when this occurs, one can either put the code with the onReset event handler within the <form> tag or the onClick event handler of the <input type="reset"> tag.  Use of a return false in any of these contexts will prevent the default action from occurring.

Button

Form Element	Property	Event Handlers
Textbox, Textarea	value	onChange
Drop Down List	selectedIndex	onChange
Radio Button, Checkbox	checked	onClick
Submit, Reset, Button		onClick
Entire Form		onReset, onSubmit

Revised: June 2, 2008. Comments to William Pegram, bill@billpegram.com