class Form.Observer
Description
An Abstract.TimedObserver
subclass that watches for changes to a form.
The callback is triggered when the form changes — e.g., when any
of its fields' values changes, when fields are added/removed, etc.; anything
that affects the serialized form of the form (see Form#serialize
).
Example
In this example an observer
is used to change the appearance of the form
if any of the values had been changed. It returns to its initial state when
the data is submitted (saved).
<form id="example" action="#">
<fieldset>
<legend>Login Preferences</legend>
<p id="msg" class="message">Current settings:</p>
<p>
<label for="greeting">Greeting message</label>
<input id="greeting" type="text" name="greeting" value="Hello world!" />
</p>
<h4>Login options</h4>
<p>
<input id="login-visible" type="checkbox" name="login-visible" checked="checked" />
<label for="login-visible">allow others to see my last login date</label>
</p>
<p>
<input id="land-recent" type="checkbox" name="land-recent" />
<label for="land-recent">land on recent changes overview instead of the Dashboard</label>
</p>
<input type="submit" value="save" />
</fieldset>
</form>
<script type="text/javascript">
new Form.Observer('example', 0.3, function(form, value){
$('msg').update('Your preferences have changed. Resubmit to save').style.color = 'red'
form.down().setStyle({ background:'lemonchiffon', borderColor:'red' })
})
$('example').onsubmit = function() {
$('msg').update('Preferences saved!').style.color = 'green'
this.down().setStyle({ background:null, borderColor:null })
return false
}
</script>