abiball/assets/controllers/form_controller.js

import {Controller} from "@hotwired/stimulus";


export default class extends Controller {
    addEntry(event) {
        event.preventDefault();

        const formClone = this.element.querySelector('form').cloneNode(true);

        formClone.querySelectorAll("select").forEach(input => {
            input.value = "1";
        });
        formClone.querySelector('input').value = '';

        this.element.querySelector('.forms').appendChild(formClone);
    }

    removeEntry(event) {
        event.preventDefault();

        if (document.querySelector('.forms').childElementCount === 1) {
            return;
        }

        event.target.closest('form').remove();
    }

    submit(event) {
        event.preventDefault();

        const forms = document.querySelectorAll('form');
        const formData = this.getFormData(forms);

        fetch('/ticket/submit', {
            method: 'POST',
            body: JSON.stringify(formData),
            headers: {
                'Content-Type': 'application/json'
            }
        }).then(response => {
            if (!response.ok) {
                alert('An error occurred');
            }
        });
    }

    getFormData(forms) {
        const formData = [];
        forms.forEach(form => {
            formData.push(Object.fromEntries(new FormData(form).entries()));
        })

        return formData;
    }
}