| | |
| | | /** |
| | | * view.js |
| | | * Frontend JavaScript for the Form Block |
| | | * Handles form validation and submission |
| | | */ |
| | |
| | | this.controller = new window.jvbForm(); |
| | | |
| | | document.querySelectorAll('.jvb-form-block form').forEach(form => { |
| | | this.controller.registerForm(form); |
| | | this.controller.registerForm(form, {autosave: true}); |
| | | }); |
| | | |
| | | this.controller.subscribe((event, data) => { |
| | |
| | | } |
| | | |
| | | async handleFormSubmission(data) { |
| | | let [ |
| | | formId, |
| | | formConfig, |
| | | formData |
| | | ] = [ |
| | | data.formId, |
| | | data.config, |
| | | data.data |
| | | ]; |
| | | let formId = data.formId; |
| | | let formConfig = data.config; |
| | | let formData = data.fullData; |
| | | let form = formConfig.element; |
| | | |
| | | let headers = { |
| | |
| | | 'Content-Type': 'application/json' |
| | | }; |
| | | |
| | | data['form_type'] = formId; |
| | | data['form_id'] = form.id; |
| | | let block = form.closest('.jvb-form-block'); |
| | | this.controller.showFormStatus(formId, 'uploading'); |
| | | |
| | | try { |
| | | const response = await fetch (`${jvbSettings.api}forms`, |
| | | { |
| | | method: 'POST', |
| | | headers, |
| | | body: JSON.stringify(formData) |
| | | }); |
| | | const response = await fetch(`${jvbSettings.api}forms`, { |
| | | method: 'POST', |
| | | headers, |
| | | body: JSON.stringify(formData) |
| | | }); |
| | | |
| | | 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}`); |
| | | throw new Error(errorData.message || `Request failed with status ${response.status}`); |
| | | } |
| | | |
| | | this.controller.showFormStatus(formId, 'submitted'); |
| | | |
| | | this.controller.showSummary(formId, '.jvb-form-block'); |
| | | this.controller.store.delete(formId); |
| | | |
| | | } catch (error) { |
| | | throw error; |
| | | } finally { |
| | | this.controller.store.delete(formId); |
| | | } |
| | | } |
| | | |
| | | updateUI(response, block) { |
| | | |
| | | let summary = window.getTemplate('formSummary'); |
| | | summary.querySelector('h2').textContent = 'Success!'; |
| | | console.log('Form Response: ', response); |
| | | console.log(summary); |
| | | for (let [key, value] of Object.entries(response)) { |
| | | let item = summary.querySelector(`#${key}`); |
| | | if (item) { |
| | | 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); |
| | | } |
| | | } |
| | | |
| | | document.addEventListener('DOMContentLoaded', function() { |