Solved

JQuery Save Recent Changes Warning in Separate File?

Posted on 2014-02-27
5
220 Views
Last Modified: 2014-03-13
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

0
Comment
Question by:WorknHardr
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
5 Comments
 
LVL 82

Accepted Solution

by:
leakim971 earned 400 total points
ID: 39893805
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
 

Author Comment

by:WorknHardr
ID: 39900261
Cool, don't know how to 'call it' from the main page?
0
 
LVL 82

Expert Comment

by:leakim971
ID: 39900266
you've nothing to call
0
 

Author Comment

by:WorknHardr
ID: 39901818
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
 

Author Closing Comment

by:WorknHardr
ID: 39926907
thx
0

Featured Post

Guide to Performance: Optimization & Monitoring

Nowadays, monitoring is a mixture of tools, systems, and codes—making it a very complex process. And with this complexity, comes variables for failure. Get DZone’s new Guide to Performance to learn how to proactively find these variables and solve them before a disruption occurs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

DOM Attributes and Properties treatment with jQuery 1.6 by Ivo Stoykov jQuery (http://jquery.com/) 1.6 introduces .prop() (http://api.jquery.com/prop/) and .removeProp() (http://api.jquery.com/removeProp/) methods which allow modifying or removi…
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

737 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question