---
name: "up.observe"
area: "API"
kind: "JavaScript function"
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(elements, [options], onChange)

**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.

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

<nav aria-label="Contents">

#### Contents

- [Example](#example)
- [Parameters](#parameters)
- [Return value](#return-value)

</nav>

## Example {#example}

The following would print to the console whenever an input field changes:

```js
up.observe('input.query', function(value) {
  console.log('Query is now %o', value)
})
```

---

## Parameters {#parameters}

### elements {#elements}

(required)

The form fields that will be observed.

You can pass one or more fields, a `<form>` or any container that contains form fields. The callback will be run if any of the given fields change.

Type: string | [Element](https://developer.mozilla.org/en-US/docs/Web/API/Element) | [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)<[Element](https://developer.mozilla.org/en-US/docs/Web/API/Element)> | [jQuery](https://learn.jquery.com/using-jquery-core/jquery-object/)

### [options.batch=false] {#options.batch}

(optional)

If set to `true`, the `onChange` callback will receive multiple detected changes in a single diff object as its argument.

Type: boolean

### [options.delay=up.form.config.observeDelay] {#options.delay}

(optional)

The number of milliseconds to wait before executing the callback after the input value changes. Use this to limit how often the callback will be invoked for a fast typist.

Type: number

### onChange {#onChange}

(required)

The callback to run when the field's value changes.

If given as a function, it receives two arguments (`value`, `name`). `value` is a string with the new field value and `name` is the name of the form field that changed. If given as a string, it will be evaled as JavaScript code in a context where (`value`, `name`) are set.

A long-running callback function may return a promise that settles when the callback completes. In this case the callback will not be called again while it is already running.

Type: Function(value, name): string

---

## Return value {#return-value}

A destructor function that removes the observe watch when called.

Type: Function()