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 6 of 6
  1. #1
    New Coder
    Join Date
    Dec 2010
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Need help with beginning Javascript Code for window.confirm() function

    I am having some difficulty in constructing a window.confirm() function that works with my code. So if the form data is valid, I need to use a window.confirm() dialog box to show the user's total cost based on the rental rate of equipment chosen and the reservation period. The user must accept the cost by pressing the confirm button, and if user cancels do not submit data. I have written this code but cannot figure out how to find the number of days from the 2 date fields and use that to calculate and display the total cost. Any help with this will be greatly appreciate. Thanks so much.

    [This is the part I am having trouble with:]

    //confirm submit and display rental cost
    Code:
    			 	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)
    		
    				function confirmSubmit() {
    				var submitForm = window.confirm("'The total rental cost is: ' + total");
    				if (submitForm == true) 
    					return true;
    					return false;
    				}
    [Below is the code I have so far:]
    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);
    			}
    
    			
    				
    			//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 date
    			
    				if (document.forms[0].pickupDate.value == "'' || '(mm/dd/yyyy)'" ) {
    					window.alert("Please enter your Pick-up Date.");
    					document.forms[0].pickupDate.focus();
    					valid = false;
    					return valid;
    				}
    				
    				today = new Date();
    				year = today.getFullYear() ;
    				month = today.getMonth();
    				day = today.getDate();
    				
    				//validate pickup date format
    				
    				var re =/^\d{1,2}(\-|\/|\.)\d{1,2}\1\d{2,4}$/
    	
    				if(document.forms[0].pickupDate.value != '' && 		!document.forms[0].pickupDate.value.match(re)) { 
    					window.alert("Invalid date format: " + document.forms[0].pickupDate.value); 
    					document.forms[0].pickupDate.focus();
    					valid=false;
    					return valid;
    				}
    	
    				var date;
    				var input2=document.forms[0].pickupDate.value;
    				var cyear = parseInt(input2.substring(6,10));
    				var cmonth = parseInt(input2.substring(0,2)) - 1;
    				var cday = parseInt(input2.substring(3,5));
    	
    				if ( month < cmonth ){
    					date = year - cyear - 1;
    				}
    				else if ( month < cmonth ){
    					date = cyear - year;
    				}
    				else if ( month == cmonth ){
    					if ( cday < day ){
    						date = cyear - year - 1;
    					}
    					else if ( day > cday ){
    						date= cyear - year;
    					}
    					else if ( day == cday ){
    						date = cyear - year-1;
    					}
    				}
    	
    				if(date < 2){
    					window.alert('Must be atleast 2 days from today');
    					valid=false;
    					return valid;
    				}
    				
    				//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 date
    			
    				if (document.forms[0].returnDate.value == "'' || '(mm/dd/yyyy)'" ) {
    					window.alert("Please enter your Return Date.");
    					document.forms[0].returnDate.focus();
    					valid = false;
    					return valid;
    				}
    				
    				//validate return date format
    				
    				if(document.forms[0].returnDate.value != '' && !document.forms[0].returnDate.value.match(re)) { 
    					window.alert("Invalid date format: " + document.forms[0].returnDate.value); 
    					document.forms[0].returnDate.focus();
    					valid=false;
    					return valid;
    				}
    	
    				if(document.forms[0].returnDate.value <= document.forms[0].pickupDate.value){
    					window.alert("Please choose later date");
    					valid=false;
    					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;
    				}	
    				
    				//confirm submit and display rental cost
    			
    			 	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)
    		
    				function confirmSubmit() {
    				var submitForm = window.confirm("'The total rental cost is: ' + total");
    				if (submitForm == true) 
    					return true;
    					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" name = "pickupDate" value = "(mm/dd/yyyy)"/>
    				</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" name = "returnDate" value = "(mm/dd/yyyy)"/>
    				</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"/>
    				</td>
    			</tr>
    		</table>
    	</form>
    
    
    </body>
    </html>
    Last edited by Broll05; 12-06-2010 at 05:54 PM.

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Here is a script to validate a date and check that the date is at least two days ahead of today. You should be able to adapt it. Obviously it is simple to calculate the hours difference.

    Code:
    <html>
    <head>
    
    <script type = "text/javascript">
    
    function checkValidDate(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
    }
    
    }
    
    </script>
    
    </head>
    
    <body>
    ENTER A DATE at least two days ahead of today's date (USA format MM/DD/YYYY) <input type = "text" id = "dateIn" onchange = checkValidDate(this.value)>
    
    </body>
    </html>
    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.

    The trouble with requiring an age of 18+ is that some people may not answer truthfully. And what if the users enters "Mickey Mouse"? And do you really require or need people to specify their return time to +-30 mintes?

    You are proposing to use mailto:. The trouble with using this method (mailto) to send form results is its unpredictability. The method it is highly dependent on the browser in use and the email client in use (some people have only Yahoo or Hotmail). In particular, your visitor must have Outlook or Outlook Express as the default client for this to work correctly. Even if your visitor is using Internet Explorer, but the default mail client is different (e.g. Eudora), your mailto form will not work. With all of the browser troubles, you're likely to lose about half of your users' messages. Most of the email clients that can successfully send a mail will prompt the user by a security dialog prior to sending - this can scare many users from continuing. Also, what about people with Javascript disabled? If you are going to use a form then use a server-side formmail script as the action - there are several good free ones out there.

    I have to say that there are many infelicities with your code. As this is plainly a commercial application I would suggest that you pay a professional to do the job properly. It will cost you far more in lost sales if users have a poor experience with your site perceiving it as amateur, and abandon you in favour of a competitor for ever.


    BTW, when posting here please follow the posting guidelines and wrap your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

    "One of the secrets of life is that all that is really worth the doing is what we do for others." - Lewis Carroll
    Last edited by Philip M; 12-06-2010 at 05:41 PM.

  • #3
    New Coder
    Join Date
    Dec 2010
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks for your response as this definitely helps me out with calling and validating a date function. This is just for a project I am doing to learn certain steps on how to understand Javascript. I appreciate all your help but I am really curious on how to take the pick up date field and the return date field and find the number of days so I can calculate the total cost of the rental equipment. Also, I am confused on how to display the total cost in a window.confirm() dialog box. If you could use your expertise to help me with this part that would be fantastic. Thank you so much for all your help.

  • #4
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    I am glad to hear that you do not intend this to be a real website.

    Code:
    <script type = "text/javascript">
    var amount = 100;
    window.confirm(" The total rental cost is $" + amount + "\n Click OK to accept, Cancel to decline")
    </script>

  • #5
    New Coder
    Join Date
    Dec 2010
    Posts
    20
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks that will definitely help. Thats all I need? How can I incorporate the math equation from my first post, and where about do I put this function in the body part of the code to get the correct total amount? I think that the mat equation is right, but I am just not sure how to incorporate that part into a function which displays the total. You have been such a great help and I can't thank you enough. Thank You.

    The code I am trying to use for the math equation is as follows, but I'm not sure where to put it into the body so the window.confirm() dialog box pops up and displays the correct total amount. This is where the day part comes in and where I have been having some trouble.

    Code:
                      <script>              
                                    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)
    		
    				function confirmSubmit() {
    				var submitForm = window.confirm("'The total rental cost is: ' + total");
    				if (submitForm == true) 
    					return true;
    					return false;
    				}
    
    var amount = total;
    window.confirm(" The total rental cost is $" + amount + "\n Click OK to accept, Cancel to decline")
    
    
                </script>
    Last edited by Broll05; 12-06-2010 at 08:19 PM.

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,918
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    Your function validateForm() should be

    Code:
    //.......................
    
    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>
    There is no point in the several examples of

    valid=false;
    return valid;

    Just return false;

    Your script should only reach the window.confirm dialog if all the other validaton tests pass, that is return true, aand the script is not terminated by return false.

  • Users who have thanked Philip M for this post:

    Broll05 (12-07-2010)


  •  

    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
    •