<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0050)http://galaxy.cs.lamar.edu/~hkoh/3325/PR1ASOL.HTML -->
<HTML><HEAD><TITLE>JavaScript Example: Form Elements and Event Handling</TITLE>
<META content="text/html; charset=unicode" http-equiv=Content-Type><!-- Dynamic HTML: JavaScript Example
	3325Program-1A Solution:
	///////////////////////////////////////////////////////////
	a. Each sale item of four has its own Text-Field to specify
	   the quantity to be purchased.
	b. In addition, the T-Shirt Checkbox a Pull-down Menu to
	   Choose T-Shirt sixe: X-Large, Large, or Medium.
	c. The sale summary now shows the quantity of each bought.
	Notes:
	1. Variables are case-sensitive including HTML Attribute
	   values as in "Name=FootBallQty"
	2. Some useful Ecent Attributes and Their Tags:
		An HTML element is said to "get focus" when the user
		puts the mouse cursor over it and press the left button
		or the user tabs to the element.
		An HTML element becomes "blurred" when the user moves the
		cursor away from the element and either press the left button
		or tabs away from the element.

	Attributes	Tag		Description
	1. OnAbort	<img>		The user aborts loading an image
	2. OnBlur	<body>		A document loses the input focus
			<frameset>	A frameset loses an input focus.
			<frame>		A frame loses an input focus.
			<input type=text>
					A text field loses an input focus
			<textarea>	A text area loses an input focus
			<select>	A selection element loses the input focus
	3. OnChange	<input type=text>
					A text field is changed and loses the input focus
			<textarea>	A text area is changed and loses the input focus.
			<select>	A selection element is changed and loses the input focus.
	4. OnClick	<a>		The user clicks on a link
			<input type=button>
					A button is pressed
			<input type=submit>
					A submit button is pressed.
			<input type=reset>
					A reset button is pressed
			<input type=checkbox>
					A checkbox is pressed.
			<input type=radio>
					A radio button is pressed.
	5. OnFocus	<body>		A document receives the input focus.
			<frameset>	A frameset receives the input focus.
			<frame>		A frame receives the input focus.
			<input type=text> A text field receives the input fouc.
			<textarea>	A textarea receives the input focus.
			<select>	A selection element receives the input focus.
	
	//////////////////////////////////////////////////////////
	1. use of form elements for user input interface
	   button: for initiating an event handling (onClick attribute)
	   checkbox: for choosing items for processing
	   reset: for automatically clearing form elements to start over
	   text field: for obtaining short info from the user
	   text area: for displaying processing results
	2. defining functions for event handling.
	   It should appear in the <HEAD> section while call statements
	   should normally appear in the <BODY> section.
	   Functions can have any number of parameters all passed
	   by value.
	   So, any parameter that is being altered inside a function
	   called is NOT going to be reflected to the caller.
	-->
<SCRIPT language=JavaScript>
	<!--	Start of JavaScript code
	function process()
	  {
	  var TSize = document.store.sizeMenu.selectedIndex;
	  var tShirtPrice = [12, 10, 8];
	  var tShirtSize =  ["X-Large", "Large", "Medium"];
 	  var items = ["T-shirts", "Baseball Cap", "Football Cap", "Gloves"];
	  var contents = "";
	  var total = 0, tax = 0, state;
	  with(document.store)	// simplifies property references
	    {
	     state = stateMenu.selectedIndex;
	     if (state==0)
		{
		alert ("You Must Select Your State First.\nThank You!!!");
		return;
		}
	     if (item1.checked)
		{ if (TSize==0)
	 	  {
		  alert("You Must Choose T-Shirt Size.\nThank You!!!");
		  return;
		  }
		  contents += items[0] + ":" + tShirtSize[TSize-1];
		  contents += ":" + tShirtQty.value +  "\n";
		  total += tShirtPrice[TSize-1]*parseInt(tShirtQty.value);	
		  // price is given in 'value' attribute
		}
	     if (item2.checked)
		{ contents += items[1] + ":" + baseBallQty.value + "\n";
		  total += parseInt(item2.value)*parseInt(baseBallQty.value);
		}
	     if (elements[5].checked)	// elements[5] is 'item3'
		{ contents += items[2] + ":" + footBallQty.value + "\n";
		  total += parseInt(elements[5].value)*parseInt(footBallQty.value);
		}
	     if (elements[7].checked)
		{ contents += items[3] + ":" + glovesQty.value + "\n";
		  total += parseInt(elements[7].value)*parseInt(glovesQty.value);
		}
	     if (contents == "") 
		{
		  contents = "You did not buy any items";
		  alert (contents);
		}
	     else
		{ tax = stateMenu.options[state].value*total/100.0;
		  contents = "You bought the following items.\n" + contents;
		  contents += "-----------------------";
		  contents += "\nTotal price without tax: $" + total;
		  contents += "\nState Sales Tax:::        $" + tax;
		  total += tax;
		  contents += "\nTotal price after tax::  $" + total;
		  contents += "\nThank you very much.\n";
		}
	     elements[12].value = contents;	// to display in text area.
		// same as: result.value = contents;
	    }	// end of 'with'
	  }	// end of function process()
	function texasSpecial()
	  { alert ("Your State is a Special State: TEXAS\n");
	    showState();
	  }
	function showState()
	  {
	    var states = ["TEXAS", "LOUISIANA", "OKLAHOMA", "ARKANSAS"];
	    var select = document.store.stateMenu.selectedIndex;
	    if (select == 0)
	      alert ("You must pick the state you live!!!");
	    else
	      {
		var contents = " Your State is ";
		contents += states[select-1];
		contents += "\n The State has sales tax rate of ";
		contents += document.store.stateMenu.options[select].value;
		contents += "%\n Thank You!!!";
		if ( !window.confirm (contents))
		      alert ("Choose Your State Again!\nThank You!");
	      }
	  }	// end of function showState()
		// end of JavaScript
	//-->
	</SCRIPT>

<META name=GENERATOR content="MSHTML 9.00.8112.16437"></HEAD>
<BODY><B>
<CENTER><FONT color=blue>Choose as many as you wish to buy and <BR>click SUBMIT 
Button for purchasing <BR>or CLEAR to start over. <BR>Thank you. <BR><BR></FONT>
<FORM name=store>T-Shirt <INPUT name=item1 type=checkbox> How Many T-Shirts Do 
You Buy? <INPUT name=tShirtQty value=1 size=5> <BR><SELECT name=sizeMenu> 
  <OPTION selected>Choose T-Shirt Size<OPTION>X-Large price=$12<OPTION>Large 
  price=$10<OPTION>Medium price=$8</OPTION></SELECT> <BR><BR>Baseball Cap <INPUT 
name=item2 value=12 type=checkbox> How Many Baseball Caps Do You Buy? <INPUT 
name=baseBallQty value=1 size=5> <BR>Football Cap <INPUT name=item3 value=15 
type=checkbox> How Many Football Caps Do you Buy? <INPUT name=footBallQty 
value=1 size=5> <BR>Gloves <INPUT name=item4 value=20 type=checkbox> How Many 
Pairs of Gloves Do You Buy? <INPUT name=glovesQty value=1 size=5> 
<BR><BR><SELECT onchange=showState() name=stateMenu> <OPTION selected>Pick 
  Your State<OPTION value=8.25 onChange="texasSpecial()">Texas<OPTION 
  value=5.0>Louisiana<OPTION value=6.5>Oklahoma<OPTION 
  value=4.0>Arkansas</OPTION></SELECT> <BR><INPUT onclick=process() value=SUBMIT type=button> <INPUT value=CLEAR type=reset> <BR><TEXTAREA cols=40 rows=10 name=result>	  
	  Happy Shopping	</TEXTAREA> </FORM></CENTER></B></BODY></HTML>