Modifying the Jump Menu - Exercise

Contact Us or call 1-877-932-8228
Modifying the Jump Menu - Exercise

Modifying the Jump Menu

Duration: 15 to 25 minutes.

In this exercise, you will modify the jump menu from the demo so that it jumps to the selected page as soon as the user makes a selection.

  1. Open DynamicForms/Exercises/JumpMenus.html for editing.
  2. Remove the "GO" button from the form and remove all related JavaScript.
  3. Modify the JavaScript so that when the user selects a state, the jumpMenu() function is called immediately. Note that the target of the event is no longer the button, but the select menu itself, so you will have to modify the jumpMenu() function accordingly.
  4. Test the solution in a browser.
  5. Press the Back button and select the "SELECT A STATE" option. Did it try to go to http://www.50states.com/0.htm? Fix the function so that it doesn't try to change the location if the first option is selected.

Challenge

The jumpMenu() function isn't reusable. Why not? Fix the function so that it is portable and then modify the form accordingly.

Solution:

DynamicForms/Solutions/JumpMenus.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Jump Menus</title>
<script type="text/javascript" src="../../lib.js"></script>
<script type="text/javascript">
function jumpMenu(e) {
	var select = getTarget(e);
	var i = select.selectedIndex;
	if (i > 0 ) {
		var selection = select.options[i].value;
		var url = "http://www.50states.com/" + selection + ".htm";
		location.href = url;
	}
}

observeEvent(window,"load",function() {
		var stateSel = document.getElementById("state");
		observeEvent(stateSel,"change",jumpMenu);
	}
);
</script>
</head>
<body>
<form id="jumpform">
	<select name="state" id="state">
		<option value="0">--SELECT A STATE--</option>
		<option value="alabama">Alabama</option>
		<option value="illinois">Illinois</option>
		<option value="massachu">Massachusetts</option>
		<option value="montana">Montana</option>
		<option value="ncarolin">North Carolina</option>
		<option value="wvirgini">West Virginia</option>
	</select>
</form>
</body>
</html>

Challenge Solution:

DynamicForms/Solutions/JumpMenus-challenge.html
---- C O D E   O M I T T E D ----

<script type="text/javascript">
function jumpMenu(e) {
	var select = getTarget(e);
	var i = select.selectedIndex;
	if (i > 0 ) {
		var url = select.options[i].value;
		location.href = url;
	}
}

observeEvent(window,"load",function() {
		var stateSel = document.getElementById("state");
		observeEvent(stateSel,"change",jumpMenu);
	}
);
</script>
</head>
<body>
<form id="jumpform">
<select name="state" id="state">
	<option value="0">--SELECT A STATE--</option>
	<option value="http://www.50states.com/alabama.htm">Alabama</option>
	<option value="http://www.50states.com/illinois.htm">Illinois</option>
	<option value="http://www.50states.com/massachu.htm">Massachusetts</option>
	<option value="http://www.50states.com/montana.htm">Montana</option>
	<option value="http://www.50states.com/ncarolin.htm">North Carolina</option>
	<option value="http://www.50states.com/wvirgini.htm">West Virginia</option>
</select>
</form>
</body>
</html>
Next