Simple “Are you sure?” warning for unsaved changes in WP
I spent quite a few hours getting a seemingly simple piece of javascript to work in a WP plugin I am currently working on.
Naturally, I started with jquery as it is already included in the WP Admin, but after several hours of trying various solutions I found on the web I had to admit defeat. I just could not get it to work the same way it obviously worked for others using jquery.
So, I ended up looking around a bit to find all natural javascript to do this.
function myplugin_js() {
echo ' <script>
window.onload = function(){
var theform = document.myform;
window.onbeforeunload = function(e){
var e = e || window.event, simon = "go";
for (i=0; i<theform.elements.length; i++){
if(theform.elements[i].type == "radio" || theform.elements[i].type == "checkbox"){
if(theform.elements[i].checked != theform.elements[i].defaultChecked){simon = "no";}
}else if(theform.elements[i].type == "select-one"){
if(!theform.elements[i].options[theform.elements[i].selectedIndex].defaultSelected){simon = "no";}
}else if(theform.elements[i].type == 'submit'){
theform.elements[i].onmouseup=function(){
simon = 'go';
}
}else{
if(theform.elements[i].value != theform.elements[i].defaultValue){simon = "no";}
}
}
if(simon != "go"){if(e){e.returnValue = "unsaved chages detected";}return "unsaved chages detected";}
}
};
</script>';
}
add_action('admin_enqueue_scripts', 'myplugin_js');You can put this in a theme functions.php or in your plugin file.
This will cause a warning message to popup whenever the form with the name "myform" was modified and one attempts to load a new page.
Change ‘admin_enqueue_scripts' to ‘wp_enqueue_scripts' to enable this feature on the front-end of your website.
If you use a select element, make sure you have a default option "selected", else the script will fail.
Enjoy 
Sources:
- http://www.sitepoint.com/detect-html-form-changes/
- http://stackoverflow.com/questions/5786120/javascript-form-input-fields-associative-array
- http://www.java2s.com/Tutorial/JavaScript/0200__Form/Formelementslength.htm
- http://jonathonhill.net/2011-03-04/catching-the-javascript-beforeunload-event-the-cross-browser-way/
542
