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

# [up-observe]

**This feature has been deprecated**. Use [`[up-watch]`](https://unpoly.com/api/up-watch.md) instead.

Load [`unpoly-migrate.js`](https://unpoly.com/changes/upgrading.md) to polyfill deprecated features.

Watches form fields and runs a callback when a value changes.

Only fields with a `[name]` attribute can be watched.

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Callback context](#callback-context)
- [Watching multiple fields](#watching-multiple-fields)
- [Modifying attributes](#attributes)

</nav>

## Example {#example}

The following logs a message whenever the `<input>` changes:

```html
<input name="query" up-observe="console.log('New value', value)">
```

## Callback context {#callback-context}

The script given to `[up-observe]` runs with the following context:

| Name | Type | Description |
| --- | --- | --- |
| `this` | [`Element`](https://developer.mozilla.org/en-US/docs/Web/API/Element) | The changed form field |
| `name` | `string` | The `[name]` of the changed field |
| `value` | `string` | The new value of the changed field |

## Watching multiple fields {#watching-multiple-fields}

You can set `[up-observe]` on any element to observe all contained fields. The `name` argument contains the name of the field that was changed.

---

## Modifying attributes {#attributes}

### up-observe {#up-observe}

(required)

The code to run when any field's value changes.