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.