Skip to content

Instantly share code, notes, and snippets.

@joshfreemanIO

joshfreemanIO/widget.savemenot.js

Last active August 29, 2015 13:57
Show Gist options
  • Save joshfreemanIO/9843445 to your computer and use it in GitHub Desktop.
Save joshfreemanIO/9843445 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
widget.savemenot.js
(function($, undefined) {
$.widget("grok.savemenot", {
_create: function() {
this.inputs = this.element.find('input, textarea, select, button');
this.submit = $('[type="submit"]');
this._inputSetup();
this.initialFormState = this._getInputValues();
},
_getInputValues: function() {
var formValues = {};
this.inputs.not("[type='checkbox']").each(function(index, element) {
var $element = $(element);
formValues[$element.attr('name')] = $element.val();
});
this.inputs.filter('[type="checkbox"]').each(function(index, element) {
var $element = $(element);
var checked = false;
if ($element.prop('checked')) {
checked = true;
};
formValues[$element.attr('name')] = checked;
});
return formValues;
},
_formChanged: function() {
var object1 = this.initialFormState;
var object2 = this._getInputValues();
var isEqual = true;
$.each(object2, function(name, value) {
if (object1[name] !== object2[name] ) {
isEqual = false;
return isEqual;
};
});
return !isEqual;
},
_inputSetup: function() {
this.submit.attr('disabled', 'disabled');
this._selectSetup(this.inputs.filter('select'));
this._inputsOn();
},
_inputsOn: function() {
var that = this;
this.inputs.on('change keyup', function() {
if (that._formChanged()) {
that.submit.removeAttr('disabled', 'disabled');
} else {
that.submit.attr('disabled', 'disabled');
}
});
},
_selectSetup: function($selects) {
$selects.each(function(index, element) {
var $element = $(element);
var value = $element.val();
if (!value || /^\s*$/.test(value)) return;
$element.prop('selectedIndex', -1);
});
}
});
})(jQuery);
Raw
widget.savemenot.js.html
<!DOCTYPE html>
<html>
<head>
<title>Save Me Not Demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class='container'>
<form method="POST">
<label for="textfield_1">Input Field 1 (Text)</label>
<input id="textfield_1" type="text" name="textfield_1" class="form-control">
<label for="textfield_2">Input Field 2 (Text)</label>
<input id="textfield_2" type="text" name="textfield_2" class="form-control" value="Default Data">
<label for="passwordfield">Input Field (Password)</label>
<input id="passwordfield" type="password" name="passwordfield" class="form-control" placeholder="Password">
<label for="textarea">Text Area</label>
<textarea id="textarea" name="textarea" class="form-control"></textarea>
<label for="select">Select Field</label>
<select name="select" id="select" class="form-control">
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<div class="checkbox">
<label for="checkbox_a">
<input type="checkbox" name='checkbox_a' id='checkbox_a' value='A'>A
</label>
</div>
<div class="checkbox">
<label for="checkbox_b">
<input type="checkbox" name='checkbox_b' id='checkbox_b' value='B' checked="checked">B
</label>
</div>
<div class="checkbox">
<label for="checkbox_c">
<input type="checkbox" name='checkbox_c' id='checkbox_c' value='C'>C
</label>
</div>
<button type="submit" name="submit" class="btn btn-large btn-primary" class="form-control">Button</button>
</form>
<script src="widget.savemenot.js"></script>
<script>
$('form').savemenot();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment