JQuery Save Recent Changes Warning in Separate File?

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

WorknHardrAsked:
Who is Participating?
 
leakim971Connect With a Mentor PluritechnicianCommented:
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

0
 
WorknHardrAuthor Commented:
Cool, don't know how to 'call it' from the main page?
0
 
leakim971PluritechnicianCommented:
you've nothing to call
0
 
WorknHardrAuthor 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...
            });
    });
0
 
WorknHardrAuthor Commented:
thx
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.