Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Need help with calculating the total rent from form fields

    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>
    Last edited by Broll05; 12-07-2010 at 12:51 AM.

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Well, just for starters, you aren't converting the strings you are getting from your form fields into numbers. Use parseFloat().
    Code:
    var pHours = parseFloat( document.forms[0].pickupHours.value )
    And so on.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    Broll05 (12-07-2010)

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,210
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    And your pDate and rDate values are worse off then that. You go to all the trouble to validate them to be legal dates but then ignore all that and just get them as strings.

    Why would you think you can subtract a pair of strings??
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #4
    New Coder
    Join Date
    Dec 2010
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I am new to the java scene and this is a project I am doing to understand certain concepts. This part has been giving me a lot of trouble and this is just what I have gotten so far. I appreciate your help and am asking for your expertise to help me rectify the issue.

    The parsefloat comment really helps but I was wondering if you can use that to get the information from each field?

    Can I take your example and apply that to the rest of the fields, as well as the date fields?

    The date fields are the ones I am having the biggest problem with.

    Any advise or help you can give on converting the date fields to be able to work with my overall equation, I would greatly appreciate. I look forward to learning and gaining information from your expertise. Thank you.

  • #5
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,922
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    As I have already remarked -

    As I see it the trouble is that you are trying to run before you can walk. Your rental/hire script involves too many features which you have not mastered. Create simpler scripts which enable you to understand how to set and read cookies or determine the difference between two dates without the excessive complications you have built in. Just take one step at a time. Understand A - move on to B, understand B - move on to C, and so on. You cannot expect to acquire expertise and fluency overnight.
    Quote Originally Posted by Broll05 View Post
    I am new to the java scene
    Java and Javascript are entirely different programming languages, in spite of the confusingly similar names.

    As Old Pedant has said, data entered into textboxes is a string value and must be converted into numbers (there are several ways of doing this) before they can be used in arithmetic calculations. Otherwise you are trying to add "Apples" to "Oranges" - the result of that is "OrangesApples".

    If you want us to find errors in your code please strip it down and post only the relevant parts - cut out the rotating images and similar stuff. You can do a lot yourself by using your error console, and by including alerts at suitable locations to check on the values of the variables and their type, example:-
    alert (equip + " " + typeof equip);
    If typeof returns string then you must change the value to a number.
    The + addition sign will concatenate strings, so "2" + "4" = 24.

    The functions checkvalidPdate() and checkvalidRdate() are simply duplicates. One function is enough with the relevant date being passed to it.

    Finally, form validation of the pattern if (document.forms[0].firstName.value=="") is barely worthy of the name, and virtually useless, as even a single space, an X or a ? will return false, that is pass the validation. Numeric values, such as zip codes and phone numbers, should be validated as such. Ditto email addresses. This topic has been covered many times before in this forum.
    Last edited by Philip M; 12-07-2010 at 08:28 AM. Reason: Typo


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •