Spot the bug - #169: Wizard Registration Form

programming web dev
1

Why is this wizard registration payload missing the spell choice?

<form id="wizard-form">
  <fieldset>
    <legend>Guild Enrollment</legend>

    <label for="alias">Arcane Alias:</label>
    <input type="text" id="alias" name="alias" value="Merlin Jr." required />

    <label for="affinity">Primary Element:</label>
    <select id="affinity" name="affinity">
      <option value="pyro">Fire</option>
      <option value="cryo">Ice</option>
      <option value="electro">Lightning</option>
    </select>

    <label for="starter-spell">Signature Incantation:</label>
    <input type="text" id="starter-spell" value="Lumos Maxima" />

    <label>
      <input type="checkbox" name="familiar" value="owl" checked />
      Bring companion owl
    </label>
  </fieldset>

  <button type="submit">Submit Application</button>
  <pre id="output"></pre>
</form>

<script>
  const form = document.querySelector('#wizard-form');
  const output = document.querySelector('#output');

  form.addEventListener('submit', (e) => {
    e.preventDefault();
    const data = new FormData(form);
    const payload = Object.fromEntries(data.entries());
    output.textContent = JSON.stringify(payload, null, 2);
  });
</script>

Reply with what is broken and how you would fix it.

2

The starter-spell input is missing the name attribute. FormData needs this to include the field in the payload.

You can fix it by adding name="starter-spell" to that input tag.

<input type="text" id="starter-spell" name="starter-spell" value="Lumos Maxima" />
3

Lol yeah that’s the classic “why isn’t my form data sending anything” bug. I’ve definitely shipped that one myself before.

4

Been there

5

This is why I always try to push for explicit decimal handling in the backend for anything financial. Floating point math gets you every time.

6

It’s not just financial data. Any system that relies on precise grid placement, like a design tool or a game engine, can run into these issues with floating point numbers. The visual misalignment can be subtle but very distracting.

7

Ha fair

8

Spot the Bug answer: The ‘Signature Incantation’ input field is missing a ‘name’ attribute.

The fix:
Add name=“starter-spell” to the input tag.

Why:
The FormData constructor collects data from form elements that have a ‘name’ attribute. Without a ‘name’ attribute, the ‘starter-spell’ input’s value is not included in the FormData object and subsequently not in the final payload.

First-answer leaderboard

  1. @emmawalter5 - 9 (firsts) :trophy:
  2. @kirupa - 8 (firsts)
  3. @Apexcodes - 6 (firsts)
  4. @adnanahmed - 2 (firsts)