View Full Version : Needing help with a form. Writing a function?

07-09-2011, 09:05 PM
Okay so this is a homework assignment. I have completed MOST of it. What I am completely lost on is how make the totals show up in the shipping fee section based on what products the user selects.

"When the user selects an option from the Hand Tool selection list (and only the Hand Tool selection list)
Display $20.00 in the Item 1 text box.
Display $0 in the Item 2 text box.
Display $5.00 in the Shipping text box.
Display $25.00 in the Total text box.
When the user selects an option from the Power Tool selection list (and only the Power Tool selection list)
Display $0 in the Item 1 text box.
Display $30.00 in the Item 2 text box.
Display $10.00 in the Shipping text box.
Display $40.00 in the Total text box.
When the user selects both an option from the Hand Tool selection list and an option from the Power Tool selection list
Display $20.00 in the Item 1 text box.
Display $30.00 in the Item 2 text box.
Display $15.00 in the Shipping text box.
Display $65.00 in the Total text box.
If the user returns back to the default (the words Hand Tool and Power Tool in the selection list) you must treat that as de-selecting the tool and change the text boxes accordingly."

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Project 2
<meta http-equiv="content-type" content="text/html; charset=utf-8" />

<link rel="stylesheet" href="js_styles.css" type="text/css" />
<script type="text/javascript">
/* <![CDATA[ */
function jumpto(x){

if (document.form1.jumpmenu.value != "null") {
document.location.href = x
function checkForNumber(fieldValue) {
var numberCheck = isNaN(fieldValue);
if (numberCheck == true) {
window.alert("You must enter a numeric value!");
return false;
function confirmSubmit() {
if (document.forms[0].first_name.value == ""
|| document.forms[0].last_name.value ==""
|| document.forms[0].address_1.value ==""
|| document.forms[0].city.value ==""
|| document.forms[0].state.value == "") {
window.alert("You have not entered the requested personal information.");
return false;
function confirmReset() {
var resetForm = window.confirm("Are you sure you want to reset the form?");
if (resetForm == true)
return true;
return false;
/* ]]> */

<h2>Purchase Order</h2>
<form action="FormProcessor.html" method="get" enctype="application/x-www-form-urlencoded" onsubmit="return confirmSubmit();" onreset="return confirmReset();">

<h3>Products</h3> Hand Tools $20.00
<select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option value="$0.00">Hand Tool</option>
<option value="$20.00">Saw</option>
<option value="$20.00">Hammer</option>
<option value="$20.00">Screwdriver</option>
<option value="$20.00">Wrench</option>
<option value="$20.00">Pliers</option>
Power Tool $30.00
<select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option value="$0.00">Power Tool</option>
<option value="$30.00">Circular Saw</option>
<option value="$30.00">Sabre Saw</option>
<option value="$30.00">Drill</option>
<option value="$30.00">Belt Sander</option>
<option value="$30.00">Table Saw</option>

<h3>Shipping Fees</h3>
<p>Item 1: <input type="text" name="city" size="15" />
Item 2: <input type="text" name="city" size="15" />
Shipping: <input type="text" name="city" size="15" />
Total: <input type="text" name="city" size="15" />

<h3>Customer Information</h3>
<p>First Name <input type="text" name="first_name" size="25" value="First Name" onclick="document.forms[0].first_name.value = '';" />
Last Name <input type="text" name="last_name" size="25" value="Last Name" onclick="document.forms[0].last_name.value = '';" />
<p>Street Address 1 <input type="text" name="address_1" size="50" value="Address 1" onclick="document.forms[0].address_1.value = '';" />
<p>City <input type="text" name="city" size="20" value="City" onclick="document.forms[0].city.value = '';" />
State <input type="text" name="state" size="15" value="State" onclick="document.forms[0].state.value = '';" />
Zip <input type="text" name="zip" size="10" value="Zip" onclick="document.forms[0].zip.value = '';" />
<p>Phone <input type="text" name="phone" size="20" value="Phone" onchange="return checkForNumber(this.value)" onclick="document.forms[0].phone.value = '';" /> Fax <input type="text" name="fax" size="20" value="Fax" onchange="return checkForNumber(this.value)" onclick="document.forms[0].fax.value = '';" />
<p>Payment Method? <input type="radio" name="visa" />Visa<input type="radio" name="master_card" />Master Card
<input type="radio" name="american_express" />American Express</p>
<p>Credit Card Number <input types="text" name="cc_number" size="50" />
<p> Expiration Month:
<select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option value="january">January</option>
<option value="february">February</option>
<option value="march">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="august">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
Expiration Year
<select name="jumpmenu" onChange="jumpto(document.form1.jumpmenu.options[document.form1.jumpmenu.options.selectedIndex].value)">
<option value="2011">2011</option>
<option value="2012">2012</option>
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
<p><input type="image" alt="Graphical image of a subscribe button" src="subscribe.png" /></p>
<p><input type="reset" value="Reset Registration Form" onchange="confirmReset" /></p>
<a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10"
alt="Valid XHTML 1.0 Strict" height="31" width="88" style="border: 0px;" /></a>
<a href="http://jigsaw.w3.org/css-validator/check/referer"> <img src="http://www.austincc.edu/jscholl/images/vcss.png"
alt="Valid CSS!" height="31" width="88" style="border: 0px;" /></a>


I'm not looking for someone to complete this for me. I just need some help with how I would write a function for this.