<html> <head> <title>Example 6.11</title> <script> function pickEntree(picked) { var entree = document.getElementById(picked).value; document.getElementById('main_dish').innerHTML = entree; } function customerInfo(cName) { var dinerName = document.getElementById(cName).value; document.getElementById('cust_name').innerHTML = dinerName; } function customerPhone(cell) { var phone = document.getElementById(cell).value; document.getElementById('cell_phone').innerHTML = phone; } function pickSides() { 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"> <!-- body { margin: 5%; } --> </style> </head> <body> <form name="order" method = "post" id = "dinner" action="mailto:manager@mealstogo.net?subject=Dinner Order" enctype="text/plain" > <input type ="hidden" name ="meal" id ="dinner" value = "dinner choice" /> <h2><br />Select Your Meal</h2> <div style="width: 80%;"> <div style="width: 40%; float: left;"> <fieldset><legend>Your Information</legend> <h3>Enter the following information:</h3> <label>Your name:<br /></label> <input type="text" name="dinername" id="dinername" size = "30" value = ""/> <input type ="button" onclick="customerInfo('dinername')" value = "ok"></button> <p>We will call your cell phone when your order is ready.<br /> <label>Phone:<br /> </label><input type="text" name="phone" id="phone" size="30" value = ""/></label> <input type ="button" onclick="customerPhone('phone')" value = "ok"></button><br /></fieldset></div> <div style=" width: 30%; float: left;"><fieldset><legend>Main Course</legend> <h3>Pick your main course:</h3> <input type="radio" name="entree" id="steak" value="Rib-Eye Steak" onclick="pickEntree('steak')">Rib-Eye Steak<br /> <input type="radio" name="entree" id="chicken" value="Fried Chicken" onclick="pickEntree('chicken')">Fried Chicken<br /> <input type="radio" name="entree" id="veggie" value="Veggie Platter" onclick="pickEntree('veggie')">Vegetarian Fried Tofu<br /> <input type="radio" name="entree" id="fish" value="Broiled Salmon" onclick="pickEntree('fish')">Broiled Salmon<br /><br /> </fieldset></div> <div style="width: 30%; float: left;"><fieldset><legend>Side Dishes</legend> <h3>Pick two side dishes</h3> <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 /> <input type ="button" onclick="pickSides()" value = "Enter my side dish selections" "></button></fieldset></div> </div> <div style="clear:both;"></div> <div ><input type="reset" value="ooops! I made a mistake. Let me start over."><br /></div> <div style="width: 40%; float: left;"><h3>Your meal:</h3> <p>Your name: <span id = "cust_name"> </span> <br /> Your contact phone: <span id = "cell_phone"> </span> <br /> Entree selected: <span id = "main_dish"> </span> <br /> First side dish selected: <span id = "side_one"> </span> <br /> Second side dish selected: <span id = "side_two"> </span> </p></div> <div style="width: 40%; float: left;"><h3>Comments or questions:</h3> <textarea name = "dinnerorder" id = "dinner" rows = "6" cols = "40">Enter your comments or questions here</textarea> </div><div style="clear:both;"></div> <div><input type = "submit" value="submit my order"><br /></div> </form> </body> </html>