---
name: "[up-autosubmit]"
area: "API"
kind: "HTML attribute"
parent: "up.form module"
url: "https://unpoly.com/api/up-autosubmit"
---
<nav aria-label="Unpoly docs">[All docs](https://unpoly.com/index.md) · [up.form module](https://unpoly.com/api/up.form.md)</nav>

# [up-autosubmit]

Automatically submits a form when a field changes.

<nav aria-label="Guides">

- [Learn: Submitting forms](https://unpoly.com/learn/submitting-forms.md#autosubmit)

</nav>

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Auto-submitting multiple fields](#auto-submitting-multiple-fields)
- [Auto-submitting radio buttons](#auto-submitting-radio-buttons)
- [Modifying attributes](#attributes)

</nav>

## Example {#example}

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

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

## Auto-submitting multiple fields {#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:

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

## Auto-submitting radio buttons {#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 a group of radio buttons, use the `[up-autosubmit]` attribute on an element containing the entire button group:

```html
<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>
```

---

## Modifying attributes {#attributes}

### Observed events {#attributes-observed-events}

#### [up-watch-event='input'] {#up-watch-event}

(optional)

The type of event to watch.

See [which events to watch](https://unpoly.com/learn/watch-options.md#events).

#### [up-watch-delay=0] {#up-watch-delay}

(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](https://unpoly.com/learn/watch-options.md#debouncing).

### Loading state {#attributes-loading-state}

#### [up-watch-disable] {#up-watch-disable}

(optional)

Whether to [disable fields](https://unpoly.com/learn/disabling-forms.md) while a request is loading.

See [disabling fields while working](https://unpoly.com/learn/watch-options.md#disabling).

#### [up-watch-placeholder] (Experimental) {#up-watch-placeholder}

(optional)

A [placeholder](https://unpoly.com/learn/placeholders.md) to show within the targeted fragment while a request is loading.

See [showing loading state while working](https://unpoly.com/learn/watch-options.md#loading-state).

#### [up-watch-preview] (Experimental) {#up-watch-preview}

(optional)

One or more [previews](https://unpoly.com/learn/previews.md) that temporarily change the page while a request is loading.

See [showing loading state while working](https://unpoly.com/learn/watch-options.md#loading-state).

#### [up-watch-feedback='true'] {#up-watch-feedback}

(optional)

Whether to set [feedback classes](https://unpoly.com/learn/feedback-classes.md) while a request is loading.