Allow saving forms on change

Enable the save/submit button only when the form contains changes.

The following form (using Bootstrap styling) contains two textfields, a checkbox and a Save button. Initially the Save button is disabled.

Only once a change event occures (text is edited in the fields and the field is left, or the checkbox is checked), the Save button becomes enabled, and an alert message appears.

The latter behaviour is achieved with the onchange-show event-action attribute, which instructs to unhide elements with haschanges class when a change event occures. Note that the alert message is initially hidden.

The former behavior is achieved with the onchange-enable event-action attribute, which by means of a relative CSS selector instructs to enable alle submit buttons within the scope of this form:

<form action="/Samples/Saved" method="post"
      onchange-show=".haschanges"
      onchange-enable="<FORM|>BUTTON[type='submit']">
  <div class="mb-3">
    <label for="Name" class="form-label">Name</label>
    <input type="text" name="Name" class="form-control" id="Name">
  </div>
  <div class="mb-3">
    <label for="Email" class="form-label">Email address</label>
    <input type="text" name="Email" class="form-control" id="Email">
  </div>
  <div class="form-check">
    <input class="form-check-input" type="checkbox" name="Accept" value="Y" id="Accept">
    <label class="form-check-label" for="Accept">
      Accept the conditions
    </label>
  </div>
  <div class="mt-3">
    <button type="submit" class="btn btn-primary" disabled><i class="spinner"></i> Save</button>
  </div>
  <div class="alert alert-info mt-3 haschanges" role="alert" hidden>
    Do not forget to save the changes on your form.
  </div>
</form>