React form not including checked checkbox values on submit

  Kiến thức lập trình

I created a new NextJS and Vite react project with the npx create-next-app@latest and npm create vite@latest respectively. I created the following simple component containing a form with checkbox input values (source code for each one slightly different depending on whether I was testing it with NextJS or vanilla React):

"use client";

export default function Page() {
  return (
    <main>
      <form onSubmit={(e) => {
        e.preventDefault();
        console.log(JSON.stringify(new FormData(e.currentTarget), null, 4));
      }

      }>
          <label htmlFor="val1">Value 1</label>
          <input
              type="checkbox"
              name="val1"
              id="val1"
              value="VALUE1"
          />
          <label htmlFor="val2">Value 2</label>
          <input
              type="checkbox"
              name="val2"
              id="val2"
              value="VALUE2"
          />
          <label htmlFor="val3">Value 3</label>
          <input
              type="checkbox"
              name="val3"
              id="val3"
              value="VALUE3"
          />
          <button type="submit">Submit</button>
      </form>
    </main>
  );
}

I then tried giving each checkbox input value its own state via:

"use client";

import { useState } from "react";

export default function Page() {
  const [val1Checked, setVal1Checked] = useState(false);
  const [val2Checked, setVal2Checked] = useState(false);
  const [val3Checked, setVal3Checked] = useState(false);

  return (
    <main>
      <form onSubmit={(e) => {
        e.preventDefault();
        console.log(JSON.stringify(new FormData(e.currentTarget), null, 4));
      }

      }>
          <label htmlFor="val1">Value 1</label>
          <input
              type="checkbox"
              name="val1"
              id="val1"
              value="VALUE1"
              onChange={(e) => setVal1Checked(e.currentTarget.checked)}
              checked={val1Checked}
          />
          <label htmlFor="val2">Value 2</label>
          <input
              type="checkbox"
              name="val2"
              id="val2"
              value="VALUE2"
              onChange={(e) => setVal2Checked(e.currentTarget.checked)}
              checked={val2Checked}
          />
          <label htmlFor="val3">Value 3</label>
          <input
              type="checkbox"
              name="val3"
              id="val3"
              value="VALUE3"
              onChange={(e) => setVal3Checked(e.currentTarget.checked)}
              checked={val3Checked}
          />
          <button type="submit">Submit</button>
      </form>
    </main>
  );
}

Checked checkbox values don’t appear to be included in the submitted form. I imagine I either made some simple mistake or have a misunderstanding of how form submissions and/or checkbox states work or something along those lines. I can’t seem to find any documentation on this nor anyone else experiencing this problem exactly. Any info or link to any info would be greatly appreciated.

1

LEAVE A COMMENT