jQuery Form Observe
Overview
This plugin observes values of form elements.
When end-user changes any values of input elements, observer shows which values were changed. And observer also alerts to users when they try to move out from the page before submitting changes.
Usage
You can add FormObserve plugin onto any form element.
$(document).ready(function(){
$('#MyForm').FormObserve();
});
<form id="MyForm">
<input type="text" value="here's default value" />
<input type="submit" value="save" />
</form>
If you want to show users the changes, you can add the definition of class 'changed'.
<style>
.changed {
background-color: red;
}
</style>
After changes have been completed (might be 'onsubmit', 'ajax complete' and so on), you should call FormObserve_save() method.
$('#MyForm').submit(function(){
if(validation=='ok'){
$(this).FormObserve_save();
}
});
Options
changeClass
You can change the class name of changed input-elements.
$(document).ready(function(){
$('#MyForm').FormObserve({changeClass: "alert-color");
});
Default value is 'changed'.
msg
You can set the alert message.
Default value is "Unsaved changes will be lost.\nReally continue?"
Tips
You can call FormObserve_save() method to each elements.
$('#ajax-button').click(function(){
// after saving on server
$(this).FormObserve_save();
});
This plugin is very handy using with jGlycy.
<form jg="FormObserve">
<input type="text" value="here's default value" />
<input type="submit" value="save" />
</form>