natchbone

Back Back Up Advanced Editor

(function ($) {
    "use strict";
    var WidgetFormHandler = function ($scope, $) {
        var container = $scope[0].querySelector('.tpae-form-container');
        var form = container.querySelector('.tpae-form');

var formdata = container.dataset.formdata ? JSON.parse(container.dataset.formdata) : {};
        var requiredMask = formdata.Required_mask;
        var emailData = container?.dataset?.emaildata ? JSON.parse(container.dataset.emaildata) : {};

var requiredAsterisks = container.querySelectorAll('.tpae-required-asterisk');
        requiredAsterisks.forEach(function (asterisk) {
            asterisk.style.display = requiredMask === 'hide-asterisks' ? 'none' : 'inline';
        });

var invalidForm = formdata.invalid_form || "Invalid form submission.";
        var successMessage = formdata.success_message || "Your message has been sent successfully.";
        var formError = formdata.form_error || "There was an error with the form submission.";
        var requiredFieldsError = formdata.required_fields || "Please fill in the required fields.";
        var serverError = formdata.server_error || "Server error, please try again later.";
        var isSubmitting = false;

var formFields = container.querySelectorAll(".tpae-form-field");
        
        formFields.forEach(el => {
            let tabletWidth = el.getAttribute("data-tablet-width"),
                mobileWidth = el.getAttribute("data-mobile-width"),
                desktopWidth = el.getAttribute("data-width");

if (window.innerWidth < 768) {
                el.style.width = mobileWidth + "%";
            } else if (window.innerWidth <= 1024) {
                el.style.width = tabletWidth + "%";
            } else {
                el.style.width = desktopWidth + "%";
            }
        });

form.addEventListener('submit', function (e) {
            e.preventDefault();
            if (isSubmitting) return;

isSubmitting = true;
            clearMessages();
            var isValid = true;
            var formData = {};
            var formFields = [];
            form.querySelectorAll('.tpae-form-field').forEach(function (field) {
                var input = field.querySelector('input, textarea');
                var label = field.querySelector('label') ? field.querySelector('label').textContent.trim() : '';
                                
                if (input) {
                    var inputValue = input.value.trim();
                    var inputID = input.getAttribute('id') || '';
                    var inputName = input.getAttribute('name') || '';
                    formFields.push({
                        field_id: inputID,
                        field_name: inputName,
                        field_value: inputValue
                    });
                    if (input.required && inputValue === '') {
                        isValid = false;
                        showFieldError(input, requiredFieldsError.replace('%field%', label));
                    }
                    formData[input.name || label || input.id] = inputValue;

}
            });
            if (!isValid) {
                displayMessage(invalidForm, 'error');
                isSubmitting = false;
                return false;
            }

submitForm(formData, formFields);
        });

var showFieldError = function (input, message) {
            clearFieldError(input); 
            var errorSpan = document.createElement('span');
            errorSpan.className = 'tpae-field-error';
            errorSpan.style.color = 'red';
            errorSpan.textContent = message;
            input.parentElement.appendChild(errorSpan);
        };

var clearFieldError = function (input) {
            var existingError = input.parentElement.querySelector('.tpae-field-error');
            if (existingError) existingError.remove();
        };

var displayMessage = function (message, type) {
            type = type || 'success';
            clearMessages();
            var messageDiv = document.createElement('div');
            messageDiv.className = 'tpae-form-message ' + type;
            messageDiv.style.color = type === 'success' ? 'green' : 'red';
            messageDiv.textContent = message;
            form.appendChild(messageDiv);
        };
    };

window.addEventListener('elementor/frontend/init', function () {
        elementorFrontend.hooks.addAction('frontend/element_ready/tp-plus-form.default', WidgetFormHandler);
    });
})(jQuery);