JavaScript - 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> Similar TutorialsI've been trying to write a script that activates a confirm box when a browser window is closed. I want this to occur only when they try to close the window, not if they click on links on the page to navigate elsewhere. The confirm box then gives the option to continue closing as they intended or, if they click on ok (or cancel if it's easier), navigate to another page I specify. The script below works but it displays a confirm box when you close the window and click on links. Code: <script type="text/javascript"> function show_confirm() { var r=confirm("Wait! Would you like check out yahoo?"); if (r==true) { window.open("http://www.yahoo.com"); } else { window.close(); } } window.onbeforeunload = show_confirm; </script> I understand you may be able to create a variable that you then attach to any links on the page you don't want to activate the confirm box. I don't know how to do this. Thank you. how can you do onclick="return getconfirm('do you want to logout?');" onClick="window.location('logout.asp');" on the same button , if confirm then go url else stay here ? thank you hi all, ok, i have been asked to alter our project management system (one i wrote) to alert users to the fact that they are closing windows with unsaved work in - some of them forget they have edited a page and just close the window. 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 http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <script type="text/javascript"> var docChanged = false; function docChange(){ docChanged = true; } function checkForChanges() { if(docChanged == true) { return "All changes made to this page will be lost!"; } } window.onbeforeunload = checkForChanges; </script> </head> <body> <form id="form1" name="form1" method="post" action=""> <label> <input type="text" name="one" id="one" onchange="docChange()" /> </label> <label> <input type="text" name="two" id="two" onchange="docChange()" /> </label> <br /> <a href='http://www.google.com'>Google</a> </form> </body> </html> the above will prompt the user if they want to save if fields etc have been changed. is there a way i can dynimcally add the onchange="docChange()" to all fields on a page? the system has hundreds of fields and doing a mass search and replace might be very dangerous lol. im pretty sure it can be done but wouldnt know where to start. ive never really had enough time to learn all the window.addEventListener stuff. i dont want to show the confirm message when using window.onbeforeunload. Please suggest a solution to hide the confirm message.. I'm working on a bank website that needs disclaimers on their external links. I've searched for a tutorial or a script I could understand but need additional help if anyone is willing.. Here's my page with external links: http://designphilanthropy.org/services/links/ Here's the js I used from the previous bank design (I don't see any code here that will do what I need): Code: <script language="javascript"> <!-- Hide window.resizeTo(440, 440); function go() { var width = screen.width; var height = screen.height; if(width<650) { width = 600; height = 400; } else { width = width - 200; height = height - 100; } window.resizeTo(width, height); location.href=""; } // end Hide --> </script> And here's the code on the "yes" button: Code: <input type="button" VALUE="YES" onclick="javascript:go();"> The link opens the disclaimer and populates the url in the browser, but I don't know how to write the js for it to continue to the destination after clicking "yes" Any help would be greatly appreciated... I took a class with just a little bit of JavaScript in it and didn't learn as much as I'd hoped. Is there a website that walks through JavaScript that easy to understand? Thanks Hi everyone I am a newbie with respect to programming and this is my first post I have a small problem, probably very basic to everyone except me, and would appreciate and value your advice I have entered below a javascript I am using on my website. This script is designed to automatically insert videos based on keywords and works perfectly except that my visitors are taken away from my website when they use it. Can someone please tell me what code to insert, and where, in order get the script to open in a new page. I am aware how to do this in html using target ="blank" but do not know how to do it in javascript. Thankyou in anticipation, the code I am using is below: Code: <!-- BEGIN HostDomain --> <div id="HostDomain_DivId"> </div> <script src="http://app.HostDomain.com/script/HostDomainUtils.js"> </script> <script language="JavaScript" type="text/javascript" src="http://app.HostDomain.com/script/widgetTy pe/carousel/ptContentflow.js" load="fancyScrollbar"> </script> <script type="text/javascript"> /* Do not change the values given below. */ var HostDomain_Organization_Name = "MySite"; var HostDomain_Organization_ID = "xxxxxxxx"; var HostDomain_Feed_ID = "xxxxxxx"; var HostDomain_DivId = "HostDomain_DivId"; var HostDomain_AppServerPath = "http://app.HostDomain.com"; </script> <script src="http://app.HostDomain.com/script/HostDoma in.js"> </script> <!-- END HostDomain --></font></td> Hello, I'm new to Javascript, but have been programming in PHP and other web codes for 4 years now. I was wondering how you would check if a checkbox was ticked, upon its selection and then unhide HTML content, and then hide such content when deselected.. So far I have this: Code: <script type="text/javascript"> function Agree() { document.getElementById("stepTwo").className = ""; } </script> Which is called by onclick="Agree()" on the select box itself.. I understand an if statement is needed, but how would one go about doing this as my if statements do not appear to be working. Hi I really really really need your help since I have no idea about this. How can I insert the Javascript Confirmation Alert into the del.php file? I have this del.php file PHP Code: <?php require ("include/config.php"); $id=$_REQUEST['id']; $strSQL = "DELETE FROM change WHERE id = '".$id."' "; $objQuery = odbc_exec($conn,$strSQL); if($objQuery) { echo "<script language='Javascript'>alert('Deleted.'); window.location=\""."index.php?action=syif\"</script>"; } else { echo "Error Delete [".$strSQL."]"; } odbc_close($conn); ?> This is the confirmation javascript Code: <html> <head> <script type="text/javascript"> function show_confirm() { var r=confirm("Delete?"); if (r==true) { alert("Deleted!"); } else { alert("Cancelled!"); } } </script> </head> <body> <input type="button" onclick="show_confirm()" value="Show confirm box" /> </body> </html> http://tinyurl.com/bw2y3sr This is my site and I want to create a Yes and No dialogue box when user closes a browser so this popup confirm dialogue should appear. Can anyone help me? Hello all, and thank you for your coments, I want to preserve a 16/9 aspect ratio to the window after any resize, making the width a function of the height. As I have a window.resizeTo() inside the window.onresize event function, the infinite loop is served. How may I quit it? Code: <html><head><title>Title</title><script languaje="javascript"> const c_ra=16/9; window.onresize = function WindowReSize() { var myWidth = 0, myHeight = 0; if( typeof( window.innerWidth ) == 'number' ) { //Non-IE // myWidth = window.innerWidth; myHeight = window.innerHeight; } else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) { //IE 6+ in 'standards compliant mode' // myWidth = document.documentElement.clientWidth; myHeight = document.documentElement.clientHeight; } myWidth = Math.floor(myHeight*c_ra); window.resizeTo(myWidth,myHeight); // ** CAUTION resize event in a onresize event handler ! }; </script></head><body><p>Hello World</p></body></html> write a function that when called will ask the user for a series of numbers to be entered 1 at a time and then calculates their sum,their average,and their average rounded up then output the results. for example the average of a series of numbers is found by adding the numbers together and dividing by the amount of numbers entered (so the average of 2,5,1 and 7 is equal to (2+5+1+7)/4=15/4=3.75). After following the instructions from the answer below: http://bytes.com/topic/javascript/an...arent-document I was able to have the child window perform the function defined in the parent window. The function was to only have an alert window pop up as the child page was loading. I easily modified this to my intention which was to have a parent function performed when the child window was clicked. Using the body tag: Code: <body onclick="parent.FUNCTION NAME HERE()"> I first change the method in which the function would be triggered, all went well there. then I tried to change which function would be triggered. (Basically use the function I wanted to happen on click of the child window rather then the function from the test). Once I did this switch, nothing happens. The site this is being used on is: http://tylerpanesar.ca/ What I want is when the menu bar is open in the parent window, the user chooses a link and the menu closes and goes to that link in the child window. This already works. However if the user opens the menu bar and then changes there mind and continues with the page the are currently on (clicks any content in the child window), the menu stays open. Currently the menu "hides" only when you choose one of the menu items, but it does not "hide" when you CLICK on child document. If you could figure out how to get it to "hide" on a "mouse out" that would be the better option. I attempted this method however i could only get it to "toggle" the menu on "mouse out". This method does however create an annoying flicker when you hover over the menu items (as it is toggling the open menu command I guess). If I had it "hide" the menu on "mouse out" it would "hide" as soon as you moved off of the main button. The viewer doesn't even have a chance to click a link. or at least that is what happens when I did it. You may have a better method to achieve this. The script that tells it to hide on click is within a jQuery function: Code: menua .click( function(){ menu.hide(); the code I used for the mouseout toggle was: Code: menu .mouseout( function(){ menu.toggle(); Here is the script that I am currently using for the menu to open and the "click" hide feature. This menu feature comes from the following help: http://www.bennadel.com/blog/1740-Bu...-FaceBook-.htm Code: <script type="text/javascript"> jQuery(function( $ ){ var menuRoot = $( "#menu-root" ); var menu = $( "#menu" ); var menua = $( "#menu a" ); // Hook up menu root click event. menuRoot .attr( "href", "javascript:void( 0 )" ) .click( function(){ // Toggle the menu display. menu.toggle(); // Blur the link to remove focus. menuRoot.blur(); // Cancel event (and its bubbling). return( false ); } ) ; menua .click( function(){ // Toggle the menu display. menu.hide(); } ) ; // Hook up a click handler on the document so that // we can hide the menu if it is not the target of // the mouse click. $( document ).click( function( event ){ // Check to see if this came from the menu. if ( menu.is( ":visible" ) && !$( event.target ).closest( "#menu" ).size() ){ // The click came outside the menu, so // close the menu. menu.hide(); } } ); }); </script> I've tried adding the click to "hide" menu feature to the child document but there is now menu in that document for it to "hide". What I was trying to was have the child document execute a function from the parent document and have that function executed IN the parent document. I've tried the technique from the link in my very first post but I believe it only calls the function from the parent and executes it IN the child. Which does not work for me as the menu is not in the child. There should be a way to make the child execute a function FOR the parent. I apologize for this very wordy post, but I am extremely frustrated with this now as I have been trying to get this to work for a few weeks now. Any help would be greatly appreciated. Thanks in advance, Tyler I have created and opened a child window called "checkwin" and have written some data to it. If the data is valid, I want the user to click on the 'CONFIRM' button on the child window, at which time I want the "submit()" function for the form on the parent window to be executed. If the data is invalid the user clicks on 'MODIFY' and I want focus to return to a field on the parent form. However, when I click on the "CONFIRM" or "MODIFY" buttons on the child window, nothing happens. Here is the code: Code: checkwin.document.write("</td></tr><tr><td align='right'><input type='button' value='CONFIRM' onclick='opener.document.personnel_form.submit()'></td><td></td><td><input type='button' value='MODIFY' onclick='opener.document.personnel_form.first_name.focus()'></td></tr></table>") Here is the program: http://www.1728.com/newwindow.htm Basically, I want to input a number in the input box, which assigns a number to the variable numval located at document.box1.b1. When clicking on the "new window" button, an alert displays the input box value, then another window opens and displays the integers 1 through 12 and the amount squared. I would like the new window to obtain the number from the previous window so that the new window will display integers (and their squares) from 1 to the value of numval. Hello- I wish to not have an alert box, but if I remove the alert the function after the alert doesn't fire. Not sure what the issue could be, so if any js gurus out there can lend any assists, it would be most appreciated. Thanks. Alex- Code: function showPrintView(view){ var win2; win2 = window.open("trans?print=true","Window2","width=600,height=600,scrollbars=yes"); if(view=='1') {win2.alert('Preview'); win2.showView1(); } if(view=='2') {win2.alert('Preview'); win2.showView2();} if(view=='3') {win2.alert('Preview'); win2.showView3();} }; Hi guys, i hope u can help me. This is the link(and i have a function called check_group): Code: <a href="javascript:viod(0)" onclick="check_group('<?php echo $codart ?>','<?php echo $codfam ?>')"><?php echo $gname?></a> I have a function called check group. I want to open that link in a new window. Thanks. I don't get to use javascript as much as I would like, but I am having a problem with a page so I stripped out all the extras and got down to just the part I am having a problem with and I think this should fill the div with the id testingdiv when the page loads but it doesn't. Any help would be appreciated. Code: <script type="text/javascript"> function getClientList(listtype) { document.getElementById('testingdiv').innerHTML = listtype; } window.onload = getClientList('own'); </script> <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <input type="hidden" name="hidden" id="hidden" value="99" /> <title>untitled</title> </head> <body> <div id="testingdiv"></div> </body> </html> I am making a website where when the user clicks on a hyperlink in a list, a new browser window opens and displays a file called "faqs.html". The code for my function so far is: Code: function ValidateWebDetails { window.open("faqs.html") } To test whether the function actually worked, I first attached it to a button with this code: Code: <form method="post"> <input type="button" value="Go To FAQS" onClick="ValidateWebDetails()" </form> However, when I went to test the button, when I clicked on it, no new window was displayed and I was wondering what I could do to fix the problem. Any help is appreciated! |