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;
  }
}