# on-press

**Optional**

**Default**: unset

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

**Event parameter**: Specific per component. Please see the table below.

**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-press` 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 %}

{% hint style="info" %}
**Note**: The `on-press` function will call validation (as specified by the `validate` attribute) if set.
{% endhint %}

#### Component-specific details

<table><thead><tr><th width="164">Component</th><th>Triggered when</th><th width="150">Event parameter</th><th>Return value</th></tr></thead><tbody><tr><td><code>action</code> (<a href="../all-ui-components/list/list-item/action"><code>list-item</code></a>, <a href="../all-ui-components/object-list/action"><code>object-list</code></a>, <a href="../all-ui-components/object-table/action"><code>object-table</code></a>)</td><td>A row/cell/item is selected.</td><td><code>$selection</code></td><td>Selected object</td></tr><tr><td><a href="../all-ui-components/object-table/column/edit-typeahead/action"><code>action</code></a> (<code>edit-typeahead</code>)</td><td>The user clicks on an object in the list. </td><td><code>$object</code>, <code>searchValue</code></td><td><ul><li>Selected object</li><li>A string containing the entered search text.</li></ul></td></tr><tr><td><a href="../all-ui-components/button"><code>button</code></a></td><td>A button is selected.</td><td>Empty by default. Can be a user-defined variable or field.</td><td><code>undefined</code>, or the user-defined variable or field.</td></tr><tr><td><code>item</code> (<a href="../all-ui-components/context-menu/item"><code>context-menu</code></a>, <code>navigation</code> <a href="../all-ui-components/navigation-navigation-drawer/general-section/item"><code>general-section</code></a>)</td><td>An item is selected.</td><td>Empty by default. Can be a user-defined variable or field.</td><td><code>undefined</code>, or the user-defined variable or field.</td></tr><tr><td><a href="../all-ui-components/capture-coordinates/marker"><code>marker</code></a> / <a href="../all-ui-components/capture-coordinates/marker-query"><code>marker-query</code></a> (<code>capture-coordinates</code>, <code>display-coordinates</code>)</td><td>A marker is selected.</td><td><code>$value</code></td><td>Location object containing the latitude and longitude, e.g. <code>{latitude: 39.7553694, longitude: -105.0195773}</code> </td></tr></tbody></table>

#### Example:

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

```xml
<button label="Submit" on-press="$:submitForm(current_form)"/>
```

{% endcode %}

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

```javascript
function submitForm(currentForm) {
    // Add logic here
    // Could be a navigation call, e.g. 
    // navigate.link("submit_form", currentForm)
}
```

{% endcode %}