Learn VBA & Macros in 1 Week!

JavaScript - Help With Calculating Order Form

Full Excel VBA Course - Beginner to Expert

Help With Calculating Order Form	View Content

Hey there, first time poster. I am trying to create an order with the ability to dynamically self total the sum of the selected items but also be able to add a 25% labor fee having it be at least $90.

So if someone buys $300 worth of items the labor charge would be $75 but it would be automatically bumped to $90.

heres the existing code:

PHP Code:
* Calculates the payment total with quantites
     * @param {Object} prices
     */
    countTotal: function(prices){

        var total = 0;
        $H(prices).each(function(pair){
            total = parseFloat(total);
            var price = parseFloat(pair.value.price);
            if ($(pair.key).checked) {
                if ($(pair.value.quantityField)) {
                    price = price * parseInt($(pair.value.quantityField).getSelected().text, 10);
                }
                total += price;
            }
        });

        if (total === 0) {
            total = "0.00";
        }
        if ($("payment_total")) {
            $("payment_total").update(parseFloat(total).toFixed(2));
        }
    },
    /**
     * Sets the events for dynamic total calculation
     * @param {Object} prices
     */
    totalCounter: function(prices){
        $H(prices).each(function(pair){
            $(pair.key).observe('click', function(){
                JotForm.countTotal(prices);
            });
            if ($(pair.value.quantityField)) {
                $(pair.value.quantityField).observe('change', function(){
                    $(pair.key).checked = true;
                    JotForm.countTotal(prices);
                });
            }
        });
    },

Full Excel VBA Course - Beginner to Expert

Calculating Form Totals

Similar Tutorials

View Content

Can someone please assist. I am trying to create a order form that auto calculates my totals as I enter the quantities. It comes up with Not a Number(NaN).

Below are snippets from my code this is obviously in a <form>:

HTML:
Code:

<!-- Row 3, Col 3 purchase boxes -->
<td colspan="1" height="120" align="left">
<input style="margin-left: 60px" type="text" name="bed_359" size="3" maxlength="3" onchange="calculateValue(this.form)" /> R359</td></tr>

<!-- Row 10, Col 2 Order Value Box-->
<td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="total" size="10" 
onfocus="this.form.elements[0].focus()" />
</td></tr>

javaScript:
Code:

// Function to calculate order value	
function calculateValue(orders) {
	var orderValue = 0;
	var value = 0;
	var itemPrice = 0;
	var itemQuantity = 0;
	
	// Run through all the product fields
	for(var i = 0; i < orders.elements.length; ++i) {
	
	// Get the current field
	formField = orders.elements[i];
	
	// Get the fields name
	formName = formField.name;
	
	// Items price extracted from name
	itemPrice = parseFloat(formName.substring(formName.lastIndexOf("0") + 1));
	
	// Get the Quantity
	itemQuantity = parseInt(formField.value);
	
	// Update the OrderValue
	if(itemQuantity >= 0) {
	value = itemQuantity * itemPrice;
	orderValue += value;
	}
	}
	
	// Display the total
    orders.total.value = orderValue;
}

Please help its probably something simple.

Problems Calculating Total In Form

Similar Tutorials

View Content

Hi all,
I am trying to have a form calculate total using this script, works OK until the total reaches 99 from there on it only returns 2 figures. Also it won't work if I complete the dollar value (i.e add .00)
Anyone tell me where I am going wrong?

Code:

<script type="text/javascript">
		function startCalc(){
  		interval = setInterval("calc()",1);
		}
		function calc(){
		q1 = document.apply.appfee.value = 11;
		q2 = document.apply.memfee.value = 20;
		q3 = document.apply.levy.value;
		q4 = document.apply.donation.value;
		document.apply.total.value = (q1*1) + (q2*1) + (q3*1) + (q4*1)
		}
		function stopCalc(){
  		clearInterval(interval);
		}
		</script>

This is the form:
Code:

<form name="apply" action="" method="post" onsubmit="return validate(apply)">
<table style="width:680px;">
			<tr>
				<td style="text-align:right; white-space:nowrap; width:300px;">Application Fee:</td>
				<td style="text-align:left; white-space:nowrap; width:441px">$<input type="text" readonly value="" name="appfee" style="width:17px; border:0; font:11px verdana; color:#006;margin-bottom:5px;"></td>
			</tr>
			<tr>
				<td style="text-align:right; white-space:nowrap; width:300px;">Annual Memebership Fee:</td>
				<td style="text-align:left; white-space:nowrap;">$<input type="text" readonly value="" name="memfee" style="width:17px; border:0; font:11px verdana; color:#006;margin-bottom:5px;"></td>
			</tr>
			<tr>
				<td style="text-align:right; white-space:nowrap; width:300px;">* Optional Annual Levy:</td>
				<td style="text-align:left;">
					$<select name="levy" onFocus="startCalc();" onBlur="stopCalc();">
					<option selected>0</option>
					<option value="22">22</option>
					<option value="44">44</option>
					<option value="66">66</option>
					<option value="88">88</option>
					<option value="110.00">110</option>
					</select>
				</td>
			</tr>
			<tr>
				<td style="text-align:right; white-space:nowrap; width:300px;">* Optional Donation:</td>
				<td>$<input type="text" name="donation" value="" onFocus="startCalc();" onBlur="stopCalc();" style="font:11px verdana; color:#006;margin-bottom:5px; width:80px;"></td>
			</tr>
			<tr>
				<td style="text-align:right; white-space:nowrap; width:300px;"><b>TOTAL:</b></td>
				<td white-space:nowrap;><b>$<input type="text" name="total" style="width:17px; border:0; font:bold 11px verdana; color:#006;margin-bottom:6px;"></b></td>
			</tr>
		</table>
</form>

Calculating Fees In Percentage In A Form

Similar Tutorials

View Content

Need Help With Calculating The Total Rent From Form Fields

Similar Tutorials

View Content

I have everything working up to this point but when I try and put the math equation into my script section, I get multiple error and cannot figure out how to get the function to return the actual total rental cost. If you could please look at what I have, your opinions would be greatly appreciated. Thank you.

Below is the code with the math function at the end of the script section in the heading which I seem to be receiving error on. Any help is greatly appreciated. Thanks.

Code:

<!DOCTYPE html PUBLIC
	"-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<!-- Brooks Rogalski
		December 6, 2010 -->
<title>ABC Outdoor Sports</title>
<meta http-equiv="content-type"
	content="text/html; charset=iso-8859-1" />
	
	<script type = "text/javascript">
		/* <![CDATA[ */
		
			//image slideshow function
			
			var interval = 4000; // delay between rotating images
			var random_display = 1; // 0 = no, 1 = yes
			var pause = false;
			var image_index = 0;
			
			image_list = new Array();
			image_list[image_index++] = new imageItem("fishing.jpg");
			image_list[image_index++] = new imageItem("biking.jpg");
			image_list[image_index++] = new imageItem("climbing.jpg");
			image_list[image_index++] = new imageItem("kayaking.jpg");
			image_list[image_index++] = new imageItem("scuba.jpg");
			
			var number_of_image = image_list.length;
			
			function imageItem(image_location) {
			
				this.image_item = new Image();
				this.image_item.src = image_location;
			}
			
			function get_ImageItemLocation(imageObj) {
				return(imageObj.image_item.src)
			}

			function generate(x, y) {
			
				var range = y - x + 1;
				return Math.floor(Math.random() * range) + x;
			}

			function getNextImage() {
				if (pause == true) return;
				
				if (random_display) {
					image_index = generate(0, number_of_image-1);
				}
				else {
					image_index = (image_index+1) % number_of_image;
				}
				
				var new_image = get_ImageItemLocation(image_list[image_index]);
				return(new_image);
			}

			function rotateImage(place) {
				
				var new_image = getNextImage();
				
				document[place].src = new_image;
				
				var recur_call = "rotateImage('"+place+"')";
				
				setTimeout(recur_call, interval);
			}

			//check valid pickup date
			
			function checkValidPDate(which) {
				which = which.replace(/[-:,\.]/g,"/");
				which = which.replace(/[^0-9\/]/,"");
				
				var dt = which.split("/");
				var yr = dt[2];
				
				if (!yr) {yr = 9999}
				if (yr.length == 2) {yr = parseInt(yr) + 2000}
				if ((yr < 2010) || ( yr > 2020)) {
					alert ("Invalid Year or Date Format!");
					document.getElementById('dateIn').value = "";  // clear the field
					setTimeout("document.getElementById('dateIn').focus()", 25);  // and refocus on it
					return false;
				}

				var mm = dt[0]-1;
				var mmx = dt[0];
				var dd = dt[1];
				var nd = new Date();
				nd.setFullYear(yr,mm,dd);  // YYYY,MM(0-11),DD
				var ndmm = nd.getMonth();
			
				if (ndmm != mm) {
					alert (mmx + "/" + dd + "/" + yr  + " is NOT a Valid Date!");
					document.getElementById("dateIn").value = ""; // clear the field
					setTimeout("document.getElementById('dateIn').focus()", 25);  // and refocus on it
					return false; 
				}
				else {
					alert (mmx + "/" + dd + "/" + yr  + " is a Valid Date!");  // for testing
				}

				var reserveDate = new Date(yr,mm,dd);
				var mydate = new Date();
				mydate.setDate(mydate.getDate()+2);  //  Two CLEAR days ahead - NB mydate is HRS:MNS:SECS so same date is a problem

				if (reserveDate < mydate) {
					window.alert("Reservations need to be at least two clear days in advance.");
					document.getElementById("dateIn").value = ""; // clear the field
					setTimeout("document.getElementById('dateIn').focus()", 25);  // and refocus on it
				}
			}
			
			//check valid return date
			
			function checkValidRDate(which) {
				which = which.replace(/[-:,\.]/g,"/");
				which = which.replace(/[^0-9\/]/,"");
				
				var dt = which.split("/");
				var yr = dt[2];
				
				if (!yr) {yr = 9999}
				if (yr.length == 2) {yr = parseInt(yr) + 2000}
				if ((yr < 2010) || ( yr > 2020)) {
					alert ("Invalid Year or Date Format!");
					document.getElementById('dateOut').value = "";  // clear the field
					setTimeout("document.getElementById('dateOut').focus()", 25);  // and refocus on it
					return false;
				}

				var mm = dt[0]-1;
				var mmx = dt[0];
				var dd = dt[1];
				var nd = new Date();
				nd.setFullYear(yr,mm,dd);  // YYYY,MM(0-11),DD
				var ndmm = nd.getMonth();
			
				if (ndmm != mm) {
					alert (mmx + "/" + dd + "/" + yr  + " is NOT a Valid Date!");
					document.getElementById("dateOut").value = ""; // clear the field
					setTimeout("document.getElementById('dateOut').focus()", 25);  // and refocus on it
					return false; 
				}
				else {
					alert (mmx + "/" + dd + "/" + yr  + " is a Valid Date!");  // for testing
				}
				
				if(document.forms[0].returnDate.value <= document.forms[0].pickupDate.value){
					window.alert("Please choose later date");
					valid=false;
					return false;
				}
			}
			//validate form functions
			
			function validateForm() {
			
				var valid = true;
				
				//validate equipment 
				
				if (document.forms[0].equipment.selectedIndex == 0) {
					window.alert("Please select your equipment type.");
					document.forms[0].equipment.focus();
					return false;
				}
				
				//validate pick-up time hours
				
				if (document.forms[0].pickupHours.selectedIndex == 0) {
					window.alert("Please select the number of hours for pick-up time.");
					document.forms[0].pickupHours.focus();
					return false;
				}
				
				//validate pick-up time minutes
				
				if (document.forms[0].pickupMinutes.selectedIndex == 0) {
					window.alert("Please select the number of minutes for pick-up time.");
					document.forms[0].pickupMinutes.focus();
					return false;
				}
				
				//validate return time hours
				
				if (document.forms[0].returnHours.selectedIndex == 0) {
					window.alert("Please select the number of hours for return time.");
					document.forms[0].returnHours.focus();
					return false;
				}
				
				//validate return time minutes
				
				if (document.forms[0].returnMinutes.selectedIndex == 0) {
					window.alert("Please select the number of minutes for return time.");
					document.forms[0].returnMinutes.focus();
					return false;
				}
				
				//validate first name
			
				if (document.forms[0].firstName.value=="") {
					window.alert("Please enter your first name.");
					document.forms[0].firstName.focus();
					valid = false;
					return valid;
				}
				
				//validate last name
			
				if (document.forms[0].lastName.value=="") {
					window.alert("Please enter your last name.");
					document.forms[0].lastName.focus();
					valid = false;
					return valid;
				}
				
				//validate street address
			
				if (document.forms[0].street.value=="") {
					window.alert("Please enter your street address.");
					document.forms[0].street.focus();
					valid = false;
					return valid;
				}
				
				//validate city
			
				if (document.forms[0].city.value=="") {
					window.alert("Please enter your city.");
					document.forms[0].city.focus();
					valid = false;
					return valid;
				}
				
				//validate zip code
				
				if (document.forms[0].zip.value==""){
					window.alert("Please enter your zip code.");
					document.forms[0].zip.focus();
					valid=false;
					return valid;
				}
	
				var re5digit=/^\d{5}$/ 
	
				if (document.forms[0].zip.value.search(re5digit)==-1){ 
					window.alert("Please enter a 5 digit number")
					valid=false;
					return valid;
				}
				
				//validate date of birth
				
				if (document.forms[0].date.value == "'' || '(mm/dd/yyyy)'" ){
					window.alert("Please enter your date of birth.");
					document.forms[0].birthDate.focus();
					valid=false;
					return valid;
				}
				
				var reDateFormat = /^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{4}$/
				
				if(document.forms[0].date.value.search(reDateFormat)==-1){
					window.alert("Please enter a standard format. [mm/dd/yyyy]")
					valid=false;
					return valid;
				}
				
				//check if over 18
				
				var age;
				var input = document.forms[0].birthDate.value;
				var pyear = parseInt(input.substring(6,10));
				var pmonth = parseInt(input.substring(0,2)) - 1;
				var pday = parseInt(input.substring(3,5));
	
				if ( month < pmonth ){
					age = year - pyear - 1;
				}
				else if ( month > pmonth ){
					age = year - pyear;
				}
				else if ( month == pmonth ){
					if ( day < pday ){
						age = year - pyear - 1;
					}
					else if ( day > pday ){
						age = year - pyear;
					}
					else if ( day == pday ){
						age = year - pyear;
					}
				}
				if(age < 18){
					window.alert('Attention: Under 18!');
					valid=false;
					return valid;
				}	
                                //calculate total cost and diplay in window.confirm() dialog box
				
				var equip = document.forms[0].equipment.value
				var pDate = document.forms[0].pickupDate.value
				var pHours = document.forms[0].pickupHours.value
				var pMinutes = document.forms[0].pickupMinutes.value
				var rDate = document.forms[0].returnDate.value
				var rHours = document.forms[0].returnHours.value
				var rMinutes = document.forms[0].returnMinutes.value
				
				var pTime = pHours + pMinutes;
				var rTime = rHours + rMinutes;
				var total = (((rDate - pDate) - 1) * 24) * equip) + ((rTime + (24 - pTime)) * equip);
				var OK = window.confirm(" The total rental cost is $" + total + "\n Click OK to accept, Cancel to decline");

				if (OK) {return true}
				else {return false}
			}
			
			
		/* ]]> */
	</script>

</head>
<body onload = "rotateImage('rImage')">

	<h1> ABC Outdoor Sports Equipment </h1>

	
	<img src="fishing.jpg" id="rImage" width="250" height="200" onmouseover = "pause=true;" onmouseout = "pause=false;"> 
	
	<br/>
	<br/>
	
	<form onsubmit = "return validateForm();" action = "mailto:rogalskibf@gmail.com?subject=ABC Customer Reservation" method="post" enctype="text/plain">
		<table border = "0">
			<tr>
				<td>
					Equipment:<br/>
					<select name = "equipment">
						<option value="unselected">Select Equipment Type</option>
						<option value = 20>Fishing Boat</option>
						<option value = 15>Kayak</option>
						<option value = 2>Mountain Bike</option>
						<option value = 10>Scuba Gear</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					Pick-up Date: <br/>
					<input type = "text" id = "dateIn" name = "pickupDate" onchange = checkValidPDate(this.value)>
				</td>
				<td>
					Pick-up Time: <br/>
					<select name = "pickupHours">
						<option value="unselected">hr</option>
						<option value = 7>07</option>
						<option value = 8>08</option>
						<option value = 9>09</option>
						<option value = 10>10</option>
						<option value = 11>11</option>
						<option value = 12>12</option>
						<option value = 13>13</option>
						<option value = 14>14</option>
						<option value = 15>15</option>
						<option value = 16>16</option>
						<option value = 17>17</option>
					</select>

					<select name = "pickupMinutes">
						<option value="unselected">min</option>
						<option value = 0>00</option>
						<option value = .5>30</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					Return Date: <br/>
					<input type = "text" id = "dateOut" name = "returnDate" onchange = checkValidRDate(this.value)>
				</td>
				<td>
					Return Time: <br/>
					<select name = "returnHours">
						<option value="unselected">hr</option>
						<option value = 7>07</option>
						<option value = 8>08</option>
						<option value = 9>09</option>
						<option value = 10>10</option>
						<option value = 11>11</option>
						<option value = 12>12</option>
						<option value = 13>13</option>
						<option value = 14>14</option>
						<option value = 15>15</option>
						<option value = 16>16</option>
						<option value = 17>17</option>
					</select>
					
					<select name = "returnMinutes">
						<option value="unselected">min</option>
						<option value = 0>00</option>
						<option value = .5>30</option>
					</select>
				</td>
			</tr>
			<tr>
				<td>
					First Name: <br/>
					<input type = "text" name = "firstName"/>
				</td>
				<td>
					Last Name: <br/>
					<input type = "text" name = "lastName"/>
				</td>
			</tr>
			<tr>
				<td>
					Street: <br/>
					<input type = "text" name = "street"/>
				</td>
				<td>
					City: <br/>
					<input type = "text" name = "city"/>
				</td>
				<td>
					Zip:<br/>
					<input type = "text" name = "zip" maxlength = "5"/>
				</td>
			</tr>
			<tr>
				<td>
					Date of Birth: <br/>
					<input type = "text" name = "date" value = "(mm/dd/yyyy)"/>
				</td>
			</tr>
			<tr>
				<td colspan = "3" align = "center">
					<input type = "submit" name = "submit" value = "Submit Reservation"/>
					<input type = "button" name = "cookies" value = "Store User Information"/>
				</td>
			</tr>
		</table>
	</form>


</body>
</html>

External Javascript Calculating Wrong Form

Similar Tutorials

View Content

I am using the same java script to help add shipping costs for paypal in my html. I have worked very long and hard to get to this point.

Since everything is very similar and having conflicts I have saved and named each java script for it's form.

However, when there are more then one on the html page it always calculates the last form giving me the wrong price per quantity on the first.

I have not found a way to differentiate or id and separate.

<script src="nineEnvelope.js" type="text/javascript">
</script>

<form rel="nofollow" target="paypal" style="position:absolute; left:500px;top:200px; width:400px; height:25px; font-family:helvetica; color:#000000;font-size:18px;" action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="">
<table>
<tr><td>
<input type="hidden" name="on0" value="#9 Envelope">#9 Envelope
<input type="hidden" name="amount" value="">
<input type="hidden" name="shipping" value="">
<input type="hidden" name="shipping2" value="">
<input type="hidden" name="item_number" value="">

<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="add" value="1">

</td></tr><tr><td>

<select name="os0">
<option value="250 qty">250 qty $95.00</option>
<option value="500 qty">500 qty $125.00</option>
<option value="1,000 qty">1,000 qty $200.00</option>
<option value="2,500 qty">2,500 qty $450.00</option>
<option value="5,000 qty">5,000 qty $638.00</option>
</select>

</td></tr>


<tr>
<td>
<input type="hidden" name="on1" value="window option">window option</td></tr><tr><td><select name="os1">
<option value="no window">no window </option>
<option value="window (right)">window (right) </option>
<option value="window (left)">window (left) </option>
<option value="double window (left)">double window (left) </option>
</select> </td></tr>

</table>

<input onclick=CalculateOrder(this.form)
type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"
<img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/scr/pixel.gif" width="1" height="1">
</form>
</div>
</body>
</html>

<html>
<head>
<div>
<script type="text/javascript" src="nine_envelope_sec_src.js">
</script>

<form rel="nofollow" target="paypal" style="position:absolute; left:700px;top:200px; width:400px; height:25px; font-family:helvetica; color:#000000;font-size:18px;"
action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="business" value="">
<table>
<tr><td>
<input type="hidden" name="on0" value="#9 Envelope w/ Security Tint">#9 Envelope w/ Security Tint
<input type="hidden" name="amount" value="">
<input type="hidden" name="shipping" value="">
<input type="hidden" name="shipping2" value="">
<input type="hidden" name="item_number" value="">

<input type="hidden" name="no_shipping" value="2">
<input type="hidden" name="currency_code" value="USD">
<input type="hidden" name="add" value="1">

</td></tr><tr><td>

<select name="os0">
<option value="250 qty">250 qty $110.00</option>
<option value="500 qty">500 qty $140.00</option>
<option value="1,000 qty">1,000 qty $215.00</option>
<option value="2,500 qty">2,500 qty $475.00</option>
<option value="5,000 qty">5,000 qty $678.00</option>
</select>

</td></tr>



<tr>
<td><input type="hidden" name="on1" value="window option">window option</td></tr><tr><td><select name="os1">
<option value="no window">no window </option>
<option value="window (right)">window (right) </option>
<option value="window (left)">window (left) </option>
<option value="double window (left)">double window (left) </option>
</select> </td></tr>


</table>
<input onclick=CalculateOrder(this.form)
type="image" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/btn/btn_cart_LG.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!"
<img alt="" border="0" src="https://www.paypalobjects.com/WEBSCR-640-20110306-1/en_US/i/scr/pixel.gif" width="1" height="1">
</form>

</div>
</head>
</html>

nineEnvelope.js

function CalculateOrder(form)
{ if (form.os0.value == "250 qty") { form.amount.value = 95.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "500 qty") { form.amount.value = 125.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "1,000 qty") { form.amount.value = 200.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "2,500 qty") { form.amount.value = 450.00; form.item_number.value = ""; form.shipping.value = "20.00"; form.shipping2.value = "20.00"; }
if (form.os0.value == "5,000 qty") { form.amount.value = 638.00; form.item_number.value = ""; form.shipping.value = "35.00"; form.shipping2.value = "35.00";}

}

nine_envelope_sec_src.js

function CalculateOrder(form)
{ if (form.os0.value == "250 qty") { form.amount.value = 110.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "500 qty") { form.amount.value = 140.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "1,000 qty") { form.amount.value = 215.00; form.item_number.value = ""; form.shipping.value = "15.00"; form.shipping2.value = "15.00"; }
if (form.os0.value == "2,500 qty") { form.amount.value = 475.00; form.item_number.value = ""; form.shipping.value = "20.00"; form.shipping2.value = "20.00"; }
if (form.os0.value == "5,000 qty") { form.amount.value = 678.00; form.item_number.value = ""; form.shipping.value = "35.00"; form.shipping2.value = "35.00"; }

}

Calculating Total Price Based On Extra Data In Form Field

Similar Tutorials

View Content

For various reasons, I need the value of my drop down box options to contain size information rather than price. However I would like to be able to calculate a price for the items based on what size the user selects as well as the quantity. Below is the code I came up with (which doesn't work obviously)

What can I do to get this to work for me?

Thanks in advance for any help!

Code:

<head>
<script type="text/javascript">
<!--
function calc(A,B,SUM) {
  var price = document.getElementById(A).extrainfo; 
  var quantity = document.getElementById(B).value; 
  document.getElementById(SUM).value = price * quantity;
}
//-->
</script>
</head>
<body>

        <label>T-Shirt:
          <select name="T_SHIRT" id="T_SHIRT" onchange="calc('T_SHIRT','Tshirt_QTY','total');">
          <option selected="selected">CHOOSE A SIZE </option>
          <option value="SIZE: SMALL" extrainfo="10.99">Small, 34/36 (S) </option>
          <option value="SIZE: MEDIUM" extrainfo="11.99">Medium, 38/40 (M) </option>
          <option value="SIZE LARGE" extrainfo="12.99">Large, 42/44 (L) </option>
          </select>
      </label>
      
      <label>QTY:
      <input type="text" id="Tshirt_QTY" name="Tshirt_QTY" onchange="calc('T_SHIRT','Tshirt_QTY','total')" />
    </label>
    
    <label>Price:
          <input type="text" readonly="readonly" name="total" id="total"/>
    </label>
</body>

Jquery Realtime Order Form - Change Form Elements Depending On Selection

Similar Tutorials

View Content

Hello

I've been struggling trying to get a small order form to work the way I want it to. Here is a link to the live page:
http://www.watphotos.com/introductio...otography.html

And here is the code in question:

Code:

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 
 $(document).ready(function(){
	var initial	= 0
	var total = 0;
	var services = 0;
	function addServices()
	{
		initial = 150
		total = initial
		services = 0;
		$("input:checked").each(function(){
			value = $(this).attr("value");		
			services += parseInt(value);
		});
	}
	$(function()
	{
		addServices();
		total += services;
		$("form").before('<p class="price"></p>')		
		$("p.price").text("Total Price: US$" + total);
	});
 	$("input:radio, input:checkbox").click(function () {
		addServices();
		total += services
		$("p.price").text("Total Price: US$" + total);
    });
 
 });
 
</script>

I have two questions...

Question 1
How can I make this piece of script act a little smarter. Look at the order form, I'm catering for up to 4 people and providing lunch for them. If they select 3 people and the spaghetti bol for lunch, it's only adding $10 where it should be adding $30. Obviously this is simple multiplication but since the values in my form are prices it makes it a little tricky.
I'm guessing an onselect on the first part of the form which changes the pricing of the other items would be the way to go, but how do I do this?

Question 2
The "Total Price" is placed before the <form> tag by the script. This is ok but it's not where I want it. How can I position this text elsewhere in the document?

Thanks in advance!

Values Form A Order Form To Display On A Diffirent Page

Similar Tutorials

View Content

I have a order form page and on submitting it opens a new web page that displays the order totals. Below is my code and most probably wrong but for me it seems logic. Please assist.

Order Form:
Code:

<td colspan="1" height="120" align="left"> 
<select style="margin-left: 60px; background-color: #00FF77;" name="prod_bed_359"  onchange="calculateValue(this.form)">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select> R359</td></tr>

New page I called a unction to print:
Code:

function itemsOrdered() {
var beds = document.forms[2].prod_bed_359.value;
document.write("<pre><strong>Description\t\tQuantity\tPrice</strong></pre>");
document.write("<pre>Doggie Bed\t\t" + beds + "</pre>");	
}

This is still basic as I need to get this right before adding the prices and totals which is also extracted from the order page.

Order Form Help

Similar Tutorials

View Content

Hello guys,
please help me in building an order form, the details.
The order form consist of text box product quantity, unit price, total price, sub total price, tax, discount, grand total quantity and grand total price.
There are 8 products so there will be 8 product quantity, unit price, total price text boxes. When a user enter the product quantity and unit price, the total price column should be automatically calculated e.g. if product quantity is 8, unit price is 2 then the total price should come to 16. The sub total price will be automatically calculated which should be the addition of all total prices so as the product quantity. The user will enter the tax and discount amount which should be calculated as percentage. Tax will be added to sub total and discount will be subtracted from sub total and then the total price will be displayed in the grand total text box.

Please help me to develop this form.

Thank You

Order Form Help

Similar Tutorials

View Content

Hi their,

i'm trying to create an online order page

i'm having probelms calculating totals from the options

not sure if i've designed it correctly

i have 3 select options (with 4 different products in each)

a single checkbox for another single product

and a final select tag for amounts (500/1000/2500/5000)

i need to assign each select option a value then * it by the amount select

am i best using onchange/an array or ditching select tags for something easier

any help greatly appreciated

Marty

Order Form

Similar Tutorials

View Content

Hi,

I need help with my javascript codes to finish my order form.

The first problem I am encountering is this:

I need the quantity to appear automatically in the total quantity for sub total.

how is this?

I have assigned TotalQuantity.value for the quantity.

Thank you.

You can see the image here.
http://img821.imageshack.us/i/oderform.jpg/

Online Order Form

Similar Tutorials

View Content

Hello Guys, I have been grabbing good ideas and code from everywhere to build an online order form. I have no skill programming, but i have managed to almost finish it. However i still have two thing I cant done. Hope you can help me.
1. If any product of the "Product #2 drop-down menu" is selected, then "shipping drop-down menu" should only have "Post office option" enabled.

2. If "Shipping drop-down menu" is 7-11 or Family Mart, then "Convenience store text box" should be enabled.

You can check the whole code he http://dl.dropbox.com/u/21610873/code.txt

Thanks

Online Order Form?

Similar Tutorials

View Content

I have been playing with two options but just dont seem to get the coding right. Can someone please assist. Using ie9 but same problem with all browsers.

first snippets.
HTML:
Code:

<!-- Row 3, Col 3 purchase boxes -->
<td colspan="1" height="120" align="left">
<input style="margin-left: 60px" type="text" name="bed_359" size="3" maxlength="3" onchange="calculateValue(this.form)" /> R359</td></tr>
 
<!-- Row 10, Col 2 Order Value Box-->
<td colspan="1" align="left"><input style="margin-left: 60px" type="text" name="total" size="10" 
onfocus="this.form.elements[0].focus()" />
</td></tr>

javaScript:
Code:

// Function to calculate order value 
function calculateValue(orders) {
var orderValue = 0;
var value = 0;
var itemPrice = 0;
var itemQuantity = 0;
 
// Run through all the product fields
for(var i = 0; i < orders.elements.length; ++i) {
 
// Get the current field
formField = orders.elements[i];
 
// Get the fields name
formName = formField.name;
 
// Items price extracted from name
itemPrice = parseFloat(formName.substring(formName.lastIndexOf("_") + 1));
 
// Get the Quantity
itemQuantity = parseInt(formField.value);
 
// Update the OrderValue
if(itemQuantity >= 0) {
value = itemQuantity * itemPrice;
orderValue += value;
}
}
 
// Display the total
orders.total.value = orderValue;
}

Second code:
Code:

<!-- Row 9, Col 3 purchase boxes -->
<td colspan="1" height="120" align="left"> 
<select style="margin-left: 60px" name="shirt" value="215" onchange="calculateValue(this.form)" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option></select> R215</td></tr>

Java
Code:

// Function to calculate order value    
function calculateValue(orders) {
    var orderValue = 0;
    var value = 0;
    var itemPrice = 0;
    var itemQuantity = 0;
 
    // Run through all the product fields
    for(var i = 0; i < orders.elements.length; ++i) {
 
    // Get the current field
    formField = orders.elements[i];
 
    // Get the fields name
    formValue = formField;
 
    // Items price extracted from name
    itemPrice = formField;
 
    // Get the Quantity
    itemQuantity = formField.selectedIndex;
 
    // Update the OrderValue
    if(itemQuantity > 0) {
    orderValue += itemQuantity * itemPrice
    }
    }
 
    // Display the total
    orders.total.value = orderValue.toLocaleString();;
}

Please help its probably something simple.

Totalling Order Form

Similar Tutorials

View Content

Pizza Order Form Help!!!

Similar Tutorials

View Content

so I made this pizza order form for my ap comp sci class with javascript and html...teacher didnt realy teach javascript so i got most of javascript from online. the problem is that i have a price for everything but wen i hit the place order button, it would just reset the form...so i made it a reset button instead. heres the code:
<html>
<head>
<title>Pizza Planet</title>
<script language="javascript">

var pizzasize;
function emptyField(textObj)
{
if(textObj.value.length == 0) return true;

for(var i=0; i<textObj.value.length;i++) {
ch = textObj.value.charAt(i);
if(ch != ' ' && ch != '\t') return false;
}
return true;
}

function basecost(radioObj)
{
pizzasize = 1;
if(radioObj[0].checked) cost = 5.00; // small
if(radioObj[1].checked) {
cost = 7.00; // medium
pizzasize = 2;
}
if(radioObj[2].checked) {
cost = 9.00; // large
pizzasize = 3;
}
return cost;
}

function toppingscost(selectObj)
{
tcost = 0.0;
for(var i=0;i<selectObj.length;i++)
if(selectObj[i].selected) tcost += 0.50*pizzasize;
return tcost;
}

function extrascost(selectObj)
{
ecost = 0;
if(selectObj[0].selected) ecost += 0.00; //no extras
if(selectObj[1].selected) ecost += 1.00; // Coke
if(selectObj[2].selected) ecost += 5.00; // Hot wing 12
if(selectObj[3].selected) ecost += 3.00; // hot wing 6
if(selectObj[4].selected) ecost += 4.00; // bread sticks 12
if(selectObj[5].selected) ecost += 2.50; //bread sticks 6
return ecost;
}

function deliverycost(selectObj)
{
if(selectObj[0].selected) Dcost = 5.00;
else if(selectObj[1].selected) Dcost = 0;
return Dcost;
}

function confirmPizza(formObj)
{
if(emptyField(formObj.customer) ) {
alert("Please enter your name");
return false;
}

if(emptyField(formObj.address) ) {
alert("Please enter an address");
return false;
}

if(emptyField(formObj.email) ) {
alert("Please enter your e-mail address");
return false;
}
if(emptyField(formObj.phone) ) {
alert("Please enter your phone number");
return false;
}

total = basecost(formObj.p_size);
total +=toppingscost(formObj.tops);
total +=extrascost(formObj.xtra);
total +=deliverycost(formObj.deliv);
return confirm("The cost is " + total + ", place order?");

}

</script>

</head>
<body>
<h1>Pizza Planet</h1>

<h3><b>Pizza size</h3>
<form name="pizzaform"
onSubmit= "return confirmPizza(pizzaform)" >
</b>

Small (5.00)<input type="radio" name="p_size" value="sma">
Medium (7.00)<input type="radio" name="p_size" value="med">
Large (9.00)<input type="radio" name="p_size" value="lar">

<br>
<h3>Toppings 1</h3>
<select name="tops" size="3" multiple>
<option selected>Cheese</option>
<option>Pepperoni</option>

<option>Sausage</option>
<option>Chicken</option>
<option>Bacon</option>
<option>Pineapples</option>
<option>Jalapenos</option>
<option>Banana Peppers</option>

</select>
<h3>Toppings 2 (+.50)</h3>
<select name="tops" size="3" multiple>
<option selected>None</option>
<option>Cheese</option>
<option>Pepperoni</option>
<option>Sausage</option>
<option>Chicken</option>

<option>Bacon</option>
<option>Pineapples</option>
<option>Jalapenos</option>
<option>Banana Peppers</option>
</select>
<h3>Toppings 3 (+.50)</h3>
<select name="tops" size="3" multiple>
<option selected>None</option>

<option>Cheese</option>
<option>Pepperoni</option>
<option>Sausage</option>
<option>Chicken</option>
<option>Bacon</option>
<option>Pineapples</option>

<option>Jalapenos</option>
<option>Banana Peppers</option>
</select>

<br>
<h3>Extras <h3>
<select name="xtra" size="6" multiple>
<option selected>None</option>
<option>Coca-Cola (2-liter) (1.00)</option>
<option>Hot Wings (12) (5.00)</option>
<option>Hot Wings (6) (3.00)</option>
<option>Bread Sticks (12) (4.00)</option>
<option>Bread Sticks (6) (2.50)</option>
</select>
<br>
<br>
<h3>Is this delivery or carryout?</h3>
<select name="del" size="2" multiple>
<option>Delivery</option>
<option>Carryout</option>
</select>

<hr />
Name
<input type="text" size="20" maxlength="50" name="customer">

Address
<textarea name="address" cols="40" rows="3">
</textarea>

Email <input type="text" size="20" maxlength="50" name="email">
Phone <input type="text" size="20" maxlength="20" name="phone">
<hr>
<input type="reset" value="Reset">
</form>

<hr>
Thank you for ordering at Pizza Planet.
</body>
</html>

Order Form Totals Script - Help Please

Similar Tutorials

View Content

Hi All, my first post on CodingForums

I'm a javascript novice so looking for some help

I'm using a handy little script from he

http://www.mredkj.com/javascript/orderform.html

On an order form he

http://www.bluecoast.co.uk/test/order/form.php

I've searched the net for hours and had a pop myself but I can't figure it out and it's driving me crazy

Couple of things I'm after:

1. Need the "total price" to duplicate at the bottom of the form
2. Need exactly half the "total price" to show in both the deposit fields next to the total prices

Hopefully that makes sense, can anybody give me a hand?

Thanks in advance!
Craig

Js Order Form Formatting Questions.

Similar Tutorials

View Content

Hello fellow programmers. I am currently in a JS class and have become stomped on part of the assignment. If anyone can provide guidance on how to format these order form functions, I will be much appreciative.

1. Within the <script> tags at the top of the file, create a function named "loadform()" that displays the current date in the formdate field and then moves the cursor focus to the qtyl field and selects it. Hint: Apply both the focus() and select() methods to the qtyl input box, and run the loadform() function when the page is loaded by the browser.

2. Below the loadform() function, insert a function named total_price that calculates the sum of the numeric values of the sub1 through sub8 fields.

3. Below the total_price function, create a function named tax_price() that adds the values of the sub1 through sub6 fields and then multiples that total by 0.05. Use the dollars() function to display this value rounded to two decimal places.

Attached is a word doc of the program so not to blow this thread up. I should be able to complete the rest of the assignment once I have an understanding about the formats. If anymore information is needed, please let me know.

Javascript Order Form Help Needed

Similar Tutorials

View Content

Problem solved thanks to Philip M.
____________________________________________________________________________________

Here is the source code:
Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<HTML>
<HEAD>
<TITLE>Order Forms</TITLE>

<SCRIPT>

/******************************* Form Calculations ************************************/

function calculate(fld, price) { // fld will equal pw1 or pe1
     var dir = fld.name.charAt(1); // used to determine whether it is the East or West Form
     var num = fld.name.charAt(2); // what Item number is it
     var quant = fld.options[fld.selectedIndex].value; // how many of the items did the User choose
     var subtotal = eval(quant * price);
     // the eval converts a string to an Object property - in this case the value
     // dir = East or West & num = Item number
     // with this information we can post the result to appropriate Form &
     // to the appropriate Field on the Form 
     eval('document.order.t' + dir + num).value = fix(subtotal);
     var total = 0;
     // this loop sums the totals for each of the Items to give us the Grand Total for that Form
     for (i = 1; i < 11; i++) {
          // does that particular Item have a "total" - in other words did the User choose this Item
          var itemTotal = eval('document.order.t' + dir + i).value;
          // total is a running sum of the Form's "subtotals"
          if (parseFloat(itemTotal) > 0) total += parseFloat(itemTotal);
     }
    // prior to sticking in the Grand Total into the Total Field we need to "dollarize" the number
     eval('document.order.total' + dir ).value = fix(total);
}

// a number like 6.6 should ultimately read as $6.60 and not $6.6
// a number like 6.6275 should ultimately read as $6.63
// the fix(total) function takes care of these particular problems
function fix(total) { // ie, total == 6.6275
     var dollars = Math.floor(total); // dollars = 6

     // browsers sometimes have rounding errors - 662.75 - 600 = 62.75
     var cents = (total * 100) - (dollars * 100); 

     cents = Math.round(cents);  // 63

     if (cents < 10) cents = "0" + cents;
     // .998 will become 1.00 so we need to increment the dollar value by one
     if (cents == 100) dollars++;
     // if cents equal 0 then dollars equal total or total + 1 incase of .998
     if (dollars == total || dollars == Math.floor(total) + 1) cents = "00";

     total = dollars + "." + cents; // 6.63
     return total;
}

/******* End of Form Calculations ********/

</SCRIPT>
</HEAD>

<BODY BGCOLOR="#FFFFFF">


<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
    <td><form action="sendemail.php" method="post" name="order" id="order" onSubmit="return ValidateInput(this)"></td>
    <td><input type="hidden" name="Formulaire de commande site Pain et Passion" value=""></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td>Product</td>
    <td>Price</td>
    <td>Quantity</td>
    <td>Total</td>
</tr>
<tr>
    <td>Item 1</td>
    <td>1.99</td>
    <td><SELECT NAME="pw1" SIZE="1" ONCHANGE="calculate(this, 1.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw1" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item2</td>
    <td>2.99</td>
    <td><SELECT NAME="pw2" SIZE="1" ONCHANGE="calculate(this, 2.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw2" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>item3</td>
    <td>3.99</td>
    <td><SELECT NAME="pw3" SIZE="1" ONCHANGE="calculate(this, 3.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw3" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item3</td>
    <td>1.99</td>
    <td><SELECT NAME="pw4" SIZE="1" ONCHANGE="calculate(this, 1.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw4" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item4</td>
    <td>3.99</td>
    <td><SELECT NAME="pw5" SIZE="1" ONCHANGE="calculate(this, 3.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw5" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item5</td>
    <td>2.99</td>
    <td><SELECT NAME="pw6" SIZE="1" ONCHANGE="calculate(this, 2.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw6" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item6 </td>
    <td>4.99</td>
    <td><SELECT NAME="pw7" SIZE="1" ONCHANGE="calculate(this, 4.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw7" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item7</td>
    <td>5.99</td>
    <td><SELECT NAME="pw8" SIZE="1" ONCHANGE="calculate(this, 5.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw8" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item8</td>
    <td>1.99</td>
    <td><SELECT NAME="pw9" SIZE="1" ONCHANGE="calculate(this, 1.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw9" SIZE="10" VALUE></td>
</tr>
<tr>
    <td>Item9 (not working)</td>
    <td>5.99</td>
    <td><SELECT NAME="pw10" SIZE="1" ONCHANGE="calculate(this, 5.99)">

                            <OPTION VALUE="0">0</OPTION>
                            <OPTION VALUE="1">1</OPTION>
                            <OPTION VALUE="2">2</OPTION>
                            <OPTION VALUE="3">3</OPTION>
                            <OPTION VALUE="4">4</OPTION>
                            <OPTION VALUE="5">5</OPTION>

                            <OPTION VALUE="6">6</OPTION>
                            <OPTION VALUE="7">7</OPTION>
                            <OPTION VALUE="8">8</OPTION>
                            <OPTION VALUE="9">9</OPTION>
                            <OPTION VALUE="10">10</OPTION>
                            <OPTION VALUE="11">11</OPTION>

                            <OPTION VALUE="12">12</OPTION>
                            <OPTION VALUE="13">13</OPTION>
                            <OPTION VALUE="14">14</OPTION>
                            <OPTION VALUE="15">15</OPTION>
                            <OPTION VALUE="16">16</OPTION>
                            <OPTION VALUE="17">17</OPTION>

                            <OPTION VALUE="18">18</OPTION>
                            <OPTION VALUE="19">19</OPTION>
                            <OPTION VALUE="20">20</OPTION>
                          </SELECT></td>
    <td><INPUT TYPE="text" NAME="tw10" SIZE="10" VALUE></td>
	<tr>
    
    <td><p align="right">grand total&nbsp;&nbsp;&nbsp;&nbsp; <img src="arrow.png" width="32" height="32" border="0" alt="" align="absmiddle"></p></td>
    <td><input type="text" name="totalw" size="10" style="background: #87cefa;"></td>
	<td align="left"><input type="submit" value="SEND YOUR ORDER" style="background: #87cefa;"></td>
</tr>
</tr>
<tr>
    <td>Name</td>
    <td><input type="text" name="name"></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td>e-mail</td>
    <td><input type="text" name="e-mail"></td>
    <td></td>
    <td></td>
</tr>
<tr>
    <td>Phone</td>
    <td><input type="text" name="phone"></td>
    <td></td>
    <td></td>
</tr>
</table>
</FORM>
</BODY>
</HTML>

Order Form Doesn't Add Tax And Subtotal

Similar Tutorials

View Content

I have an order form that takes different computers and adds different accessories and grabs all the prices and adds them together for a subTotal price. Tax is figured as well. The problem is when I try to add the taxAmt to the subTotal. Let's say the subTotal is 600.00 and tax is 30.00, the total would show 600.0030.00 instead of 630.00. Here is my calcPrice function:
Code:

function calcPrice() {
    var subTotal;
//chesk to see which computer is selected in the selection list
if (document.forms[0].compType[0].checked == true) {
subTotal=parseFloat(document.forms[0].compType[0].value);
}
else if (document.forms[0].compType[1].checked == true) {
subTotal=parseFloat(document.forms[0].compType[1].value);
}
else if (document.forms[0].compType[2].checked == true) {
subTotal=parseFloat(document.forms[0].compType[2].value);
}

//gets the optical drive selection and price
product = document.getElementById("optical");
optPrice = parseFloat(product.options[product.selectedIndex].value);

//adds optical drive selction to the subtotal price
subTotal = subTotal + optPrice;

//checks all checkboxes for checked and adds the value to the subtotal
if (document.forms[0].accType[0].checked == true) {
subTotal = subTotal + parseFloat(document.forms[0].accType[0].value);
}
if (document.forms[0].accType[1].checked == true) {
    subTotal = subTotal + parseFloat(document.forms[0].accType[1].value);
}
if (document.forms[0].accType[2].checked == true) {
    subTotal = subTotal + parseFloat(document.forms[0].accType[2].value);
}

//calculate tax amount
taxAmt = (subTotal * .06).toFixed(2);

//adds the subtotal and tax amounts to get total cost
 totalAmt = subTotal + taxAmt; 

//displays the amounts in the text boxes
document.getElementById("sub").value = subTotal;
document.getElementById("tax").value = taxAmt;
document.getElementById("tot").value = totalAmt;

One more thing is that I validate a phone number as well. Would I just setup an if statement saying if re.test=false then show alert?
Code:

 //validates phone number   
  var re = /^\(?[2-9]\d{2}[\)\.-]?\s?\d{3}[\s\.-]?\d{4}$/
  return re.test(phoneNumber);

Thanks for the help

Order Form With Total Price Calculation

Similar Tutorials

View Content

I'm building an order form for a food delivery business website and I'm struggling of getting the page to display the total prices of the items on the order page before the order is sent.

The form ideally consists of:
Product 1 - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden)
Product 2 - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden)
.....
Product n - Quantity (input type="number" field) - Price: $xxx.xx(may also be hidden)

Total price: (sum of all selected multiplied by the single prices)

Name
Email
Telephone
Address
Postal Code
Comment

SUBMIT BUTTON

What I have so far is:

HTML:
Code:

<!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="en-us" http-equiv="Content-Language" />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>COMIDA GREGA OLYMPO</title>
<style type="text/css">
.Subheader {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: large;
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
    text-transform: none;
    color: #000000;
    text-decoration: none;
}
.Header {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    font-size: x-large;
    font-weight: bold;
    font-style: normal;
    font-variant: normal;
    text-transform: capitalize;
    text-decoration: none;
}
.auto-style1 {
    text-align: center;
}
</style>
<link rel="stylesheet" type="text/css" media="screen" href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.css" />
<style type="text/css">
    a.fancybox img {
        border: none;
        box-shadow: 0 1px 7px rgba(0,0,0,0.6);
        -o-transform: scale(1,1); -ms-transform: scale(1,1); -moz-transform: scale(1,1); -webkit-transform: scale(1,1); transform: scale(1,1); -o-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
    } 
    a.fancybox:hover img {
        position: relative; z-index: 999; -o-transform: scale(1.03,1.03); -ms-transform: scale(1.03,1.03); -moz-transform: scale(1.03,1.03); -webkit-transform: scale(1.03,1.03); transform: scale(1.03,1.03);
    }
.auto-style2 {
    border-style: solid;
    border-width: 2px;
}
</style>
</head>

<body class="Subheader" style="background-image: url('bg.png')">

<p><br />
</p>

<table align="center" style="width: 940px" bgcolor="white" class="auto-style2">
    <tr>
        <td style="height: 33px"><span class="Header">HEADER IMAGE + LOGO</span></td>
    </tr>
    <tr>
        <td style="height: 33px">
        <table style="width: 100%">
            <tr>
                <td class="auto-style1" style="width: 17%">
                <a href="#prediastia">ПРЕДЯСТИЯ</a></td>
                <td class="auto-style1" style="width: 17%"><a href="#osnovni">
                ОСНОВНИ</a></td>
                <td class="auto-style1" style="width: 17%"><a href="#deserti">
                ДЕСЕРТИ</a></td>
                <td class="auto-style1" style="width: 17%"><a href="#napitki">
                НАПИТКИ</a></td>
                <td class="auto-style1" style="width: 17%"><a href="order.html">ПОРЪЧАЙ</a></td>
                <td class="auto-style1" style="width: 15%">КОНТАКТИ</td>
            </tr>
        </table>
        </td>
    </tr>
    <tr>
        <td>
        <form name="contactform" method="post" action="send_form_email.php">
            <table width="750px" align="center">
                <tr>
                    <td valign="top" width="40%">
                        <label for="first_name">ГРЪЦКА САЛАТА</label>
                    </td>
                    <td valign="top" width="30%">
                        <input  type="number" placeholder="0" name="gruckasalata" maxlength="5" size="5">
                    </td>
                    <td width="30%"><img class="fancybox" alt="" height="42" src="grucka-salata.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" width="40%">
                        <label for="first_name">МУСАКА</label>
                    </td>
                    <td valign="top" width="30%">
                        <input  type="number" placeholder="0" name="musaka" maxlength="5" size="5">
                    </td>
                    <td width="30%"><img class="fancybox" alt="" height="42" src="musaka.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
                    </td>
                </tr>
                <tr>
                    <td valign="top" width="40%">
                        <label for="first_name">ПЪЛНЕНИ ЧУШКИ</label>
                    </td>
                    <td valign="top" width="30%">
                        <input  type="number" placeholder="0" name="pulnenichushki" maxlength="5" size="5">
                    </td>
                    <td width="30%"><img class="fancybox" alt="" height="42" src="palneni_chushki26.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
                    </td>
                </tr>
<tr>
                    <td valign="top" width="40%">
                        <label for="first_name">СВИНСКО СЪС ЗЕЛЕ</label>
                    </td>
                    <td valign="top" width="30%">
                        <input  type="number" placeholder="0" name="svinskosuszele" maxlength="5" size="5">
                    </td>
                    <td width="30%"><img class="fancybox" alt="" height="42" src="zele-sus-svinsko.jpg" width="50" title="Пояснение дасасдх асдх асдхлдас да дас дас - Цена: 23 евро" />
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <label for="first_name">Name *</label>
                    </td>
                    <td valign="top">
                        <input  type="text" name="name" maxlength="50" size="30">
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <label for="email">Email Address *</label>
                    </td>
                    <td valign="top">
                        <input  type="text" name="email" maxlength="80" size="30">
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <label for="telephone">Telephone Number *</label>
                    </td>
                    <td valign="top">
                        <input  type="text" name="telephone" maxlength="30" size="30">
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <label for="telephone">Address *</label>
                    </td>
                    <td valign="top">
                        <textarea  name="address" maxlength="1000" cols="45" rows="6"></textarea>
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <label for="telephone">Postal Code *</label>
                    </td>
                    <td valign="top">
                        <input  type="text" name="postalcode" maxlength="30" size="30">
                    </td>
                </tr>
                <tr>
                    <td valign="top">
                        <label for="comments">Comments</label>
                    </td>
                    <td valign="top">
                        <textarea  name="comments" maxlength="1000" cols="45" rows="6"></textarea>
                    </td>
                </tr>
                <tr>
                    <td colspan="2" style="text-align:center">
                        <input type="submit" value="Submit">
                    </td>
                </tr>
            </table>
        </form></td>
    </tr>
    <tr>
        <td><span class="Header">FOOTER</span></td>
    </tr>
</table>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/1.3.4/jquery.fancybox-1.3.4.pack.min.js"></script>
<script type="text/javascript">
    $(function($){
        var addToAll = false;
        var gallery = false;
        var titlePosition = 'inside';
        $(addToAll ? 'img' : 'img.fancybox').each(function(){
            var $this = $(this);
            var title = $this.attr('title');
            var src = $this.attr('data-big') || $this.attr('src');
            var a = $('<a href="#" class="fancybox"></a>').attr('href', src).attr('title', title);
            $this.wrap(a);
        });
        if (gallery)
            $('a.fancybox').attr('rel', 'fancyboxgallery');
        $('a.fancybox').fancybox({
            titlePosition: titlePosition
        });
    });
    $.noConflict();
</script>
</body>

</html>

and the PHP:

PHP Code:
<?php

if(isset($_POST['email'])) {

    // EDIT THE 2 LINES BELOW AS REQUIRED

    $email_to = "georgi.pepelyankov@gmail.com";

    $email_subject = "COMIDA GREGA ORDER";

    function died($error) {

        // your error code can go here

        echo "We are very sorry, but there were error(s) found with the form you submitted. ";

        echo "These errors appear below.<br /><br />";

        echo $error."<br /><br />";

        echo "Please go back and fix these errors.<br /><br />";

        die();

    }

    // validation expected data exists

    if(!isset($_POST['name']) ||

        !isset($_POST['email']) ||

        !isset($_POST['telephone']) ||

        !isset($_POST['address']) ||

        !isset($_POST['postalcode']) ||

        !isset($_POST['gruckasalata']) ||

        !isset($_POST['musaka']) ||

        !isset($_POST['pulnenichushki']) ||

        !isset($_POST['svinskosuszele']) ||

        !isset($_POST['comments'])) {

        died('We are sorry, but there appears to be a problem with the form you submitted.');

    }

    $name = $_POST['name']; // required

    $gruckasalata = $_POST['gruckasalata']; // not required

    $musaka = $_POST['musaka']; // not required

    $pulnenichushki = $_POST['pulnenichushki']; // not required

    $svinskosuszele = $_POST['svinskosuszele']; // not required

    $email_from = $_POST['email']; // required

    $telephone = $_POST['telephone']; // required

    $address = $_POST['address']; // required

    $postal_code = $_POST['postalcode']; // required

    $comments = $_POST['comments']; // not required

    $error_message = "";

    $email_exp = '/^[A-Za-z0-9._%-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,4}$/';

  if(!preg_match($email_exp,$email_from)) {

    $error_message .= 'The Email Address you entered does not appear to be valid.<br />';

  }

  if(strlen($error_message) > 0) {

    died($error_message);

  }

    $email_message = "Form details below.\n\n";

    function clean_string($string) {

      $bad = array("content-type","bcc:","to:","cc:","href");

      return str_replace($bad,"",$string);

    }

    $email_message .= "ГРЪЦКА САЛАТА: ".clean_string($gruckasalata)."\n";

    $email_message .= "МУСАКА: ".clean_string($musaka)."\n";

    $email_message .= "ПЪЛНЕНИ ЧУШКИ: ".clean_string($pulnenichushki)."\n";

    $email_message .= "СВИНСКО СЪС ЗЕЛЕ: ".clean_string($svinskosuszele)."\n";

    $email_message .= "Name: ".clean_string($name)."\n";

    $email_message .= "Email: ".clean_string($email_from)."\n";

    $email_message .= "Telephone: ".clean_string($telephone)."\n";

    $email_message .= "Address: ".clean_string($address)."\n";

    $email_message .= "Postal Code: ".clean_string($postalcode)."\n";

    $email_message .= "Comments: ".clean_string($comments)."\n";

// create email headers

$headers = 'From: '.$email_from."\r\n".

'Reply-To: '.$email_from."\r\n" .

'X-Mailer: PHP/' . phpversion();

@mail($email_to, $email_subject, $email_message, $headers);

?>



Thank you for contacting us. We will be in touch with you very soon.

<?php

}

?>

Please, can you help me integrate a total of all the selected prices to be displayed somewhere in the form?

Thanks in advance!

Regards,

Georgi