Today I saw one forum question which was asking, how to show confirmation dialog on client side when moving out of current page or section. And thought of writing this blog.
Showing popup message is very easy job which you can do on clientside (javascript) "window.onbeforeunload" event, you can assign function to this client side event which will be called just before your page gets unload on client machine.
window.onbeforeunload = function() {
if (confirm("Are you sure you want to navigate away from this page?"))
return true;
else
return false;
}
But the bigger question is... How do you will identify that some value has been entered or changed by the user?
There is a way to find if there is change in input control value. Each input control has a attribute which starts with "default", like for textbox it is "defaultValue" and for radio/checkbox it is "defaultChecked" and "defaultSelected" for dropdown. When page gets rendered the "default" attribute will have value same as the actual value property of input controls. But when user enters some new value, the defaultValue/ defaultChecked/ defaultSelected attribute value don't change.
You can make use of "default" attribute to compare it with current value of input control and see if some thing is modified. If any input control value is modified you can show confirmation to end user otherwise don't need to show any confirmation dialog. Here is a simple Javascript method to do this.
function formIsModified(oForm)
{
var el, opt, hasDefault, i = 0, j;
var bValidate = true;
while (el = oForm.elements[i++]) {
switch (el.type)
{
case 'text' :
case 'textarea' :
if(isNaN(el.value) || el.value.replace(/ /g,'') == '')
{
if(el.value != el.defaultValue){return true;}
}
else
{
if(parseFloat(el.value) != parseFloat(el.defaultValue)){return true;}
}
break;
case 'checkbox' :
case 'radio' :
bValidate = true;
if(el.type == 'checkbox')
{
if(typeof(el.validate) != 'undefined')
{
if(el.validate.toLowerCase() == 'no')
bValidate = false;
}
}
if(bValidate)
{
if (el.checked != el.defaultChecked)
{
if(el.name == '')
{
break;
}
else
{
return true;
}
}
}
case 'select-one' :
case 'select-multiple' :
j = 0, hasDefault = false;
try
{
while (opt = el.options[j++])
if (opt.defaultSelected) hasDefault = true;
j = hasDefault ? 0 : 1;
while (opt = el.options[j++])
if (opt.selected != opt.defaultSelected) {return true;}
}
catch(err){}
break;
}
}
return false;
}
Now the "onbeforeunload" event call will look like this.
window.onbeforeunload = function() {
if(formIsModified(document.form[0]))
{
if (confirm("Are you sure you want to navigate away from this page?"))
return true;
else
return false;
}
}
Hope this will be useful for the developers who are looking for similar functionality.