Truemag

  • Categories
    • Tips And Tricks
    • Internet
    • PHP
    • Javascript
    • CSharp
    • SQL Server
    • Linux
  • Lastest Videos
  • Our Demos
  • About
  • Contact
  • Home
  • Write With Us
  • Job Request
Home Javascript JavaScript Display Leaving Confirm Box Leave This Page Or Stay On This Page

JavaScript Display Leaving Confirm Box Leave This Page Or Stay On This Page

You maybe already see a confirm box with 2 buttons: Leave This Page and Stay On This Page when you try to leave current page by closing browser/tab or navigating to another page/link.

Confirm Box Leave This Page Or Stay On This Page

Confirm Box Leave This Page Or Stay On This Page

Some people think this feature is annoy as they have to click Leave this Page button all the time to close the page/tab but others think this is very useful if they’re on a form with some fields. All changes they made or information they filled would be lost if they make a mistake, no chance to roll back. Stay on this Page button will save time for people in many cases.

Display Leaving Confirm Box Leave This Page Or Stay On This Page

<!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>Display Leaving Confirm Box Leave This Page Or Stay On This Page</title>
<meta name="robots" content="noindex, nofollow" />
</head>
 
<body>
<script language="JavaScript">
  window.onbeforeunload = confirmExit;
  function confirmExit()
  {
    return "You have attempted to leave this page." + "\n\n" + "The changes you made will be lost if you navigate away from this page.";
  }
</script>
</body>
</html>

<!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>Display Leaving Confirm Box Leave This Page Or Stay On This Page</title> <meta name="robots" content="noindex, nofollow" /> </head> <body> <script language="JavaScript"> window.onbeforeunload = confirmExit; function confirmExit() { return "You have attempted to leave this page." + "\n\n" + "The changes you made will be lost if you navigate away from this page."; } </script> </body> </html>

Note: we can add some break lines (\n) to make the message clear and easier to understand.

Display Leaving Confirm Box Leave This Page Or Stay On This Page

Display Leaving Confirm Box Leave This Page Or Stay On This Page

So, if they made a mistake or are not sure, click Stay on this Page to stay. Or they’re sure and want to leave, click Leave this Page.

Feb 23, 2012Hoan Huynh
JavaScript Alert Multiple LinesWhere Are ASPStateTempApplications and ASPStateTempSessions Tables?
You Might Also Like:
  • Auto Rotate Web Page Title With JavaScript
  • Create Count Down Download Page With JavaScript
  • WordPress View Large Image Without Leaving Current Page
  • Javascript Problem Set focus textbox on Firefox
  • Get Image Width Height With JQuery And JavaScript
  • Javascript generate a random number using Math.random
  • JavaScript Get Radio Button Value
  • Javascript remove vietnamese accents
  • How To Ask People To Like Your Facebook Page On The Landing Page
  • Submit Content To facebook Fan Page Automatically
Hoan Huynh

Hoan Huynh is the founder and head of 4rapiddev.com. Reach him at [email protected]

10 years ago Javascriptonbeforeunload1,111
0
GooglePlus
0
Facebook
0
Twitter
0
Digg
0
Delicious
0
Stumbleupon
0
Linkedin
0
Pinterest
Most Viewed
PHP Download Image Or File From URL
24,451 views
Notepad Plus Plus Compare Plugin
How To Install Compare Text Plugin In Notepad Plus Plus
21,829 views
Microsoft SQL Server 2008 Attach Remove Log
Delete, Shrink, Eliminate Transaction Log .LDF File
17,646 views
JQuery Allow only numeric characters or only alphabet characters in textbox
14,984 views
C# Read Json From URL And Parse/Deserialize Json
11,710 views
4 Rapid Development is a central page that is targeted at newbie and professional programmers, database administrators, system admin, web masters and bloggers.
Recent Posts
  • Things to Learn about Installingderm Loan Type S
  • Online Photo Editor – Free Photoediting Software
  • A Guide to Finding the Best Paper Sellers
  • Photoediting in Home Isn’t Hard to Do!

  • Free Photo Editor Online
Categories
  • CSharp (45)
  • Facebook Graph API (19)
  • Google API (7)
  • Internet (87)
  • iPhone XCode (8)
  • Javascript (35)
  • Linux (27)
  • MySQL (16)
  • PHP (84)
  • Problem Issue Error (29)
  • Resources (32)
  • SQL Server (25)
  • Timeline (5)
  • Tips And Tricks (141)
  • Uncategorized (647)
Recommended
  • Custom Software Development Company
  • Online Useful Tools
  • Premium Themes
  • VPS
2014 © 4 Rapid Development