JSFiddle - React, Tailwind, and code Playground

by ShaCP

JavaScript

class EventForm {
  getFormTemplate = () => `
      <form class="event_modal">
      <label class="data_input_container text_input_container">
          Date<input type="date" class="data_input date_input">
      </label>
      <label class="data_input_container text_input_container">
          Summary<textarea class="data_input event_input event_summary_input"></textarea>
      </label>
      <label class="data_input_container text_input_container">
          Description<textarea class="data_input event_input event_description_input"></textarea>
      </label>
      <div class="data_input_container image_input_container">
          <div class="data_input image_input">
              <div class="event_image_container">IMG</div>
              <input type="file" class="image_picker">
          </div>
      </div>
      <button class="save_event_button event_modal_button" type="submit">Save Event</button>
      </form>
      `;

  generateForm = () => {
    const parser = document.createElement("div");
    parser.innerHTML = this.getFormTemplate();
    this.form = parser.firstElementChild;
  };

  formSubmissionHandler = (e) => {
    // on form submission, prevent default
    debugger;
    e.preventDefault();
    // construct a FormData object, which fires the formdata event
    this.formData = new FormData(this.form);
    for (const entry of this.formData.entries()) {
      console.log(`${entry[0] }, ${ entry[1]}`);
    }
  }

  setUpHandlers = () => {
    this.form.addEventListener('submit', this.formSubmissionHandler);
  }

  createForm = () => {
    this.generateForm();
    return this.form;
  }
}

document.body.prepend(new EventForm().createForm())