> For the complete documentation index, see [llms.txt](https://doc.product-reg.varify.xyz/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://doc.product-reg.varify.xyz/advance/frontend-events.md).

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