...

View Full Version : Need help with calculating the total rent from form fields



Broll05
12-07-2010, 12:18 AM
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.



<!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>

Old Pedant
12-07-2010, 12:58 AM
Well, just for starters, you aren't converting the strings you are getting from your form fields into numbers. Use parseFloat().


var pHours = parseFloat( document.forms[0].pickupHours.value )

And so on.

Old Pedant
12-07-2010, 01:01 AM
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??

Broll05
12-07-2010, 02:42 AM
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.

Philip M
12-07-2010, 07:37 AM
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.



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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum