Form Handler

Form handling is a common requirement in Web applications. Element's reactive system makes it easy to create dynamic, interactive forms with validation, real-time updates.

import { createEffect, createSignal, html } from "@dmnchzl/element";

interface FormData {
  name: string;
  email: string;
  message: string;
}

function ContactForm() {
  const [formData, setFormData] = createSignal<FormData>({
    name: "",
    email: "",
    message: "",
  });

  const updateData = (key: string, value: string) => {
    setFormData({
      ...formData(),
      [key]: value,
    });
  };

  const handleSubmit = (event: Event) => {
    event.preventDefault();
    alert(JSON.stringify(formData()));
  };

  return html`
    <form class="container" onsubmit="${(e: Event) => handleSubmit(e)}">
      <h1>Contact</h1>

      <div class="form-grp">
        <label for="name">Name:</label>
        <input
          type="text"
          id="name"
          value="${formData().name}"
          oninput="${(e: Event) => {
            updateData("name", (e.target as HTMLInputElement).value)};
          }"
          placeholder="John Doe"
        />
      </div>

      <div class="form-grp">
        <label for="email">Email:</label>
        <input
          type="email"
          id="email"
          value="${formData().email}"
          oninput="${(e: Event) => {
            updateData("email", (e.target as HTMLInputElement).value)};
          }"
          placeholder="[e-mail]"
        />
      </div>

      <div class="form-grp">
        <label for="message">Message:</label>
        <textarea
          id="message"
          value="${formData().message}"
          oninput="${(e: Event) => {
            updateData("message", (e.target as HTMLInputElement).value)};
          }"
          placeholder="Lorem ipsum dolor sit amet"
          rows="4"
        ></textarea>
      </div>

      <button class="submit-btn" type="submit">Submit</button>
    </form>
  `;
}

document.body.appendChild(ContactForm());