How can I use the Javascript functionality ?

This guide explains how to monitor a specific input field (e.g., “First name”) and retrieve the value entered by the user when the Booking Package form is displayed.

How it works

1. Event Monitoring Using the bookingPackageUserFunction feature, you can listen for the 'displayed_booking_form' event, which signals that the booking form has been displayed.
2. Element ID Rule Each input field is assigned a unique ID (e.g., first_name). The id of the actual HTML element is created by adding the prefix booking_package_input_ to this unique ID.
   • Prefix: booking_package_input_
   • Unique ID: first_name
   • Final ID: booking_package_input_first_name

Code Example

The following code gets the “First Name” input field after the booking form appears and then outputs its value to the console each time the user types.
You can use this code by pasting it into your theme’s JavaScript file or a similar location.

window.addEventListener('bookingPackageUserFunction', function() {

    // Monitor for Booking Package events.
    bookingPackageUserFunction.notification(function(eventName, calendarId, uniqueId) {

        // Run the following process only when the booking form is displayed.
        if (eventName === 'displayed_booking_form') {

            // Get the "First Name" input field element.
            const firstNameField = document.getElementById('booking_package_input_first_name');

            // If the element was found, proceed.
            if (firstNameField) {
                console.log('Found the "First Name" field. Monitoring for input.');
            } else {
                console.error('Could not find the "First Name" field.');
            }

        }

    });

});