submit-hændelsen
Håndtér formularindsendelse, og undgå genindlæsning.
submit-hændelsen er en gratis JavaScript Academy-lektion på CoddyKit. Dette er lektion 2 af 4. Du kan læse alle 3 lektioner i dette læringsspor gratis i deres fulde længde — derefter låser CoddyKit PRO alle lektioner op samt praktiske øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. Den er en del af læringsforløbet i JavaScript Academy, og dine fremskridt synkroniseres på tværs af nettet og CoddyKit-appen. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Indsendelse af formularer
submit-hændelsen udløses, når en formular indsendes, enten ved at klikke på en indsendelsesknap eller ved at trykke på Enter i et felt. Det er det rette sted at håndtere formulardata.
Lyt på formularen
Tilføj lytteren til selve form-elementet, ikke til indsendelsesknappen, så alle måder at indsende formularen på dækkes.
const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
console.log("submitting");
});Standardgenindlæsningen
Som standard navigerer en indsendelse til en anden side eller genindlæser siden. I JavaScript-drevne apps annullerer du normalt dette.
form.addEventListener("submit", (e) => {
e.preventDefault();
});Hvorfor preventDefault bruges her
Ved at kalde preventDefault bliver siden på samme sted, så du selv kan validere og sende data, ofte via fetch.
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = new FormData(form);
// send data without reloading
});Indsendelsesknapper
En button med type="submit", som er standarden i en formular, udløser indsendelse. Brug type="button" til knapper, der ikke skal indsende formularen.
Enter-tasten indsender
Hvis du trykker på Enter i et tekstfelt med én linje, indsendes formularen. Derfor er det vigtigt at lytte på formularen.
requestSubmit
form.requestSubmit indsender formularen via kode, samtidig med at submit-hændelsen udløses, og validering køres. Det gør form.submit ikke, da den springer begge dele over.
form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the eventLæsning af data ved indsendelse
Opret en FormData fra formularen i håndteringen for at indsamle alle navngivne felter på en enkel måde.
form.addEventListener("submit", (e) => {
e.preventDefault();
const fd = new FormData(form);
const obj = Object.fromEntries(fd.entries());
console.log(obj);
});Deaktivere knappen
Undgå dobbelte indsendelser ved at deaktivere indsendelsesknappen under behandlingen og aktivere den igen, når behandlingen er færdig.
form.addEventListener("submit", (e) => {
e.preventDefault();
const btn = form.querySelector("[type=submit]");
btn.disabled = true;
});Nulstilling af en formular
form.reset rydder felterne og gendanner deres standardværdier, og reset-hændelsen lader dig reagere på nulstillingen.
form.addEventListener("reset", () => {
console.log("cleared");
});submitter-element
Submit-hændelsens egenskab submitter fortæller, hvilken knap der udløste den. Det er nyttigt, når en formular har flere indsendelsesknapper.
form.addEventListener("submit", (e) => {
console.log(e.submitter && e.submitter.value);
});Hurtig kontrol
Vælg den bedste fremgangsmåde.
Opsummering
Håndtér indsendelser med formularens submit-hændelse, og kald preventDefault i JavaScript-drevne apps. Lyt på formularen, ikke knappen, for også at registrere indsendelser med Enter-tasten. Brug FormData til at læse felter, requestSubmit til at indsende via kode med validering, og deaktivér knappen for at undgå dobbelte indsendelser.
Lær JavaScript med en AI-underviser — gratis
Skriv og kør rigtig kode i din browser, få øjeblikkelig hjælp fra en AI-underviser døgnet rundt, og fortsæt, hvor du slap, på web eller i appen.
- Kurser
- 59
- Lektioner
- 200
Ofte stillede spørgsmål
Er lektionen “submit-hændelsen” gratis?
Ja — alle 3 lektioner i læringssporet JavaScript Academy, inklusive “submit-hændelsen”, kan læses gratis i deres fulde længde her på webstedet. Derefter låser CoddyKit PRO alle lektioner op samt interaktive øvelser med en indbygget kodeeditor og en AI-underviser døgnet rundt. JavaScript Academy-kurset indeholder 4 lektioner i alt.
Hvad lærer jeg i “submit-hændelsen”?
Håndtér formularindsendelse, og undgå genindlæsning. Du øver dig i JavaScript Academy med praktisk kode, som du kører direkte i browseren, og en AI-vejleder døgnet rundt besvarer dine spørgsmål, mens du arbejder dig gennem lektionen.
Skal jeg have erfaring for at begynde på JavaScript Academy?
Der kræves ingen tidligere erfaring. JavaScript Academy på CoddyKit er tilrettelagt for både begyndere og øvede, så du kan starte her eller fra begyndelsen og lære i dit eget tempo. Dette er lektion 2 af 4.
Hvor lang tid tager lektionen “submit-hændelsen”?
De fleste CoddyKit-lektioner tager cirka 5–10 minutter. Hver lektion er kort og interaktiv, så du gør løbende fremskridt og kan fortsætte, hvor du slap – på både web og app.
Kan jeg skrive og køre kode i denne JavaScript Academy-lektion?
Ja. Alle JavaScript Academy-lektioner har en indbygget kodeeditor, så du kan skrive og køre rigtig kode direkte i din browser og få øjeblikkelig feedback fra AI – uden lokal opsætning.