jquery dirty forms check plugin
by Seungrae Lee
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/mootools/1.6.0/mootools-core-compat.min.js"></script>
<form id="example-1-form" name="coffeeOrder1" method="post">
<h2>Enter Your Coffee Order</h2>
<div>
<label for="example-1-coffee">Coffee</label>
<select name="coffee" id="example-1-coffee">
<option value="espresso">Espresso</option>
<option value="dbl-espresso">Caffe Doppio</option>
<option value="latte">Caffe Latte</option>
<option value="macciato">Machhiato</option>
<option value="cappuccino">Cappuccino</option>
</select>
</div>
<div>
<label>Shots</label>
<br />
<input type="radio" name="shots" value="1" checked /> 1 Shot - Standard
<br />
<input type="radio" name="shots" value="2" /> 2 Shots - Morning wakeup!
<br />
<input type="radio" name="shots" value="3" /> 3 Shots - Overdrive!
<br />
</div>
<div>
<label for="example-1-sugar">Sugar</label>
<input type="text" name="sugar" value="0" id="example-1-sugar" />
</div>
<div>
<label for="example-1-instructions">Special Instructions</label>
<textarea name="instructions" rows="5" id="example-1-instructions">foo bar
</textarea>
</div>
<div class="checkbox">
<input type="checkbox" name="remember" value="true" /> Remember my order
</div>
<div class="buttons">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</div>
<div>
<p>... or visit <a href="https://plugins.jquery.com/">jQuery</a> or close the window without saving!</p>
</div>
</form>
<button name="back" id="back" onclick="backAction();">Return to the previous page.</button>
<div class="page">
<a href="#" onclick="goToPage(1);">1</a>
<a href="#" onclick="goToPage(2);">2</a>
<a href="#" onclick="goToPage(3);">3</a>
</div>
<br />
<div id="log">
</div>
CSS
body {
font-size: 62.5%;
font-family: "Trebuchet MS", "Arial", "Helvetica", "Verdana", "sans-serif";
}
form {
background-image: -moz-linear-gradient(center top, rgba(170, 83, 3, 0.1), rgba(170, 83, 3, 0.5));
border: 1px solid #aa5303;
border-radius: 5px;
padding: 10px 20px;
width: 350px;
}
form h2 {
font-size: 22px;
}
form > div {
font-size: 12px;
padding: 8px;
}
form > div input[type="radio"] {
display: inline-block;
margin-left: 130px;
}
form > div select,
form > div input[type="text"],
form > div textarea {
float: right;
width: 200px;
}
form > div input[type="submit"] {
float: right;
}
form > div.checkbox {
clear: both;
width: 200px;
margin-left: 130px;
}
form > div.buttons {
clear: both;
}
div.page a {
display: inline-block;
padding: 3px;
width: 50px;
text-decoration: none;
background-color: #3399CC;
text-align: center;
font-size: 12px;
color: #FFFFFF;
}
JavaScript
/*!
* jQuery dirty form check plugin
* version: 1.1.1-2016.06.06
* Released under the MIT license
*/
(function(factory) {
if (typeof define === "function" && define.amd) {
// AMD. Register as an anonymous module.
define(["jquery"], factory);
} else {
// Browser globals
factory(jQuery);
} //if~else
}(function($) {
$.extend($.fn, {
dirtycheck: function(options) {
// check if an instance of this form was already created
var dirtychecker = $.data(this[0], "dirtychecker");
if (dirtychecker) {
return dirtychecker;
}
// create new instance
dirtychecker = new $.dirtychecker(options, this[0]);
$.data(this[0], "dirtychecker", dirtychecker);
return dirtychecker;
}
});
// constructor for checker
$.dirtychecker = function(options, form) {
// merge options
this.settings = $.extend(true, {}, $.dirtychecker.defaults, options);
this.currentForm = form;
this.init();
};
// implementation
$.extend($.dirtychecker, {
version: "1.1.1",
defaults: {
ignore: ":hidden",
joinpoint: {},
message: "Form is dirty.\nSave your changes?",
icheckboxOn: false,
okCallback: function() {}
},
setDefaults: function(settings) {
$.extend($.dirtychecker.defaults, settings);
},
prototype: {
init: function() {
this.originalValue = {};
this.dirty = false;
this.saveForm();
var self = this;
if (this.settings.joinpoint) {
// intercept the target method(AOP joinpoint)
$(this.settings.joinpoint).each(function() {
// save handler
$(this).data("funcToCall", $(this).attr("onclick"));
// remove onclick attr
$(this).removeAttr("onclick");
// unbind tab event handler(jquery stab plugin)
if ($(this).parent("div").hasClass("ui-stab-head")) {
$(this).off("click.stab");
}
if...