67 lines
2.6 KiB
HTML
67 lines
2.6 KiB
HTML
|
<html>
|
||
|
|
<head>
|
||
|
|
<title>Example 6.6</title>
|
||
|
|
<script>
|
||
|
|
function pick_entree(picked)
|
||
|
|
{
|
||
|
|
var entree = document.getElementById(picked).value;
|
||
|
|
document.getElementById('main_dish').innerHTML = entree;
|
||
|
|
}
|
||
|
|
function pick_sides()
|
||
|
|
{
|
||
|
|
var flag = false;
|
||
|
|
var i =0;
|
||
|
|
var side1 = "";
|
||
|
|
var side2 = "";
|
||
|
|
for (i = 1; i <= 7; i++)
|
||
|
|
{
|
||
|
|
if ((document.getElementById(i).checked == true) && (flag == false))
|
||
|
|
{
|
||
|
|
side1 = document.getElementById(i).value;
|
||
|
|
flag = true;
|
||
|
|
}
|
||
|
|
else if ((document.getElementById(i).checked == true) && (flag == true))
|
||
|
|
side2 = document.getElementById(i).value;
|
||
|
|
|
||
|
|
}
|
||
|
|
document.getElementById('side_one').innerHTML = side1;
|
||
|
|
document.getElementById('side_two').innerHTML = side2;
|
||
|
|
}
|
||
|
|
|
||
|
|
</script>
|
||
|
|
<style type="text/css">
|
||
|
|
<!--
|
||
|
|
.style2 {color: #4f81bd}
|
||
|
|
.style4 {color: #4f81bd; font-weight: bold; }
|
||
|
|
-->
|
||
|
|
</style>
|
||
|
|
</head>
|
||
|
|
|
||
|
|
<body>
|
||
|
|
<table align = "center" width = "60%">
|
||
|
|
<form name="menu">
|
||
|
|
<tr><td colspan = "2"><h2><br />Select Your Meal</h2></td></tr>
|
||
|
|
<tr><td>Pick your main course:<br />
|
||
|
|
<input type="radio" name="entree" id="steak" value="Rib-Eye Steak" onclick="pick_entree('steak')">Rib-Eye Steak<br />
|
||
|
|
<input type="radio" name="entree" id="chicken" value="Fried Chicken" onclick="pick_entree('chicken')">Fried Chicken<br />
|
||
|
|
<input type="radio" name="entree" id="veggie" value="Veggie Platter" onclick="pick_entree('veggie')">Vegetarian Fried Tofu<br />
|
||
|
|
<input type="radio" name="entree" id="fish" value="Broiled Salmon" onclick="pick_entree('fish')">Broiled Salmon<br />
|
||
|
|
</td>
|
||
|
|
<td> Pick two side dishes<br />
|
||
|
|
<input type="checkbox" name="sides" id="1" value="French Fries" >French Fries<br />
|
||
|
|
<input type="checkbox" name="sides" id="2" value="Baked Potato">Baked Potato<br />
|
||
|
|
<input type="checkbox" name="sides" id="3" value="Cole Slaw">Cole Slaw<br />
|
||
|
|
<input type="checkbox" name="sides" id="4" value="Garden Salad">Garden Salad<br />
|
||
|
|
<input type="checkbox" name="sides" id="5" value="Mixed Vegetables">Mixed Vegetables<br />
|
||
|
|
<input type="checkbox" name="sides" id="6" value="Macaroni and Cheese">Macaroni and Cheese<br />
|
||
|
|
<input type="checkbox" name="sides" id="7" value="Applesauce">Applesauce<br /></td></tr>
|
||
|
|
<tr><td><input type="reset" value="ooops! Let me change my selections"> </td>
|
||
|
|
<td><input type ="button" onclick="pick_sides()" value = "Enter my side dish selections" "></button>
|
||
|
|
</td></tr>
|
||
|
|
<tr><td colspan = "2"><h2><br />Entree selected: <span id = "main_dish"> </span> </h2>
|
||
|
|
<h2>First side dish selected: <span id = "side_one"> </span> </h2>
|
||
|
|
<h2>Second side dish selected: <span id = "side_two"> </span> </h2></td></tr>
|
||
|
|
</table></form>
|
||
|
|
</body>
|
||
|
|
</html>
|