Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2
You are here: irt.org | Articles | JavaScript | Form | Dropdown Menus [ previous next ]
Published on: Thursday 22nd May 1997 By: Martin Webb
Using HTML it is very easy to create a dropdown menu, for example:
<form> <select> <option> Entry 0 <option> Entry 1 </select> </form>
There is currently no way that you can adjust the colour, height or font of form elements, but you can adjust the width by including extra spaces:
<form> <select> <option> Entry 0 <option> Entry 1 </select> </form>
You can turn a selection list into a scrolling list by adding a size property to the SELECT tag:
<form> <select size=3> <option> Entry 0 <option> Entry 1 <option> Entry 2 <option> Entry 3 </select> </form>
In a selection list, by default, the first option in the list is the selected option, unless you specify another option as the selected option:
<form> <select> <option> Entry 0 <option selected > Entry 1 <option> Entry 2 </select> </form>
As this form stands, it cannot do anything. We need to add either buttons or JavaScript. First buttons:
<form> <select> <option> Entry 0 <option selected> Entry 1 <option> Entry 2 </select> <input type="submit" > <input type="reset" > </form>
When the reset button is clicked, the default selection is reselected. The submit button will still not do anything as no action or method is associated with the form.
We can also add values to the button and option elements:
<form> <select> <option value="Option 0" > Entry 0 <option value="Option 1" > Entry 1 </select> <input type="submit" value="Enter" > <input type="reset" value="Clear" > </form>
When using JavaScript to access a form, each form element should be named to allow easy access.:
<form name="formName1" > <select name="selectName1" > <option value="Option 0" > Entry 0 <option value="Option 1" > Entry 1 </select> <input name="submitName1" type="submit" value="Enter" > <input name="resetName1" type="reset" value="Clear" > </form>
Note, the option elements do not need to be named as they are accessed through the options array of the form.
The JavaScript events can now be added to our simple form:
<form
name="formName2"
onSubmit="alert('submit')"
onReset="alert('reset')"
>
<select
name="selectName2"
onBlur="alert('blur')"
onFocus="alert('focus')"
onChange="alert('change')"
>
<option
value="Option 0"
>
Entry 0
<option
value="Option 1"
>
Entry 1
</select>
<input
name="submitName2"
type="submit"
value="Enter"
onBlur="alert('blur')"
onClick="alert('click')"
onFocus="alert('focus')"
>
<input
name="resetName2"
type="reset"
value="Clear"
onBlur="alert('blur')"
onClick="alert('click')"
onFocus="alert('focus')"
>
</form>Note, the onReset and the button onBlur events are not supported in Internet Explorer 3.0 (i.e. JavaScript 1.0).
The onBlur and onFocus events can quite easily be utilised for validating form values. For the purposes of this article they will not be discussed further.
Using JavaScript we can access the index of the currently selected option and, if necssary, the default selection, using the following script:
And then the selected options value and text properties:
The following simple example uses the onChange event to demonstate some of what we have learnt so far:
<script language="JavaScript"><!--
function onChange() {
var Current =
document.formName3.selectName3.selectedIndex;
document.formName3.currentText3.value =
document.formName3.selectName3.options[Current].text;
document.formName3.currentValue3.value =
document.formName3.selectName3.options[Current].value;
}
//--></script>
<form
name="formName3"
onSubmit="return false;"
>
<select
name="selectName3"
onChange="onChange()"
>
<option
value="Option 0"
>
Entry 0
<option
value="Option 1"
>
Entry 1
</select>
<input
name="resetName3"
type="reset"
value="Clear"
>
<br><br>
Current Text:
<input
name="currentText3"
type="text"
value=""
>
Current Value:
<input
name="currentValue3"
type="text"
value=""
>
</form>Note, to stop the above form actually attempting to pass data back to the server it is necessary to return false within the forms onSubmit and the submits onClick events.
The following example uses the onClick event instead:
<script language="JavaScript"><!--
function onClick() {
var Current =
document.formName4.selectName4.selectedIndex;
document.formName4.currentText4.value =
document.formName4.selectName4.options[Current].text;
document.formName4.currentValue4.value =
document.formName4.selectName4.options[Current].value;
}
//--></script>
<form
name="formName4"
onSubmit="return false;"
>
<select
name="selectName4"
>
<option
value="Option 0"
>
Entry 0
<option
value="Option 1"
>
Entry 1
</select>
<input
name="submitName4"
type="submit"
value="Enter"
onClick="onClick();return false;"
>
<input
name="resetName4"
type="reset"
value="Clear"
>
<br><br>
Current Text:
<input
name="currentText4"
type="text"
value=""
>
Current Value:
<input
name="currentValue4"
type="text"
value=""
>
</form>Okay, so now we can access the selected options value and text properties lets make a useful dropdown menu:
<script language="JavaScript"><!--
function gotoURL() {
var Current =
document.formName5.selectName5.selectedIndex;
window.location.href =
document.formName5.selectName5.options[Current].value;
return false;
}
//--></script>
<form
name="formName5"
>
<select
name="selectName5"
>
<option
value="../../faq.htm"
>
Answers to some Frequently Asked Questions
<option
value="../../articles.htm"
>
Listing of articles, tutorials...
</select>
<input
name="submitName5"
type="submit"
value="Go"
onClick="return gotoURL()"
>
</form>One trick used by experience developers is to pass a form reference to the function:
<script language="JavaScript"><!--
function goto_URL(object) {
window.location.href =
object.options[object.selectedIndex].value;
return false;
}
//--></script>
<form
name="formName6"
>
<select
name="selectName6"
>
<option
value="../../faq.htm"
>
Answers to some Frequently Asked Questions
<option
value="../../articles.htm"
>
Listing of articles, tutorials...
</select>
<input
name="submitName6"
type="submit"
value="Go"
onClick="return goto_URL(this.form.selectName6)"
>
</form>For the minimalists amongst you, how about the following, which also updates the status bar text:
<form
name="formName7"
>
<select
name="selectName7"
onChange="
self.status =
formName7.selectName7.options[
formName7.selectName7.selectedIndex
].text + ' at ' +
formName7.selectName7.options[
formName7.selectName7.selectedIndex
].value"
>
<option
value="../../faq.htm"
>
Answers to some Frequently Asked Questions
<option
value="../../articles.htm"
>
Listing of articles, tutorials...
</select>
<input
name="submitName"
type="submit"
value="Go"
onClick="
window.location.href =
formName7.selectName7.options[
formName7.selectName7.selectedIndex
].value;
return false"
>
</form>Finally, an image instead of a button:
<script language="JavaScript"><!--
function go() {
window.location.href =
document.formName8.selectName8.options[
document.formName8.selectName8.selectedIndex
].value;
}
//--></script>
<form
name="formName8"
>
<select
name="selectName8"
onChange="
self.status =
formName8.selectName8.options[
formName8.selectName8.selectedIndex
].text + ' at ' +
formName8.selectName8.options[
formName8.selectName8.selectedIndex
].value"
>
<option
value="../../faq.htm"
>
Answers to some Frequently Asked Questions
<option
value="../../articles.htm"
>
Listing of articles, tutorials...
</select>
<a
href="JavaScript:go()"
>
<img
src="images/go.gif"
border="0"
width="26"
height="26"
alt="Go"
></a>
</form>The following article, Dropdown Menus #2, describes how to use multiple select options, and how to add, remove and replace options.
Creating 'Encoded' Name & Value Pairs
Passing data from one form to another
Addressing Form Field Validation with Regular Expressions and JavaScript 1.2