JavaScript - Onbeforeunload Not Setting Data Values
I set some value like in onbeforeUnload
document.getElementById('hGridStateModified').value='YES'; The value is not set and is not available at server side. ( I set some value like document.getElementById('hGridStateModified').value='YES'; The value is available at server side. ) Code /// START f(window.body){ window.body.onbeforeunload = saveBeforeExit; // IE else }else{ window.onbeforeunload = saveBeforeExit; // FX } function saveBeforeExit() { show_confirm(); } function show_confirm() { var result=confirm("Do you want to save the changes before navigating."); if (result==true) { document.getElementById('hGridStateModified').value='YES'; return true; } else { document.getElementById('hGridStateModified').value='NO'; return true; } } ///END Thanks in advance. Best Regards, Sandip Similar TutorialsHello! Is there any way to disable this annoying event? (I'm using IE) Code: <html> <body onbeforeunload="alert('bye');"> </body> </html> I tried to put this at the address bar: Code: javascript: document.body.onbeforeunload=''; But it didn't worker either... Anyone has an idea? Thanks! In my onbeforeunload event, it asked the user whether they want to leave the page or stay on it. When they click "stay on page", I want it to then redirect them to another webpage in the same window. Is there a way to do this, without just showing/hiding divs? Can I override the function? I'm currently trying to do it this way(as seen below) but now the dialog box is not showing up at all. It was working before Any ideas as to what I'm doing wrong, or how to accomplish this task? Code: <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" /> <title>The Shocking Truth - Cabot Market Letter</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#vid").show(); $("#div2").hide(); }); var test = 1; function manipulatetest() { test = 2; } window.onbeforeunload = onbeforeunload_Handler; function onbeforeunload_Handler() { if (test == 1){ $("#vid").hide(); $("#div2").show(); var confirm = confirm("Would you like to stay on this page?"); if (confirm == true) { window.location = "http://www.google.com"; } } } </script> </head> <style type="text/css"> body { background-color: #e0e6e5; } #vid { margin: 20px auto; width: 920px; } </style> <body> <div id="vid"> <video width="920" height="540" autoplay preload controls> <source src="shockingtruth.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="shockingtruth.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="shockingtruth.ogv" type='video/ogg; codecs="theora, vorbis"'> <object width="920" height="540" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.7.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"clip": {"url": "http://www.cabot.net/videos/shocking-truth/shockingtruth.mp4", "autoPlay":true, "autoBuffering":true}}' /> <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p> </object> </video> </div> <div id="div2"> <video width="920" height="540" autoplay preload controls> <source src="shockingtruth.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> <source src="shockingtruth.webm" type='video/webm; codecs="vp8, vorbis"'> <source src="shockingtruth.ogv" type='video/ogg; codecs="theora, vorbis"'> <object width="920" height="540" type="application/x-shockwave-flash" data="flowplayer-3.2.1.swf"> <param name="movie" value="flowplayer-3.2.7.swf" /> <param name="allowfullscreen" value="true" /> <param name="flashvars" value='config={"clip": {"url": "http://www.cabot.net/videos/shocking-truth/shockingtruth.mp4", "autoPlay":true, "autoBuffering":true}}' /> <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p> </object> </video> </div> <p style="text-align: center;"><a href="http://www.cabot.net/info/cml/cmlld03.aspx?source=ed01" onclick="manipulatetest();">Click Here To Order</a></p> </body> </html> This is a bit of a strange one. I have been trying to call a function in a child object from the parent object but the child seems to be going out of scope in onbeforeunload function. These function calls work outside of a onbeforeunload, so it only fails when called in onbeforeunload. I can fix it by making the child object a global but I was trying to avoid that. Anyone know why my childobject is out of scope when called in onbeforeunload? Notice I call that same function in windows onload event and it works fine. Here is the code (I have simplified as much as possible to just show the error): Code: <html> <head> <title>Broken Page</title> <script language="javascript" type="text/javascript"> var myparent; function windowLaunch() { myparent = new parent(); myparent.getchildvalue(); window.onbeforeunload = myparent.getchildvalue; } function parent() { this.mychild = new childobject("myinput"); this.getchildvalue = function() { var tmpval = this.mychild.returnvalue(); }; } function childobject(thename) { this.myprop = thename; this.returnvalue = function() { return (document.getElementById(this.myprop).value); }; } </script> </head> <body id="thebody" onload="windowLaunch();"> <div id="outerdiv"> <span title="This Input Box">My Input:</span><br /> <input id="myinput" style="width: 290px"/> </div> </body> </html> Hi, I have the following problem: When I use this script it pops up both if a user tries to close the window and also if he presses the back button. Please tell how to show another window or do another action when the back button is pressed? I know it is possible although a lot of people say it's not. Code: <script type="text/javascript" type="text/javascript"> window.onbeforeunload = confirmExit; function confirmExit() { return "blabla"; } </script> I am creating a popup for an online store so that when prospective customers put something in their shopping cart and then try to leave the site, they are offered a coupon in a popup. I am using the following code (FYI, uses prototype.js) Code: Event.observe(document.body, 'click', function(event) { if (Event.element(event).tagName == 'A' || Event.element(event).tagName == 'INPUT' || Event.element(event).tagName == 'IMG') { staying_in_site = true; } }); window.onbeforeunload = popup; function popup() { if (staying_in_site) { return; } if (popup_displayed) { return; } popup_displayed = true; //popup displayed here } The popup is not displayed when the user clicks on a link or submits a form (correct behavior) and it is displayed when the user types in a URL or tries to close the browser (also correct behavior). The problem is when the user clicks the back or forward buttons, the popup is displayed which is not the desired behavior. Anyone here have a solution for this? i dont want to show the confirm message when using window.onbeforeunload. Please suggest a solution to hide the confirm message.. -------------------------------------------------------------------------------- I am currently using onbeforeunload to show user a message 'click ok to save, cancel to continue' Question.. On browser close event (user clicks on window close button 'X' on browser), I do not want to show the message to user. Can you please help with how to check the browser close event. Other details.. If user closes the browser, my ajax request is not getting executed and hence I am not able to save the data to database. Hence I am planning not to show the popup when user closes the browser. Thanks in advance... Sandip Hi there, I'm absolute newbie in javascript, so the question may look not worth asking for you. Sorry for that. My situation is like that: I want to make a preview of form data using javascript. After the button "preview" is clicked I start showing div dialog which should contain data entered by users. The problem is that because my div dialog is coded in the same page as form I can get only default values. It means - after making some changes, they are not visible. To get and print the value of input I use this code: Code: <script type="text/javascript"> mytext = document.getElementById('name').value; document.write(mytext); </script> How it would be possible to update the values on "on click" event. Thank you very much for considering this question. is it possible to capture the control.event or element.event that was fired to invoke the onbeforeunload event. for example, if a button is clicked and it causes the onbeforeunload event to fire can i determine which button was clicked. thanks Hi gud mng, I have one problem... How to process textbox values/ call textbox values in JS through a Java program. My text box values are dates. I have to process these dates. Like in online banking we select day to know our transactions. After submitting we get results. remember my files are in my directory only. No need of database. My files are look like 20100929, 20100930, 20101001 For epoch_classes.js, epoch_styles.css u can download coding from this link : http://www.javascriptkit.com/script/...ch/index.shtml Code: Code: <html> <table width="900" border="0" cellpadding="10" cellspacing="10" style="padding:0"> <tr><td id="leftcolumn" width="170" align="left" valign="top"> <div style="margin-left:0px;margin-top:0px"><h3 class="left"><span class="left_h2">Select Option</span></h3> <a rel="nofollow" target="_top" href="day_wise.htm" >Day-wise</a><br /> <br /> <a rel="nofollow" target="_top" href="between.htm" >Between Days</a> <link rel="stylesheet" type="text/css" href="epoch_styles.css" /> <script type="text/javascript" src="epoch_classes.js"></script> <script type="text/javascript"> var cal1, cal2; window.onload = function () { cal1= new Epoch('epoch_popup','popup',document.getElementById('popup_container1')); cal2= new Epoch('epoch_popup','popup',document.getElementById('popup_container2')); }; /*............*/ function confirmation(f) { var startdate = f.fromdate.value var enddate = f.todate.value var myday=new Date() var yr=myday.getFullYear() var mn=myday.getMonth()+1 var dt=myday.getDate() var today="" var present, ys, ms, ds, ye,me,de, start, end if(mn < 10) { mn = "0" + mn } if(dt <10) { dt = "0" + dt } today= yr + "/" + mn + "/" + dt present=yr + "/" + mn + "/" +dt if (today < startdate ) { alert (" Start date should not be exceed to-day's date " + present ) startdate.focus() return false } if (today < enddate ) { alert (" End date should not be exceed to-day's date " + present ) enddate.focus() return false } if (today == startdate ) { alert(" You are selected to-days date as Starting day" ); } var answer = confirm("Do you want to continue ?") if (answer) { if( startdate < enddate) alert("Dates between " + startdate + " to " + enddate + " are confirmed" ) else alert("Dates between " + enddate + " to " + startdate + " are confirmed" ) } else { alert("Date not confirmed") window.location="to_date.htm"; } ys= startdate.substring(0,4); ms= startdate.substring(5,7); ds= startdate.substring(8,10); start=ys + "" + ms + "" +ds ye= enddate.substring(0,4); me= enddate.substring(5,7); de= enddate.substring(8,10); end=ye + "" + me + "" +de } /*.......................................................*/ </script> <div style="margin-left:100px;"> <body> <style type="text/css"> #conf { margin-left:115px; } </style> <td align="left" valign="top"> <table width="100" border="0" cellpadding="0" cellspacing="0"> <td style="padding-top:0px"> </table> <h4>From Date</h4> <form name= "formbet" id="placeholder" method="post" action="#" > <input id="popup_container1" type="text" name= "fromdate" maxlength="10" size="20"/> <td align="left" valign="top"> <table width="300" border="0" cellpadding="0" cellspacing="0"> <td style="padding-top:20px"> <h4>To Date</h4> <input id="popup_container2" type="text" name= "todate" maxlength="10" size="20"/> <br /> <br /> <input id="conf" type="button" onclick="confirmation(this.form)" value="Submit"> </form> </body> </html> In my coding, ys, ms, ds represents year starting, month starting, starting day... ye, me, de represents end... start,end gives file names in the format of yyyymmdd now i want to process files from 20100101 to 20100930 means from date is 2010/01/01 and to date is 2010/09/30 if i press submit button the files from 20100101 to 20100930 are processes here ys=2010 ms=01 ds =01 and ye=2010 me=09 de= 30 For this how do i call these textbox values (from date text box and todate) to another program (java) Thanks in advance. I have a bunch of checkboxes like below that the user can check some or all and click the button and see the values of all the selected checkboxes. How can I do that? Code: <script> function alertValues(){ } </script> <input type="checkbox" class ="normal2" value="131971" name="list[]" > <input type="checkbox" class ="normal2" value="131973" name="list[]" > <input type="checkbox" class ="normal2" value="131975" name="list[]" > <input type="checkbox" class ="normal2" value="131977" name="list[]" > <input type="button" onClick="alertValues()" Hi, What's a good way/ideal data structure to achieve this? The objective of the code/function is to map user-inputted strings into a pair of specific, hard-coded strings. For example, say the user types "firefox" or "ff", or "fx". The output would be the pair ["browser", "mozilla"], for example. I'm currently using a multidimensional array, but it feels inefficient and I'm having trouble mapping an arbitrary number of inputs into 2 outputs. Code: var strings = [ ["input1", "output1a"], ["input2", "output1a"], ["input3", "output1a"], ["input1", "output1b"], ["input2", "output1b"], ["input3", "output1b"] ]; How should I map the elements ["input1", "input2", "input3"] => ["output1a", "output1b"] ? Another method I used previously was a massive switch statement. This fulfills my needs, but I'm not sure about the efficiency (though if I remember correctly, switch statements become more efficient as size grows, since it uses a hash table?). Code: switch (input) { case "ff": case "firefox": case "fx" : case "ffox": return ["browser", "mozilla"]; case "ie": case "internet explorer": return ["browser", "microsoft"]; ... } I cannot get the cookie to save, I'm pretty new at web designing in general. If you could, the name of the cookie be cirulcook, also any advice you would have for me would be great! Code: <script><!-- function SETcookie(){ document.cookie="Selected="+document.getElementById('myList').selectedIndex; } function GETcookie(){ if (document.cookie){ eval(document.cookie); document.getElementById('myList').selectedIndex=Selected; }}// --></script> </head> <body onLoad="GETcookie()"> <select id="myList" onChange="SETcookie()"> <option value="1">Option 1</option> <option value="2">Option 2</option> <option value="3">Option 3</option> <option value="4">Option 4</option> </select> Hello, I need your help. I have the following drop-down box as an example: [== FRUITS ==] apples oranges pairs kiwi lemon How can I use the code below to set the value of the drop down without knowing its value number (3)? document.getElementById('BOX1').value = 'pairs' Much thanks and appreciation for everyones help. Cheers, J Hi and hope someone can help. I'm setting up a fictitious shopping page which uses cookies to remember what a user has selected. The products are photographs that the user can select either framed or unframed versions and I'm trying to put a confirmation box if the user actually requests framed and unframed versions of the same photograph. The code I'm using actually worked before I tried to add this extra functionality but I can't work out how to test for this extra bit. Here's my code and it sets cookies with names as either lulworth01 for the unframed version or lulworth01f for the framed version. The bits that work are in black and my extra code for this test is in red. Any help would be appreciated. Thanks Rog Code: function getCookie(name) { var index = cart.indexOf(name + "="); if(index == -1) return null; index = cart.indexOf("=", index) +1; var endstr = cart.indexOf(";",index); if (endstr == -1) endstr = cart.length; return unescape(cart.substring(index, endstr)); } function setCookie(name) { if ((name.charAt(name.length-1)='f') && (getCookie(name.substring(0,10))!=null)) { confirm("You seem to have placed orders for both a mounted and framed image of the same photograph.\n\nIs that OK?"); } else { alert("Thank you.\n\nYour basket has been updated."); x=parseInt(getCookie(name)) || 0; y=x+1; var today = new Date(); var expiry = new Date(today.getTime()+28*24*60*60*1000); // plus 28 days document.cookie=name+"="+y+";expires="+expiry.toGMTString(); cart = document.cookie; } } Hi and hope someone can help, I'm reading a book on Javascript and I've been doing their tutorial on getting and setting cookies. Trouble is my code, and their supplied sample, don't work. It is supposed to display a very simple page with an image. When you click the image it is supposed to open up a new (very simple) page. Your help resolving this is greatly appreciated. My thanks, R Code follows... Code: <html> <head> <title>main page</title> <script language=JavaScript> var lastUpdated = new Date("Tue, 28 Dec 2010"); function getCookieValue(cookieName) { var cookieValue = document.cookie; var cookieStartsAt = cookieValue.indexOf(" " + cookieName + "="); if (cookieStartsAt == -1) { cookieStartsAt = cookieValue.indexOf(cookieName + "="); } if (cookieStartsAt == -1) { cookieValue = null; } else { cookieStartsAt = cookieValue.indexOf("=", cookieStartsAt) + 1; var cookieEndsAt = cookieValue.indexOf(";", cookieStartsAt); if (cookieEndsAt == -1) { cookieEndsAt = cookieValue.length; } cookieValue = unescape(cookieValue.substring(cookieStartsAt,cookieEndsAt)); } return cookieValue; } function setCookie(cookieName, cookieValue, cookiePath, cookieExpires) { cookieValue = escape(cookieValue); if (cookieExpires == "") { var nowDate = new Date(); nowDate.setMonth(nowDate.getMonth() + 6); cookieExpires = nowDate.toGMTString(); } if (cookiePath != "") { cookiePath = ";Path=" + cookiePath; } document.cookie = cookieName + "=" + cookieValue + ";expires=" + cookieExpires + cookiePath; } </script> </head> <body> <h2 align=center> Welcome to my website </h2> <br><br> <center> <script> var lastVisit = getCookieValue("Last Visit"); if (lastVisit != null) { lastVisit = new Date(lastVisit); if (lastVisit < lastUpdated) { document.write("<a href=\"WhatsNew.htm\">"); document.write("<img src=\"new.jpg\" border=0></a>"); } } var nowDate = new Date(); setCookie("LastVisit", nowDate.toGMTString(),"","") </script> </center> </body> </html> I am trying to get my script working in FF, IE and Opera but the getAttribute isn't working for me. The domain name isn't getting picked up I have tried this: var dom_name = document.getElementById('dom_nm').getAttribute("value",2); and this: var dom_name = document.getElementById('dom_nm').getAttribute('value'); After this I use the domain name like this: Code: if (per2 == 0) { item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" No Privacy."; } if (per2 > 0){ item_desc = "Domain Name and DNS set up. Domain: "+dom_name+" Period: "+per1+"year"+" Including: Privacy: "+per2+"year."; } document.getElementById('item_pay').setAttribute("value","item_desc"); ( I also tried: Code: document.getElementById('item_pay').setAttribute('value') = item_desc; but that didn't seem to work either ) The HTML is like this: Code: <div style="margin: 5px auto;"> <table> <th>Your New Domain Name Order</th> <tr><td>Product</td><td>Cost</td><td>Years (max. 10)</td><td style="text-align: right;">Total Cost</td></tr> <tr><td id="dom_nm" value="John.Doe"><?php echo "Domain: $N_dom.$N_tld" ?></td><td id="price" value = '<?php echo "$priceN" ?>' ><?php echo $priceN ?></td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_1" size = '10' value = '<?php echo "$period_1" ?>' ></td><td><input type='TEXT' id="total_1" style="text-align: right;" value = '<?php echo "$total_1" ?>'></td></tr> <tr><td>Domain Privacy</td><td>8.70</td><td><input style="background-color: yellow; font-weight: bold;" type='TEXT' id="per_2" size = '10' value = '<?php echo "$period_2" ?>'></td><td><input type='TEXT' id="total_2" style="text-align: right;" value = '<?php echo "$total_2" ?>'></td></tr> <tr><td>Total Order.</td><td> --- </td><td> --- </td><td><input type='TEXT' id="total_3" style="text-align: right; font-weight: bold;" value = '<?php echo "$total_3" ?>'></td></tr> </table> </div> The result is that I get a zero ( 0 ) where the domain should be. Like this: Domain Name and DNS set up. Domain: 0 Period: 2year Including: Privacy: 2year. Plus Free Blog Install. Any ideas what I am doing wrong ? Thanks Hi All, I would like to enable / disable my field validation based upon the status of a given checkbox in my form but I am unsure about how to "unset" the varibles that control the validation. If the user clicks the checkbox, this displays the fields ant enables my validation just fine. But if the user then unckeck the box, the field is hidden but the validation remains enabled and the form cannot be submitted. Here is my code: Code: if (document.getElementById("OnAirVariance").checked) { var sprytextfield3 = new Spry.Widget.ValidationTextField("spryStartTime", "time", {validateOn:["blur"], format:"HH:mm:ss", useCharacterMasking:true}); var sprytextfield4 = new Spry.Widget.ValidationTextField("spryEndTime", "time", {format:"HH:mm:ss", useCharacterMasking:true, validateOn:["blur"]}); var sprytextfield5 = new Spry.Widget.ValidationTextField("spryMaterialID", "none", {validateOn:["blur"]}); var sprytextfield6 = new Spry.Widget.ValidationTextField("spryTitle", "none", {validateOn:["blur"]}); }else{ I NEED TO BE ABLE TO REVERSE THE SET VARIABLES SO THE VALIDATION WILL NOT STAY IN EFFCT } Thanks in advance for any help. Kind regards, Ken Greetings and salutations. My text and what I have been researching on the internet has not been very helpful in determining the code that I need to prevent a user from entering his/her information more than once. Here is my current code Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD.HTML 4.01 Transitional//EN" "http://www.w3.org/TR/htm14/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Kudler Fine Foods Contact Page</title> <meta http-equiv="Content-type" content="text/html; charset=iso-8859-1"> <!---Kami Demnyan 21 December 2009--> <script type="text/javascript"> /*<![CDATA[*/ <!--This code ensures that the zip code and telephone numbers are actual numerical digits, not letters--> function checkForNumber(fieldValue) { var numberCheck = isNaN(fieldValue); if (numberCheck == true) { window.alert ("Please enter a numerical value"); return false; } } <!--This code ensures that all of the fields contain text and I have it functioning now--> function submitForm() { if (document.forms[0].name.value == "" || document.forms[0].address.value == "" || document.forms[0].city.value == "" || document.forms[0].state.value == "" || document.forms[0].zip.value == "" || document.forms[0].phone.value == "" || document.forms[0].email.value == "") { window.alert("Please enter your missing information"); return false; } else return true; } function getCookie(NameOfCookie) { if (document.cookie.length > 0) { begin = document.cookie.indexOf(NameOfCookie+"="); if (begin != -1) { begin += NameOfCookie.length+1; end = document.cookie.indexOf(";", begin); if (end == -1) end = document.cookie.length; return unescape(document.cookie.substring(begin, end)); } } return null; } function setCookie(NameOfCookie, value, expiredays) { var ExpireDate = new Date (); ExpireDate.setTime(ExpireDate.getTime() + (expiredays * 24 * 3600 * 1000)); document.cookie = NameOfCookie + "=" + escape(value) + ((expiredays == null) ? "" : "; expires=" + ExpireDate.toGMTString()); } function delCookie (NameOfCookie){ if (getCookie(NameOfCookie)) { document.cookie = NameOfCookie + "=" +"; expires=Tues, 02-Feb-10 00:00:01 GMT"; } } /*]]>*/ </script> </head> <body> <h1> KUDLER FINE FOODS </h1> <h2> JOIN OUR MAILING LIST</h2> <!--This is where the user will input all of their information to join the mailing list--> <form action="completeform.html" method="get" onsubmit="return submitForm();" enctype="application/x-www-form-urlencoded"> <p>Name<br /> <input type="text" name="name" size="50" /></p> <p>Address<br /> <input type="text" name="address" size="50" /></p> <p>City, State, Zip <br /> <input type="text" name="city" size="30" /> <input type="text" name="state" size="3" /> <input type="text" name="zip" size="10"; onchange="return checkForNumber(this.value)"; /></p> <p>Telephone<br /> <input type="text" name="phone" size="25" onchange="return checkForNumber(this.value)"; /></p> <p>Email Address<br /> <input type="text" name="email" size="50" /></p> <!--This is where the submit and reset buttons are located--> <p><input type="submit" value="Submit Form" /> <p><input type="reset" value="Reset Form" /> </form> </body> </html> I have created a new web page to link the duplicate cookie too, titled doubleinfo.html. This is what I am using to let the user know that their information has already been entered. My text is telling me that I need to look for a nextform() function, but I didn't have to write one so what would I need to do, if anything, to start the document.cookie = "name" codes? Any help would be greatly appreciated, thanks in advance. Hi Guys , This is the urgnt requirement , I want to change the Browsers setting languge through java script ,and according to it , The data wht I enter dhould be change .Thanks In advance |