06th May2015
Author: Gyro

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'){
simon = 'go';
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";}
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 :crazy:



Keep Me Going

Your Name / Website :

Did you like my post? Buy me a Bitcoffee! 14JX52Li7zTKbyQv2omw4tvu6Bi1KzfHNW

Leave a Reply

Your email address will not be published. Required fields are marked *

What is 6 + 11 ?
Please leave these two fields as-is:
IMPORTANT! To be able to proceed, you need to solve the following simple math (so we know that you are a human) :-)