Het submit-event
Handel formulierverzending af en voorkom herladen.
Het submit-event is een gratis JavaScript Academy-les op CoddyKit. Dit is les 2 van 4. Je kunt 3 lessen uit dit leerpad gratis volledig lezen — daarna ontgrendelt CoddyKit PRO alle lessen, plus praktische oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject JavaScript Academy. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus JavaScript Academy bevat in totaal 4 lessen.
Formulieren verzenden
De gebeurtenis submit wordt geactiveerd wanneer een formulier wordt verzonden, bijvoorbeeld door op een verzendknop te klikken of op Enter te drukken in een veld. Dit is de juiste plek om formuliergegevens te verwerken.
Luisteren naar het formulier
Voeg de luisteraar toe aan het element form zelf, niet aan de verzendknop, zodat alle manieren van verzenden worden afgevangen.
const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
console.log("submitting");
});De standaardactie voor opnieuw laden
Standaard navigeert de browser naar een andere pagina of wordt de pagina opnieuw geladen wanneer je een formulier verzendt. Bij toepassingen die door JavaScript worden aangestuurd, annuleer je dit meestal.
form.addEventListener("submit", (e) => {
e.preventDefault();
});Waarom hier preventDefault gebruiken
Door preventDefault aan te roepen, blijft de pagina staan. Zo kun je de gegevens zelf valideren en verzenden, vaak via fetch.
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = new FormData(form);
// send data without reloading
});Verzendknoppen
Een button met type="submit", de standaardwaarde binnen een formulier, start het verzenden. Gebruik type="button" voor knoppen die het formulier niet mogen verzenden.
Verzenden met de Enter-toets
Als je op Enter drukt in een tekstveld met één regel, wordt het formulier verzonden. Daarom is het essentieel om naar het formulier te luisteren.
requestSubmit
form.requestSubmit verzendt het formulier programmatisch en activeert daarbij nog steeds de gebeurtenis submit en de validatie. form.submit slaat beide over.
form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the eventGegevens lezen bij het verzenden
Maak binnen de verwerker een FormData van het formulier om alle benoemde velden overzichtelijk te verzamelen.
form.addEventListener("submit", (e) => {
e.preventDefault();
const fd = new FormData(form);
const obj = Object.fromEntries(fd.entries());
console.log(obj);
});De knop uitschakelen
Schakel de verzendknop tijdens de verwerking uit om dubbel verzenden te voorkomen en schakel deze daarna weer in.
form.addEventListener("submit", (e) => {
e.preventDefault();
const btn = form.querySelector("[type=submit]");
btn.disabled = true;
});Een formulier resetten
form.reset wist de velden en zet ze terug naar hun standaardwaarden. Met de gebeurtenis reset kun je daarop reageren.
form.addEventListener("reset", () => {
console.log("cleared");
});Het submitter-element
De eigenschap submitter van de submit-gebeurtenis geeft aan welke knop de gebeurtenis heeft gestart. Dat is handig wanneer een formulier meerdere verzendknoppen heeft.
form.addEventListener("submit", (e) => {
console.log(e.submitter && e.submitter.value);
});Korte controle
Kies de beste aanpak.
Samenvatting
Verwerk verzendingen met de gebeurtenis submit van het formulier en roep preventDefault aan voor toepassingen die door JavaScript worden aangestuurd. Luister naar het formulier, niet naar de knop, om verzenden met de Enter-toets af te vangen. Gebruik FormData om velden te lezen, requestSubmit om programmatisch met validatie te verzenden en schakel de knop uit om dubbel verzenden te voorkomen.
Leer JavaScript met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 59
- Lessen
- 200
Veelgestelde vragen
Is de les “Het submit-event” gratis?
Ja — je kunt hier op het web alle 3 lessen van het leerpad JavaScript Academy, waaronder “Het submit-event”, gratis volledig lezen. Daarna ontgrendelt CoddyKit PRO alle lessen, plus interactieve oefeningen met een ingebouwde code-editor en een AI-tutor die 24/7 beschikbaar is. De cursus JavaScript Academy bevat in totaal 4 lessen.
Wat leer ik in “Het submit-event”?
Handel formulierverzending af en voorkom herladen. Je oefent met JavaScript Academy door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met JavaScript Academy te beginnen?
Ervaring vooraf is niet nodig. JavaScript Academy op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 2 van 4.
Hoe lang duurt de les “Het submit-event”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over JavaScript Academy?
Ja. Elke les over JavaScript Academy bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.