Effektiv at læse formdata med JavaScript

I denne vejledning lærer du, hvordan du med JavaScript kan læse og behandle de data, som brugere indtaster i formularer. Formularelementer er en væsentlig del af enhver hjemmeside, da de giver brugerne mulighed for at indtaste information. Ofte antages det, at man skal ty til komplekse rammeworks for at opnå dette. I denne artikel viser vi, hvordan du med simpelt JavaScript succesfuldt kan behandle formular data.

Vigtigste erkendelse

• Du vil lære, hvordan du opretter formularer, hvordan man får adgang til formular data med JavaScript, og hvordan man forhindrer standardadfærd for formularer ved at bruge preventDefault, så du kan få kontrol over dine brugeres dataindtastninger.

Trin-for-trin vejledning

Start med at oprette en simpel HTML-formular i dit dokument. Sørg for at indsætte de forskellige inputfelter og en Submit-knap med succes.

Når din formular er synlig i browseren, kan du teste den. Indtast et navn i inputfeltet og tryk på Enter-tasten eller på Submit-knappen. Hvis alt fungerer korrekt, bør du se en alarm med dit indtastede navn.

For at opnå dette, tilføjer vi en script-tag til din HTML-fil. I dette script definerer du en global funktion med navnet submitForm, der accepterer et eventobjekt som parameter.

I scriptet kan du angive event handleren onsubmit for din formular. Dette betyder, at submitForm-funktionen kaldes, når formularen sendes. Bemærk, at eventobjektet altid er tilgængeligt, når du er i en event handler.

En af de vigtige trin er at forhindre standardhandlingen af formularen ved at kalde event.preventDefault(). Dette er vigtigt, da vi ikke ønsker, at formularen genindlæser siden efter at dataene er sendt.

Nu kan vi begynde at læse formular dataene. Formular dataene er tilgængelige i event.target. Dette gør det let at få adgang til de indtastede oplysninger.

For at få formular dataene, opretter du et nyt objekt med FormData constructor og overfører formular elementet som parameter. Efter oprettelsen af objektet kan du få adgang til inputværdierne ved hjælp af get-metoden.

Med formData.get('firstName') får du for eksempel værdien af inputfeltet, der har navnet 'firstName'. Denne værdi kan du derefter bruge til at oprette en besked, der vises for brugeren.

Hvis du gerne vil tilføje endnu en inputfelt til formularen, skal du følge disse trin: Tilføj en ekstra tekstboks til efternavnet med navnet 'lastName'. Derefter kan du foretage lignende trin for at få værdien heraf.

Med begge værdier kan du derefter generere en personlig besked. For eksempel: "Hej [Fornavn] [Efternavn]!"

For ikke længere at vise beskeden gennem en alarm, men integrere den direkte i HTML'en, kan du tilføje en ny sektion i DOM'en, der viser beskeden som tekst. Opret et div med en unik ID og sæt dens innerText som den resulterende besked.

Du kan nu prøve de forskellige variationer ved at udskrive dataene i konsollen eller bruge dem til yderligere JavaScript handlinger, såsom en POST-request gennem fetch.

Dette er den mest grundlæggende måde, hvorpå du kan læse og bruge formdata med JavaScript. Der er mange andre måder at forbedre dette på, f.eks. ved at tilføje valideringer eller behandle dataene yderligere på serveren.

Oversigt

I denne vejledning har du lært, hvordan du kan læse formdata med simple JavaScript-funktioner. Du har udforsket vigtigheden af event.preventDefault og set, hvordan man kan indsætte data både i advarsler og direkte i dokumentet. Med denne basis er du godt rustet til at designe mere komplekse formularer og deres datahåndtering.