Edit this page

up.form [up-autosubmit]
HTML selector

Automatically submits a form when a field changes.

Example

The following would automatically submit the form when the query field is changed:

<form method="GET" action="/search">
  <input type="search" name="query" up-autosubmit> <!-- mark: up-autosubmit -->
  <input type="checkbox" name="archive"> Include archived
</form>

Auto-submitting multiple fields

You can set [up-autosubmit] on any element to submit the form when a contained field changes.

For instance, to auto-submit a form when any field changes, set the [up-autosubmit] on the <form> element:

<form method="GET" action="/search" up-autosubmit>
  <input type="search" name="query">
  <input type="checkbox" name="archive"> Include archived
</form>

Auto-submitting radio buttons

Multiple radio buttons with the same [name] (a radio button group) produce a single value for the form.

To auto-submit group of radio buttons, use the [up-autosubmit] attribute on an element containing the entire button group:

<div up-autosubmit>
  <input type="radio" name="format" value="html"> HTML format
  <input type="radio" name="format" value="pdf"> PDF format
  <input type="radio" name="format" value="txt"> Text format
</div>

Observed events

[up-watch-event='input']
optional

The type of event to watch.

See which events to watch.

[up-watch-delay=0]
optional

The number of milliseconds to wait after a change.

This can be used to batch multiple events within a short time span. See debouncing callbacks.

Loading state

[up-watch-disable]
optional

Whether to disable fields while a request is loading.

See disabling fields while working.

[up-watch-placeholder]
optional

A placeholder to show within the targeted fragment while a request is loading.

See showing loading state while working.

[up-watch-preview]
optional

One or more previews that temporarily change the page while a request is loading.

See showing loading state while working.

[up-watch-feedback='true']
optional

Whether to set feedback classes while a request is loading.