# on-change

**Optional**

**Default**: unset

**Triggered when**: Specific per component. Please see the table below.

**Event parameters**:

* `$value` or `$object` - The current bound value
* `oldValue` - The current bound value before the change
* `newValue` - The current bound value after the change

**Return value**: Specific per component (based on [field](https://docs.journeyapps.com/reference/build/data-model-configuration/model/field) type). Please see the table below.

`on-change` is an event that calls a JS/TS [`$:function`](https://docs.journeyapps.com/reference/app-features/calling-js-functions-from-xml) or [navigation](https://docs.journeyapps.com/reference/get-started/journeyapps-fundamentals/view-navigation). See more details:

{% content-ref url="../js-ts-events" %}
[js-ts-events](https://docs.journeyapps.com/reference/build/ui-components/js-ts-events)
{% endcontent-ref %}

#### Component-specific details

<table><thead><tr><th>Component</th><th width="233.49640287769785">Triggered when</th><th width="243.25179856115108">Return value</th></tr></thead><tbody><tr><td><a href="../all-ui-components/capture-coordinates"><code>capture-coordinates</code></a></td><td>The device updates the current location.</td><td><p>Location object, e.g. <code>{latitude: -33.9000764, longitude: 18.8476332, altitude: null, horizontal_accuracy: 23.987, vertical_accuracy: null, timestamp: 2022-05-15T11:28:20.794Z}</code> </p><p></p><p><strong>Limitation:</strong></p><p>Capturing the <code>altitude</code> and/or <code>vertical_accuracy</code> is not supported on several platforms / devices, including Android devices. These devices will return <code>null</code> for these fields.</p></td></tr><tr><td><a href="../all-ui-components/capture-file"><code>capture-file</code></a></td><td>A file is uploaded, or deleted when in display mode.</td><td>Attachment id, or <code>null</code> if cleared. E.g. <code>{id: 974abd87-d00f-4255-81ac-16fed6d7085a}</code></td></tr><tr><td><a href="../all-ui-components/capture-photo"><code>capture-photo</code></a></td><td>A photo is captured or selected from gallery, updated, or deleted when in display mode.</td><td>Attachment id, or <code>null</code> if cleared. E.g. <code>{id: 974abd87-d00f-4255-81ac-16fed6d7085a}</code></td></tr><tr><td><a href="../all-ui-components/capture-signature"><code>capture-signature</code></a></td><td>A signature is captured, updated or deleted when in display mode.</td><td>Attachment id, or <code>null</code> if cleared. E.g. <code>{id: 974abd87-d00f-4255-81ac-16fed6d7085a}</code></td></tr><tr><td><a href="../all-ui-components/date-input"><code>date-input</code></a></td><td>A date is selected, updated or cleared.</td><td>Selected date, or <code>null</code> if cleared. E.g. <code>2022-05-15</code></td></tr><tr><td><a href="../all-ui-components/datetime-input"><code>datetime-input</code></a></td><td>A date and time is selected, updated or cleared.</td><td>Selected date and time, or <code>null</code> if cleared. E.g. <code>2022-05-15T11:28:20.794Z</code></td></tr><tr><td><a href="../all-ui-components/multiple-choice-checklist"><code>multiple-choice-checklist</code></a></td><td>An item is checked or unchecked.</td><td>Array containing the selected values. E.g. <code>[email, sms]</code></td></tr><tr><td><a href="../all-ui-components/object-dropdown"><code>object-dropdown</code></a></td><td>A new selection is made, or the selection is cleared.</td><td>Selected object or an array of selected objects, or <code>null</code> if cleared. E.g. <code>{name: Argentina, population: null}</code></td></tr><tr><td><a href="../all-ui-components/object-table"><code>object-table</code></a></td><td>A row is selected.</td><td>Selected object, E.g. <code>{name: Argentina, population: null}</code></td></tr><tr><td><a href="../all-ui-components/scan-barcode"><code>scan-barcode</code></a></td><td>A barcode is scanned.</td><td>String containing the scanned barcode. E.g. <code>"ZQ222-TH678"</code></td></tr><tr><td><a href="../all-ui-components/single-choice-dropdown"><code>single-choice-dropdown</code></a></td><td>A new selection is made, or the selection is cleared.</td><td>Key of the selected option (string), or <code>null</code> if cleared. E.g. <code>"purple"</code></td></tr><tr><td><a href="../all-ui-components/single-choice-radio"><code>single-choice-radio</code></a></td><td>A new selection is made.</td><td>Key of the selected option (string), or <code>null</code> if cleared. E.g. <code>"purple"</code></td></tr><tr><td><a href="../all-ui-components/text-input"><code>text-input</code></a></td><td>Text is entered, updated or cleared.</td><td>String containing the entered text. E.g. <code>"purple"</code></td></tr><tr><td><a href="../all-ui-components/toggle"><code>toggle</code></a></td><td>The toggle state is updated.</td><td><code>true</code> or <code>false</code></td></tr></tbody></table>

#### Example:

{% code title="main.view\.xml" %}

```xml
<capture-photo bind="my_photo" on-change="$:callEvent($value, oldValue, newValue)" source="any" resolution="small" downloadable="true" />
```

{% endcode %}

{% code title="main.js" %}

```javascript
function callEvent(currentValue, oldValue, newValue) {
    console.log(JSON.stringify(currentValue), JSON.stringify(oldValue), JSON.stringify(newValue));
    // Example:
    // {"id":"16af8e07-e181-4bdc-a6d7-f3841d0959b7"} {"id":"00cef6fb-0476-40a7-9ec5-f2222d2d7972"} {"id":"16af8e07-e181-4bdc-a6d7-f3841d0959b7"}
}
```

{% endcode %}