Working with Forms

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Booking form</title>
  <style>
    label { display: block; margin-block: 0.5rem; }
    fieldset { margin-block: 0.5rem; }
  </style>
</head>
<body>
  <h1>Book a train seat</h1>
  <form id="booking">
    <label>Passenger name <input name="passenger" required></label>
    <label>Age <input name="age" type="number" min="1" max="120" required></label>
    <label>To
      <select name="destination">
        <option>Jaipur</option>
        <option>Lucknow</option>
        <option>Kochi</option>
      </select>
    </label>
    <fieldset>
      <legend>Meal</legend>
      <label><input type="radio" name="meal" value="veg" checked> Veg</label>
      <label><input type="radio" name="meal" value="non-veg"> Non-veg</label>
    </fieldset>
    <label><input type="checkbox" name="sms" value="yes"> Send me SMS updates</label>
    <button>Book</button>
  </form>
  <p id="summary"></p>

  <script>
    const form = document.querySelector("#booking");
    const summary = document.querySelector("#summary");

    form.addEventListener("submit", (event) => {
      event.preventDefault();

      const data = new FormData(form);
      const booking = Object.fromEntries(data);
      const age = Number(booking.age);
      const seniorNote = age >= 60 ? " (senior citizen)" : "";
      const sms = data.has("sms") ? "SMS updates on" : "no SMS";

      summary.textContent =
        `${booking.passenger}, age ${age}${seniorNote}, to ${booking.destination}, ` +
        `${booking.meal} meal, ${sms}.`;
    });
  </script>
</body>
</html>

const form = document.querySelector("#booking");
form.elements.passenger.value;   // "Isha" (a string)
form.elements.age.valueAsNumber; // 64 (a number, or NaN when empty)
form.elements.sms.checked;       // true or false
form.elements.meal.value;        // the checked radio's value
form.elements.destination.value; // the selected option's value

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Live total</title>
</head>
<body>
  <h1>Order sweets</h1>
  <form id="order">
    <label>Box
      <select name="box">
        <option value="450">Kaju katli, 500 g (₹450)</option>
        <option value="320">Motichoor ladoo, 500 g (₹320)</option>
        <option value="280">Soan papdi, 500 g (₹280)</option>
      </select>
    </label>
    <label>Quantity <input name="qty" type="number" value="1" min="1" max="20"></label>
    <p>Total: <output name="total">₹450</output></p>
  </form>

  <script>
    const form = document.querySelector("#order");

    // "input" bubbles, so one listener on the form hears every field.
    form.addEventListener("input", () => {
      const price = Number(form.elements.box.value);
      const qty = form.elements.qty.valueAsNumber; // a number, or NaN if empty

      if (Number.isNaN(qty) || qty < 1) {
        form.elements.total.value = "Enter a quantity";
        return;
      }
      form.elements.total.value = `₹${(price * qty).toLocaleString("en-IN")}`;
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Custom validation</title>
  <style>
    label { display: block; margin-block: 0.5rem; }
    input:user-invalid { outline: 2px solid crimson; }
  </style>
</head>
<body>
  <h1>Create an account</h1>
  <form id="signup">
    <label>Mobile number
      <input name="mobile" type="tel" inputmode="numeric" required
             pattern="[6-9][0-9]{9}" title="10 digits, starting with 6, 7, 8 or 9">
    </label>
    <label>Password <input name="password" type="password" required minlength="8"></label>
    <label>Confirm password <input name="confirm" type="password" required></label>
    <button>Sign up</button>
  </form>
  <p id="message"></p>

  <script>
    const form = document.querySelector("#signup");
    const { password, confirm } = form.elements;

    function checkMatch() {
      // An empty string means "valid"; any other text marks the field invalid.
      confirm.setCustomValidity(
        confirm.value === password.value ? "" : "Passwords do not match"
      );
    }
    password.addEventListener("input", checkMatch);
    confirm.addEventListener("input", checkMatch);

    form.addEventListener("submit", (event) => {
      event.preventDefault(); // the browser only fires submit if every field is valid
      const button = form.querySelector("button");
      button.disabled = true; // stop double submits
      document.querySelector("#message").textContent =
        `Account created for ${form.elements.mobile.value}.`;
    });
  </script>
</body>
</html>

const response = await fetch("/api/enquiry", {
  method: "POST",
  body: new FormData(form), // sent in the same format as a normal form submit
});