JQuery Save Recent Changes Warning in Separate File?

WorknHardr
WorknHardr used Ask the Experts™
on
I found a very nice JQuery script here to warn a person when leaving a form page without clicking the Submit button.

How can I same most of this script in its own file in the 'CustomScripts' folder?

[HTML]
  @using (Html.BeginForm("New", "Contact", FormMethod.Post, new { id = "form1" }))
  {
               //textboxes

         <input type="submit" value="Save" [b]name="commit"[/b] />
  }

[Script]
$(document).ready(function() {
    formmodified=0;
    $('form *').change(function(){
        formmodified=1;
    });
    window.onbeforeunload = confirmExit;
    function confirmExit() {
        if (formmodified == 1) {
            return "New information not saved. Do you wish to leave the page?";
        }
    }
    $("input[[b]name='commit'[/b]]").click(function() {
        formmodified = 0;
    });
});

Open in new window

Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Multitechnician
Top Expert 2014
Commented:
Try this (replace line 10 to 24) :

var formmodified = false;

function addChangeEvent(what) {
	if(what.addEventListener) {
		what.addEventListener("change", function() { formmodified = true; }, false); 
	}
	else if(what.attachEvent) {
		what.attachEvent("onchange", function() { formmodified = true; });
	}
}

function checkCommit() {
	var form = document.getElementsByTagName("form")[0];
	var inputs = form.getElementsByTagName("input");
	for(var i=0;i<inputs.length;i++) {
		if(inputs[i].name && inputs[i].name=="commit") {
			if(inputs[i].addEventListener) {
				inputs[i].addEventListener("click", function() { formmodified = false; }, false); 
			}
			else if(inputs[i].attachEvent) {
				inputs[i].attachEvent("onclick", function() { formmodified = false; });
			}
		}
		else {
			addChangeEvent(textboxes[i]) {
		}
	}
	var textareas =  form.getElementsByTagName("textarea");
	for(var i=0;i<textareas.length;i++) {
		addChangeEvent(textareas[i]) {
	}
	var select =  form.getElementsByTagName("select");
	for(var i=0;i<select.length;i++) {
		addChangeEvent(select[i]) {
	}
}

function confirmExit() {
	if(formmodified) {
		return "New information not saved. Do you wish to leave the page?";
	}
}

if(window.addEventListener) {
	window.addEventListener("load", checkCommit, false); 
	window.addEventListener("beforeunload", confirmExit, false); 
}
else if(window.attachEvent) {
	window.attachEvent("onload", checkCommit);
	window.attachEvent("onbeforeunload", confirmExit);
}

Open in new window

Author

Commented:
Cool, don't know how to 'call it' from the main page?
leakim971Multitechnician
Top Expert 2014

Commented:
you've nothing to call

Author

Commented:
I placed all the code into a file and added this link to the form1 page:

<script src="~/Scripts/customized/SaveRecentChanges.js"></script>
<script type="text/jscript">
   
    $(function ()
    {
         $("#form1").validate(
            {
               ...code...
            });
    });

Author

Commented:
thx

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial