Adding up

fraandres 0 Newbie Poster
12 Years Ago
my question is how can I output the data on the input box "Order total is" I have try everything but I just stuck on this part, I'm very new on this, I did the function showSum so I can show the sum of the total checkboxes. thank you for any suggestions.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<script language="javascript">
<!--
	function showSum(){
		var checkboxgroup = document.form1.order
		var sum = 0
		
		for (var i=0; i<checkboxgroup.length; i++) {
			if  (checkboxgroup[i].checked)
				sum += parseInt(checkboxgroup[i].value)
		}
	document.form1.txtOutput.value = "Order total: $ " + sum
	}
//-->
</script>

<style type="text/css">
.auto-style1 {
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	text-align: center;
	color: #000000;
}
.auto-style2 {
	text-align: center;
}
.nav {
	background-image: url('bg.jpg');
}
a:hover {
	color: #FFFFFF;
	background-color: #FF0000;
}
a:hover {
	background-color: #FF0000;
	color: #FFFFFF;
}
a:hover {
	color: #FFFFFF;
	background-color: #FF0000;
}
a:hover {
	color: #FFFFFF;
	background-color: #FF0000;
}
a:hover {
	color: #FFFFFF;
	background-color: #FF0000;
}
.ImageRight {
	padding-right: 35px;
	padding-bottom: 15px;
	padding-left: 15px;
	float: right;
}
.ImageLeft {
	padding-bottom: 15px;
	padding-right: 35px;
	padding-left: 15px;
	float: left;
}
.auto-style4 {
	text-align: center;
	font-size: xx-small;
}
.newStyle1 {
	background-color: #996600;
}
.newStyle2 {
	background-color: #996600;
}
.newStyle3 {
	background-color: #996600;
}
a:hover {
	color: #FFFFFF;
	background-color: #FF0000;
}
.newStyle4 {
	background-color: #FF0000;
}
.newStyle5 {
	background-color: #996600;
}
.newStyle6 {
	background-color: #FF0000;
}
a {
	text-decoration: none;
}
a:hover {
}
a:hover {
	color: #FFFFFF;
	background-color: #FF0000;
}
.newStyle7 {
	color: #996633;
}
.auto-style5 {
	text-align: center;
	color: #996600;
	font-size: large;
}
.newStyle8 {
	background-color: #0000FF;
}
.newStyle9 {
	background-color: #0000FF;
}
.newStyle10 {
	border-style: double;
}
.newStyle11 {
	border: medium double #FF9900;
}
.newStyle12 {
	background-color: #FF9900;
}
.newStyle13 {
	background-color: #FF9900;
}
.auto-style6 {
	background-color: #FF9900;
	text-align: center;
}
.auto-style7 {
	margin-left: 240px;
}
.auto-style9 {
	margin-left: 0px;
}
</style>
</head>

<body style="background-image: url('bg.jpg'); height: 750px; margin-right: 320px;">
<form Name="form1">
<h2 class="auto-style1">Colorado Calling</h2>

<table style="width: 90%; height: 52px;" class="newStyle3">
	<tr>
		<td class="auto-style2" style="height: 23px; width: 125px;">
		<a href="default.html" class="newStyle5">HOME</a></td>
		<td class="auto-style2" style="height: 23px">
		<a href="monuments.html" class="newStyle2">MONUMENTS</a></td>
		<td class="auto-style2" style="height: 23px"><a href="recreation.html">RECREATION</a></td>
		<td class="auto-style2" style="height: 23px; width: 310px;"><a href="comejoinus.html">COMO JOIN US</a></td>
		<td class="auto-style2" style="height: 23px">
		<a href="MakeReservations.html">Make Reservations </a></td>
	</tr>
</table>

<p class="nav"></p>


<div id="content"><h5>&nbsp;</h5>
</div>

<p class="auto-style5"><strong>Check the trips you wish to order </strong></p>
<p>&nbsp;</p>
 
 <table class="newStyle11" style="width: 100%">
	 <tr class="newStyle9">
		 <td style="width: 136px">Buy</td>
		 <td>Park Description </td>
		 <td>Price</td>
		 <td>Look at that !!</td>
	 </tr>
	 
	 <tr>
	 
		 <td class="auto-style6" style="width: 136px; height: 141px">
		 <input name="Checkbox" name="order" value="600" type="checkbox" /></td>
		 <td class="auto-style6" style="height: 141px"><strong>Curecanti 
		 Recreation Area<br />
		 Three reservoirs named for dams on the gunnision River form the <br />
		 heart and sould of this national park. Bring your familay and enjoy<br />
		 boating, fishing, and swimming. It is an experience of a life time
		 <br />
		 not to be missed.</strong></td>
		 <td class="auto-style6" style="height: 141px"><strong>$600</strong></td>
		 <td class="auto-style6" style="height: 141px">
		 <img alt="Curecanti" height="93" src="CurecantiRecArea.jpg" width="185" /></td>
		
	 </tr>
	 
	 
	 <tr class="newStyle13">
		 <td class="auto-style2" style="width: 136px; height: 144px">
		 <input name="Checkbox"name ="order" value="3500" type="checkbox" /></td>
		 <td class="auto-style2" style="height: 144px"><strong>Hoven Monument<br />
		 This monument protects six prehistoric, Pueblon-era villages. The <br />
		 park covers 20 square miles of mesa tops and canyons along the <br />
		 Utah-Colorado border. What are you waiting for? Sign up now!</strong></td>
		 <td class="auto-style2" style="height: 144px"><strong>$3500</strong></td>
		 <td class="auto-style2" style="height: 144px">
		 <img alt="Hoven" height="108" src="HovenweepRecArea.jpg" width="177" /></td>
	 </tr>
	 <tr class="newStyle13">
		 <td class="auto-style2" style="width: 136px; height: 181px">
		 <input name="Checkbox"name="order" value="3500" type="checkbox" /></td>
		 <td class="auto-style2" style="height: 181px"><strong>Florrisant Fossil 
		 Beds<br />
		 Dig for the richest and most diverse fossil deposits in the world.
		 <br />
		 Petrified stumps up to 14 feet that will literally astonish you! You
		 <br />
		 Don't have to be anthropoligist to enjoy the park. It is also a <br />
		 valuable education experience </strong></td>
		 <td class="auto-style2" style="height: 181px"><strong>$200</strong></td>
		 <td class="auto-style2" style="height: 181px">
		 <img alt="Florrisant" height="106" src="FlorissantRecArea.jpg" width="194" /></td>
	 </tr>
</table>
 
<p class="auto-style7"><strong>Order Total is ($)&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</strong><input name="Text1" type="text" /></p>
<p class="auto-style7">&nbsp;<strong>Enter your Customer ID#:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</strong><input name="Text2" type="text" /></p>
<p class="auto-style7"><strong>Your credit limit is:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </strong><input name="Text3" type="text" /></p>
<p class="auto-style7"><strong>Prior outstanding balance:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</strong><input name="Text4" type="text" /></p>
<p class="auto-style7"><strong>Transaction Status:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</strong><input name="Text5" style="width: 450px" type="text" /></p>

<p class="nav">
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input class="auto-style9" name="RECALCULATE" style="width: 114px; height: 26px" type="button" value="Recalculate" onclick="showSum()" NAME="RECALCULATE" />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<input name="StarOver" style="width: 109px" type="button" value="Star Over" /></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
&nbsp;<p><a href="http://www.csun.edu">Webmaster</a> Francisco Melo</p>
<p>&nbsp;</p>
<p class="auto-style4">Copyright &copy;U.S National Parks Service. All Righs 
reserve </p>


</form>
</body>
</html>
javascript
This attachment is potentially unsafe to open. It may be an executable that is capable of making changes to your file system, or it may require specific software to open. Use caution and only open this attachment if you are comfortable working with zip files.
mysite_(2).zip (274.79 KB)
Edited 12 Years Ago by Ezzaral because: Updated code tag
1 Contributor
0 Replies
115 Views
Be the first to reply
Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.