1 /** 2 * @fileOverview 3 * @author <a href="https://www.labkey.org">LabKey</a> (<a href="mailto:info@labkey.com">info@labkey.com</a>) 4 * @license Copyright (c) 2014-2019 LabKey Corporation 5 * <p/> 6 * Licensed under the Apache License, Version 2.0 (the "License"); 7 * you may not use this file except in compliance with the License. 8 * You may obtain a copy of the License at 9 * <p/> 10 * http://www.apache.org/licenses/LICENSE-2.0 11 * <p/> 12 * Unless required by applicable law or agreed to in writing, software 13 * distributed under the License is distributed on an "AS IS" BASIS, 14 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 15 * See the License for the specific language governing permissions and 16 * limitations under the License. 17 * <p/> 18 */ 19 (function($) { 20 21 var onElemChange = function() { 22 this._isDirty = true; 23 }; 24 25 /** 26 * Constructs a LABKEY.Form object. This object may be used to track the dirty state of an HTML form 27 * and warn the user about unsaved changes if the user leaves the page before saving. 28 * @class LABKEY.Form A utility class for tracking HTML form dirty state and warning the user about unsaved changes. 29 * @constructor 30 * @param {Object} config A configuration ojbect containing the following properties: 31 * @param {Element} config.formElement A reference to the HTML form element you want to track. 32 * @param {String} [config.warningMessage] A warning message to display if the user 33 * attempts to leave the page while the form is still dirty. If not supplied, a default message is used. 34 * @param {Boolean} [config.showWarningMessage] Set to false to stop this from displaying the warning message 35 * when the user attempts to leave the page while the form is still dirty. If you only want to use this class 36 * to track the dirty state only and not to warn on unload, set this to false. 37 * @example 38 <form id='myform' action="..." method="POST"> 39 <input type="text" name="Example" size="10"/> 40 <input type="submit" value="Save"/> 41 <button onclick="window.location.back();">Cancel</button> 42 </form> 43 44 <script type="text/javascript"> 45 var _form; 46 LABKEY.Utils.onReady(function(){ 47 //create a new LABKEY.Form to track the dirty state of the form above. 48 //if the user tries to navigate away while the form is dirty, it will warn the user 49 //and provide an option to stay on the page. 50 _form = new LABKEY.Form({ 51 formElement: 'myform', 52 warningMessage: 'This is a custom warning message' //omit to get standard warning message 53 }); 54 }); 55 </script> 56 */ 57 LABKEY.Form = function(config) { 58 59 if (!config || !config.formElement) 60 { 61 throw "Invalid config passed to LABKEY.Form constructor! Your config object should have a property named formElement which is the id of your form."; 62 } 63 64 var me = this; 65 var formEl = $('#' + config.formElement); 66 this.warningMessage = config.warningMessage || "Your changes have not yet been saved."; 67 this._isDirty = false; 68 69 //register for onchange events on all input elements 70 formEl.find(':input').change(function() { 71 onElemChange.call(me); 72 }); 73 74 formEl.submit(function() { me.setClean(); }); 75 76 if (config.showWarningMessage !== false) 77 { 78 $(window).bind('beforeunload', function(e) { 79 if (me.isDirty()) 80 { 81 e.returnMessage = me.warningMessage; 82 return me.warningMessage; 83 } 84 }); 85 } 86 }; 87 88 /** 89 * Returns true if the form is currently dirty, false otherwise. 90 */ 91 LABKEY.Form.prototype.isDirty = function() { 92 return this._isDirty; 93 }; 94 95 /** 96 * Sets the form's dirty state to clean 97 */ 98 LABKEY.Form.prototype.setClean = function() { 99 this._isDirty = false; 100 }; 101 102 /** 103 * Sets the form's dirty state to dirty 104 */ 105 LABKEY.Form.prototype.setDirty = function() { 106 this._isDirty = true; 107 }; 108 109 })(jQuery); 110