class Form.Observer

View source on GitHub →

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>

Superclass

Abstract.TimedObserver

Constructor

new Form.Observer