/**
|
* Frontend JavaScript for the Form Block
|
* Handles form validation and submission
|
*/
|
|
// Wait for DOM to be ready
|
document.addEventListener('DOMContentLoaded', function() {
|
let formController = new window.jvbForm();
|
|
document.querySelectorAll('.jvb-form-block').forEach(block => {
|
const formHandler = formController.registerForm(block.querySelector('form'));
|
});
|
formController.subscribe((event, data) => {
|
if (event === 'form-submit') {
|
handleFormSubmission(null, data.data, data.config.element);
|
}
|
});
|
});
|
|
async function handleFormSubmission(event, data, form) {
|
let headers = {
|
'X-WP-Nonce': jvbSettings.nonce,
|
'Content-Type': 'application/json'
|
};
|
|
data['form_type'] = form.dataset.formId;
|
data['form_id'] = form.id;
|
let block = form.closest('.jvb-form-block');
|
let loading = window.getTemplate('spinner');
|
form.hidden = true;
|
block.classList.add('loading');
|
block.prepend(loading);
|
try {
|
const response = await fetch (`${jvbSettings.api}forms`,
|
{
|
method: 'POST',
|
headers,
|
body: JSON.stringify(data)
|
});
|
if (!response.ok) {
|
const errorData = await response.json().catch(() => ({}));
|
throw new Error(errorData.message|| `Request failed with status ${response.status}`);
|
}
|
|
updateUI(await response.json(), block);
|
} catch (error) {
|
throw error;
|
} finally {
|
block.classList.remove('loading');
|
}
|
}
|
|
function updateUI(response, block) {
|
if (response.success === false) {
|
let form = block.querySelector('form');
|
form.removeAttribute('hidden');
|
if ('required' in response) {
|
response.required.forEach(required => {
|
let item = form.querySelector(`[name=${required}]`);
|
item.classList.add('required', 'error');
|
item.scrollIntoView();
|
});
|
}
|
return;
|
}
|
let summary = window.getTemplate('formSummary');
|
summary.querySelector('h2').textContent = 'Success!';
|
console.log('Form Response: ', response);
|
for (let [key, value] of Object.entries(response)) {
|
let item = summary.querySelector(`#${key}`);
|
|
let title = item.querySelector('h4');
|
if (title.innerText.includes('%s')) {
|
title.innerHTML = title.replace('%s', '<b>'+value+'</b>');
|
} else {
|
item.querySelector('div').innerHTML = value;
|
}
|
}
|
block.append(summary);
|
}
|
