# Frontend Events

The frontend form component fires several Javascript custom events (`CustomEvent`) on the `window` object during its lifecycle. You can listen to these events to run custom Javascript logic, hook into third-party analytics, or conditionally intercept workflows like form redirections.

***

### Listening to Events

To listen to an event, use standard Javascript event listeners on the `window` object:

```javascript
window.addEventListener('_mpr_submit_success', function(event) {
  console.log('Event triggered', event.detail);
});
```

***

## Available Events

### `_mpr_form_value_changed`

Triggered whenever a value inside the form changes.

* **Cancelable:** `false`
* **Payload (`event.detail`):** The current [Formik](https://formik.org/) state object. You can access the raw form values using `event.detail.values`.

***

### `_mpr_form_submit`

Triggered right as the user hits the submit button, but **before** the request is sent to the application backend. Useful for validation tracking or signaling the intent to submit.

* **Cancelable:** `false`
* **Payload (`event.detail`):** The raw form values object.

***

### `_mpr_submit_success`

Triggered after a successful form submission when the server returns a successful response. This event is highly customizable and can be intercepted.

* **Cancelable:** `true`
* **Description:** If your event listener invokes `event.preventDefault()`, the default auto-redirect behaviour will be skipped (though the visual success message will still appear). This allows you to perform conditional redirects.
* **Payload (`event.detail`):** An object containing the submission scope and server response details.

  ```json
  {
    "formSlug": "your-form-slug",
    "formId": 12345,
    "submission": {
      "customer": { "email": "...", "firstName": "...", "timezone": "..." },
      "items": [
        { "product": { "id": 1, "title": "..." }, "serialNumbers": ["XYZ"] }
      ]
    },
    "response": {
      "success": true,
      "redirect": "https://example.com/custom-redirect",
      "downloads": [],
      "registeredBefore": false
    }
  }
  ```

**Example: Conditional redirect on form success**

```javascript
window.addEventListener('_mpr_submit_success', function(e) {
  // Prevent the default redirection if one is configured
  e.preventDefault(); 
  
  var data = e.detail;
  var items = data.submission && data.submission.items;
  var purchaseLocation = items && items[0] ? items[0]['Where did you purchase?'] : '';
  
  // Conditionally redirect based on the form input value
  if (purchaseLocation && purchaseLocation.toLowerCase().includes('amazon')) {
    window.location.href = '/pages/amazon-warranty';
  } else {
    // Fall back to original redirect or home
    window.location.href = data.response.redirect || '/';
  }
});
```

***

### `_mpr_product`

Triggered when the form dynamically fetches a product's details directly from the frontend (for example, when looking up a product via URL parameter `?productId=` or filling a product using a verified serial number).

* **Cancelable:** `false`
* **Payload (`event.detail`):** The product details returned from the application backend.

***

### `_mpr_registrations_listed`

Triggered upon successfully fetching the list of a customer's previously registered items. Note that this occurs on pages displaying registration entries rather than the registration form itself.

* **Cancelable:** `false`
* **Payload (`event.detail`):** An array containing the user's past registration entries matching the active display configuration.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://doc.product-reg.varify.xyz/advance/frontend-events.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.