| | |
| | | * Frontend JavaScript for the Form Block |
| | | * Handles form validation and submission |
| | | */ |
| | | /** |
| | | * view.js |
| | | * Frontend JavaScript for the Form Block |
| | | */ |
| | | class FormBlock { |
| | | constructor() { |
| | | this.controller = new window.jvbForm(); |
| | | |
| | | document.querySelectorAll('.jvb-form-block form').forEach(form => { |
| | | this.controller.registerForm(form, {autosave: true}); |
| | | this.controller.registerForm(form, { |
| | | autosave: true, |
| | | autoUpload: false |
| | | }); |
| | | }); |
| | | |
| | | this.controller.subscribe((event, data) => { |
| | |
| | | } |
| | | |
| | | async handleFormSubmission(data) { |
| | | let formId = data.formId; |
| | | let formConfig = data.config; |
| | | let formData = data.fullData; |
| | | let form = formConfig.element; |
| | | const { formId, config: formConfig, fullData: formData } = data; |
| | | const form = formConfig.element; |
| | | |
| | | let headers = { |
| | | 'X-WP-Nonce': jvbSettings.nonce, |
| | | 'Content-Type': 'application/json' |
| | | }; |
| | | const submitData = new FormData(); |
| | | |
| | | let block = form.closest('.jvb-form-block'); |
| | | // Add regular form fields |
| | | for (const [key, value] of Object.entries(formData)) { |
| | | if (key === '_wpnonce' || key === '_wp_http_referer') continue; |
| | | |
| | | if (Array.isArray(value)) { |
| | | value.forEach(v => submitData.append(`${key}[]`, v)); |
| | | } else if (typeof value === 'object' && value !== null) { |
| | | submitData.append(key, JSON.stringify(value)); |
| | | } else { |
| | | submitData.append(key, value); |
| | | } |
| | | } |
| | | |
| | | // Add uploaded files |
| | | if (window.jvbUploads) { |
| | | try { |
| | | const files = await window.jvbUploads.getFilesForForm(form); |
| | | files.forEach(({ file, fieldName }) => { |
| | | submitData.append(`${fieldName}[]`, file); |
| | | }); |
| | | } catch (error) { |
| | | console.error('Error getting files:', error); |
| | | } |
| | | } |
| | | |
| | | this.controller.showFormStatus(formId, 'uploading'); |
| | | |
| | | try { |
| | | const response = await fetch(`${jvbSettings.api}forms`, { |
| | | method: 'POST', |
| | | headers, |
| | | body: JSON.stringify(formData) |
| | | credentials: 'same-origin', |
| | | body: submitData |
| | | }); |
| | | |
| | | const result = await response.json(); |
| | | |
| | | if (!response.ok) { |
| | | this.controller.showFormStatus(formId, 'error'); |
| | | const errorData = await response.json().catch(() => ({})); |
| | | throw new Error(errorData.message || `Request failed with status ${response.status}`); |
| | | this.controller.handleFormError(form, result); |
| | | return; |
| | | } |
| | | |
| | | this.controller.showFormStatus(formId, 'submitted'); |
| | | this.controller.showSummary(formId, '.jvb-form-block'); |
| | | |
| | | // Clean up uploaded files |
| | | if (window.jvbUploads) { |
| | | const uploadFields = form.querySelectorAll('[data-upload-field]'); |
| | | for (const field of uploadFields) { |
| | | const fieldId = window.jvbUploads.determineFieldId(field); |
| | | await window.jvbUploads.clearFieldFromStores(fieldId); |
| | | } |
| | | } |
| | | |
| | | } catch (error) { |
| | | throw error; |
| | | console.error('Form submission error:', error); |
| | | this.controller.showFormStatus(formId, 'error'); |
| | | this.controller.handleFormError(form, { |
| | | message: 'Network error. Please check your connection and try again.', |
| | | code: 'network_error' |
| | | }); |
| | | } finally { |
| | | this.controller.store.delete(formId); |
| | | await this.controller.store.delete(formId); |
| | | } |
| | | } |
| | | } |
| | | |
| | | document.addEventListener('DOMContentLoaded', function() { |
| | | new FormBlock(); |
| | | document.addEventListener('DOMContentLoaded', async function() { |
| | | window.auth.subscribe(event => { |
| | | if (event === 'auth-loaded') { |
| | | new FormBlock(); |
| | | } |
| | | }); |
| | | }); |