Things couldn’t be worse when you were half way editing something and accidentally navigated away from the editing page after a whole hour of typing work. Hitting the back button of your browser neither helped, all you had done was gone anyway.
This must be remedied in some way, if you are creating an application that needs the user to input stuff, especially lengthy articles. One approach is to automate draft saving every a few minutes, the other is to warn the user before he or she either intentionally or inadvertently navigate away from the editor page. You can achieve this by a straightforward snippet of JavaScript:
var warning = false;
window.onbeforeunload = function() {
if (warning) {
return 'You have unsaved changes.';
}
}The warning variable can be timely altered according to the editing activities by the user. For instance, it is set true if the editing field is changed or does not equal to default value, or if the user triggers the onKeyUp / onChange event of any input fields:
var editor_form = document.getElementById("form_id");
for (var i = 0; i < editor_form.length; i++) {
editor_form[i].onchange = function() {
warning = true;
}
}This snippet must be put at the end of the page. Also, to avoid the warning when you press the form submit button, add this snippet after that:
document.getElementById("submit_button_id").onclick = function() {
warning = false;
}
Nice post. I’d really love to use this method but I’m having trouble implementing it correctly. It seems when I try to add javascript at the end of the page, my header javascript function breaks down. Here is my code, please help if you get a moment. Thanks!
var warning = false;
window.onbeforeunload = function() {
if (warning) {
return ‘You have unsaved changes.’;
}
}
function updateTextBox(val)
{
if(val == “1”)
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “[email protected]”;
}
else if(val == “2”)
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “[email protected]”;
}
else if(val == “3”)
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “[email protected]”;
}
else if(val == “4”)
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “[email protected]”;
}
else if(val == “5”)
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “[email protected]”;
}
else
{
document.forms[’emailSelect’].elements[‘Recipient’].value = “Select from the menu above.”;
}
}
…
I have a question or comment regarding:
Choose one of the following…
completed orders
pending orders
invoices or payments
user accounts or technical issues
general inquiries
…
<!–
var editor_form = document.getElementById("emailSelectID");
for (var i = 0; i
Oh crap, I’m sorry it looks like the comment system deleted all my tags… do you have another way I can post it?
Just paste your code on pastebin.com and leave the link to snippet within a comment
It shows different behaviors in IE and mozilla.
I want to run some javascript function just as the user clicks the browser close button or alt+F4 etc.
Pingback: How to show modalwindow when user is leaving a webpage? | active questions php
Pingback: How to show modalwindow when user is leaving a webpage?