0
Forms & Validation · Advanced Forms
New technique
FormData
Why pick up every coin one by one? FormData scoops the whole purse at once.
new FormData(form) reads every named, enabled control of a form: exactly what a normal submit would send. No need to look up each field with querySelector and read its value by hand.
Because it follows the same rules as a submit, controls that wouldn't be sent aren't in it either: an unticked checkbox or a disabled field is simply missing, so data.get() returns null for it. A ticked checkbox without a value gives "on".
const form = document.querySelector("#order");
const data = new FormData(form);
data.get("email"); // "brunn@forge.example"