Member Avatar for carlcarman

the problem I am having is in getting my page to produce an expected delivery date. The calculation function is working fine. I want to use the same id to figure out when the product will be delivered. I know my second set of if statements is wrong but I cant figure out how to take my current date and add days to it and have it output the delivery date. This is not a homework assignment. It is a practice for our final and I know the instructor is going to include it. Any help will be appreciated.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
 
<HTML><HEAD><TITLE>New Page 1</TITLE>
<META http-equiv=Content-Language content=en-us>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
<META content="MSHTML 6.00.2900.3492" name=GENERATOR>
<META content=FrontPage.Editor.Document name=ProgId>
 
 
 
 
<script> 
 
	//function getTax()
	//{
		//alert("get tax function");
	//}
 
	function calculatePrice()
	{
			//alert("inside calculate price");
				var inPrice = parseFloat( document.getElementById("price").value);
					//alert(inPrice);
				
				var inQuantity = (document.getElementById("quantity").value);
					//alert(inQuantity);	
				var shipping = parseFloat( document.getElementById("shipping").value);
				var inTax = parseFloat( document.getElementById("state").value);
					//alert(inTax);
				var state;	
				var totalPrice;  
				
					//alert(document.getElementById("state").selectedIndex);
				
				if(document.getElementById("state").selectedIndex==0)
				{
					state = 0.06;
					//document.getElementById("state").option[0].value;
				 // alert("Iowa 0.06");
				}
				
				if(document.getElementById("state").selectedIndex==1)
				{
					state = 0.085;
					//alert("Illinois 0.085");
				}
				
				if(document.getElementById("state").selectedIndex==2)
				{
					state = 0.7;
					//alert("Indiana 0.7");
				}
				
				if(document.getElementById("state").selectedIndex==3)
				{
					state = 0;
					//alert("Other");
				}
				
				var shipping = parseFloat( document.getElementById("shipping").value);
					//alert(shipping);	
				
				if(document.getElementById("shipping").selectedIndex==0)
				{
					shipping = 0.02;
					//alert("standard ups 0.02");
				}
				
				if(document.getElementById("shipping").selectedIndex==1)
				{
					shipping = 0.01;
					//alert("US Mail 0.01");
				}
				
				if(document.getElementById("shipping").selectedIndex==2)
				{
					shipping = 0.05;
					//alert("Overnight 0.05");
				}
				
				if(document.getElementById("shipping").selectedIndex==3)
				{
					shipping = 0;
					//alert("Pick up no charge");
				}
				
				
				 inTax = inPrice * state ;
				 //alert(inTax);
				 totalPrice = inTax + (inPrice * shipping) + inPrice ;
				 document.getElementById("total").value = totalPrice;
				 //alert("intax" + inTax + "qty" + inQuantity + "del" + shipping)
				 
				 var now = new date()
				 var expectedDate 
				if(document.getElementById("shipping").selectedIndex==0)
				{
					 now + 3;
					//document.getElementById("state").option[0].value;
				  alert("option 1");
				}
				
				if(document.getElementById("shipping").selectedIndex==1)
				{
					 now + 5;
					alert("option 2");
				}
				
				if(document.getElementById("shipping").selectedIndex==2)
				{
					 now + 1;
					alert("option 3");
				}
				
				if(document.getElementById("shipping").selectedIndex==3)
				{
					 now;
					alert("get it yourself");
					
				}
				
				document.getElementById("delivery").value = ExpectedDate;
 
 
 
 
	}
</script>
</HEAD>
<BODY text=#330000 bgColor=#00ccff ;>
<H1 align=center>Calculate Your Order</H1>
<FORM name=frmProd  method=GET>
<P>Price: <input type="text" name="price" value="" id="price" /></P>
<P>Quantity: <SELECT size=1 type="text" name="quantity" id="quantity" /> <OPTION value=1 selected>1</OPTION> 
     <OPTION value=2>2</OPTION> <OPTION value=3>3</OPTION> &nbsp;</SELECT></P>
<P>State: <SELECT size=1 type = "text" name="state" id = "state"  onChange ="getTax()"/> 
	<OPTION selected value=0.06>Iowa</OPTION>
	<OPTION value=0.085 >Illinois</OPTION>  		    
    <OPTION value=0.7>Indiana</OPTION> 
    <OPTION  value=0>Other</OPTION> &nbsp;</SELECT></P>
<P>Delivery <SELECT size=1 name=shipping id="shipping"> 
	<OPTION value=0.02 selected>Standard UPS - 3 Days</OPTION> 	
    <OPTION value=0.01>US Mail - 5 Days</OPTION>
    <OPTION value=0.05>Overnight - 1 Day</OPTION> 
    <OPTION value=0>Pickup</OPTION>
   </SELECT><BR>Method:</P>
<P>Your Total is: <INPUT value=0.00 name="total" id = "total" /></P>
<P>Expected Delivery Date:	
  <input type="text" name="delivery" id="delivery">
</P>
<P><INPUT type="button" name = "button" id = "button" value="Calculate My Order Now!"  onclick = "calculatePrice()" name=btnSubmit></P></FORM></BODY></HTML>
  • 2 Contributors
  • 2 Replies
  • 124 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by carlcarman
Member Avatar for Airshow

Carl,

There's a number of things here ....

First - how to get the selected option's value from a select menu:

//within function calculatePrice
var menu = document.getElementById("state");
var state = (menu) ? menu[menu.selectedIndex].value : null;

Note the safety in case the menu is not found (prevents javascript from choking).
This will significantly simplify your code.

Then, in the case of shipping, you effectively have two data items per option; namely a shipping rate and a delivery estimate in days. With a little thought you can pack both data items into the options value, like this

<select name="shipping" id="shipping">
<option value="0.02|3" selected="selected">Standard UPS - 3 Days</option>
<option value="0.01|5">US Mail - 5 Days</option>
<option value="0.05|1">Overnight - 1 Day</option>
<option value="0|0">Pickup</option>
</select>

You then have to handle shipping differently in javascript:

//within function calculatePrice
menu = document.getElementById("shipping");
var val = (menu) ? menu[menu.selectedIndex].value : null;
if(val){
	var shipping = parseFloat(val.split('|')[0]);
	var deliveryDays = parseInt(val.split('|')[1]);
	var expectedDate = (deliveryDays) ? deliveryDate(new Date(), deliveryDays, 17.00) : null;
}
else{
	var shipping = null;
	var expectedDate = null;
}

where deliveryDate is a separate function

function deliveryDate(d, addDays, timeThreshold){
	if(!d) return null;
	addDays = (!addDays) ? 0 : addDays;
	timeThreshold = (typeof timeThreshold === 'undefined') ? 24 : timeThreshold;//Specifies the 24-hr clock time after which delivery will push into a further day, eg 16.5 for 4:30pm
	var extraMS = 3600 * 1000 * ( (addDays * 24) + (24-timeThreshold) );
	return new Date(d.getTime() + extraMS);
}

Then when you come to display the date:

//within function calculatePrice
el = document.getElementById("delivery");
if(el) { el.value = (expectedDate) ? formatDate(expectedDate, 'mm-dd-yyyy') : '-'; }

Where formatDate is a separate function:

function formatDate(d, format){
	format = (!format) ? 'mm-dd-yyyy' : format;
	switch(format){
	case 'yyyy-mm-dd':
		return d.getFullYear() + "-" + (1+d.getMonth()) + "-" + d.getDate();
		break;
	case 'dd-mm-yyyy':
		return d.getDate() + "-" + (1+d.getMonth()) + "-" + d.getFullYear();
		break;
	default:
		return (1+d.getMonth()) + "-" + d.getDate() + "-" + d.getFullYear();
		break;
	}
}

Hope this helps.

Airshow

Edited by Airshow because: n/a
Member Avatar for carlcarman

thanks airshow I appreciated your response and I am going to give this a try

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.