COSC3325 Program-1A Dynamic HTML (JavaScript) Input Form and Event Handling Due: Monday, 3/15/2010 Task: Modify the following HTML document with JavaScript codes so that 1. each item for sale (4 of them) will have its own quantity text field appear to the right on the same line. 2. T-Shirt will have, in addition, a Pull-Down menu that shows 3 different sizes as options: X-Large, Large, and Medium, (X-Large:$12, Large:$10, and Medium:$8 now) and 3. an additional pull-down menu will be included for the users to select a credit card type. so this menu will have the following six options including select credit card type mastercard visa discover americanexpress others 4. an additional input text box will be included for the users to enter the credit card name when they select the "others" option for the card type. 5. also two alert messages will be displayed when a. credit card type is not selected when needed, and b. credit card name is not to be entered when it is needed. 6. the Text area will show sale total (before tax): $10000 tax: $825 total (after tax): $10825 // (The state must be Texas) // //////////////////////////////////////////////////// // As usual, '<' is replaced by '#' #html> #head> #title> JavaScript: Dynamic HTML with Form Elements and Functions (Event Handlers) #/title> #Script language="JavaScript"> #!-- Start of JavaScript code function process() { var items = ["T-shirts", "Baseball Cap", "Football Cap", "Gloves"]; var contents = ""; var total = 0; with(document.store) // simplifies property references { if (stateMenu.selectedIndex==0) { alert ("You Must Select Your State First.\nThank You!!!"); return; } if (item1.checked) { contents += items[0] + "\n"; total += parseInt(item1.value)*parseInt(quantity.value); // price is given in 'value' attribute } if (item2.checked) { contents += items[1] + "\n"; total += parseInt(item2.value)*parseInt(quantity.value); } if (elements[2].checked) // elements[2] is 'item3' { contents += items[2] + "\n"; total += parseInt(elements[2].value)*parseInt(quantity.value); } if (elements[3].checked) { contents += items[3] + "\n"; total += parseInt(elements[3].value)*parseInt(quantity.value); } if (contents == "") { contents = "You did not buy any items"; alert (contents); } else { contents = "You bought the following items.\n" + contents; contents += "-----------------\n"; contents += "Total price without tax: $" + total; contents += "\nThank you very much.\n"; } elements[8].value = contents; // to display in text area. // same as: result.value = contents; } // end of 'with' } // end of function process() 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> #/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 Type=checkbox Name=item1 Value=10> #br> Baseball Cap #Input Type=checkbox Name=item2 Value=12> #br> Football Cap #Input Type=checkbox Name=item3 Value=15> #br> Gloves #input Type=checkbox Name=item4 Value=20> #br> How many of Each Item? #input Type=Text Name=quantity Value=1 size=5> #br> #SELECT Name=stateMenu onChange="showState()"> #option> Pick Your State #option Value=8.25> Texas #option Value=5.0> Louisiana #option Value=6.5> Oklahoma #option Value=4.0> Arkansas #/Select> #br> #Input Type=button Value="SUBMIT" onClick="process()"> #input Type=Reset Value="CLEAR"> #br> #TextArea Name=result rows=10 cols=60> Happy Shopping #/TextArea> #/Form> #/center> #/b> #/body> #/html>