Effektivt läsa formulärdata med JavaScript

I den här handledningen lär du dig hur du kan läsa av och hantera data som användarna matar in i formulär med JavaScript. Formulärelement är en väsentlig del av varje webbplats eftersom de möjliggör för användarna att mata in information. Ofta tror man att man måste använda komplicerade ramverk för detta ändamål. I den här artikeln visar vi hur du framgångsrikt kan hantera formulärdata med enkel JavaScript.

Viktigaste insikterna

• Du kommer att lära dig hur man skapar formulär, hur man får åtkomst till formulärdata med JavaScript och hur man använder preventDefault för att förhindra standardbeteendet hos formulär, så att du får kontroll över användarnas datainmatning.

Steg-för-steg-guide

Börja med att skapa ett enkelt HTML-formulär i ditt dokument. Se till att du framgångsrikt lägger till olika inmatningsfält och en skicka-knapp.

När ditt formulär är synligt i webbläsaren kan du testa det. Mata in ett namn i inmatningsfältet och tryck på Enter-tangenten eller skicka-knappen. Om allt fungerar korrekt bör du se en varning med ditt inmatade namn.

För att uppnå detta lägger vi till en skript-tag i din HTML-fil. I detta skript definierar du en global funktion med namnet submitForm, som accepterar ett händelseobjekt som parameter.

I skriptet kan du sätta händelsehanteraren onsubmit för ditt formulär. Det betyder att submitForm-funktionen kommer att kallas när formuläret skickas. Kom ihåg att händelseobjektet alltid är tillgängligt när du befinner dig inom en händelsehanterare.

En av de viktiga stegen är att förhindra formulärets standardåtgärd genom att anropa event.preventDefault(). Det är viktigt eftersom vi inte vill att formuläret ska ladda om sidan efter att data har skickats in.

Nu kan vi börja läsa av formulärdata. Formulärdatan finns tillgänglig i event.target, vilket gör det enkelt att komma åt de inmatade uppgifterna.

För att hämta formulärdata, skapa ett nytt objekt med konstruktören FormData och skicka formulärelementet som parameter. Efter att objektet har skapats kan du komma åt inmatningsvärdena via get-metoden.

Med formData.get('firstName') får du till exempel värdet av inmatningsfältet med namnet 'firstName'. Detta värde kan sedan användas för att skapa ett meddelande som visas för användaren.

Om du vill utöka formuläret med ytterligare ett inmatningsfält, gå vidare enligt följande: Lägg till en extra textruta för efternamnet med namnet 'lastName'. Därefter kan du vidta liknande åtgärder för att få dess värde.

Med båda värdena kan du sedan skapa ett personligt meddelande. Till exempel: "Hej [Förnamn] [Efternamn]!"

För att inte längre visa meddelandet via en varning utan integrera det direkt i HTML kan du lägga till en ny avsnitt i DOM som visar meddelandet som text. Skapa en div med ett unikt ID och sätt dess innerText till det resulterande meddelandet.

Nu kan du prova olika variationer genom att skriva ut datan i konsolen eller använda den för ytterligare JavaScript-aktioner, som en POST-begäran via fetch.

Det här är det mest grundläggande sättet för att läsa och använda formulärdata med JavaScript. Det finns många andra sätt att förbättra detta, som att lägga till valideringar eller att vidare bearbeta data på servern.

Summering

I den här handledningen har du lärt dig hur du kan läsa formulärdata med enkla JavaScript-funktioner. Du har utforskat vikten av event.preventDefault och sett hur man kan infoga data både i meddelanden och direkt i dokumentet. Med denna grund är du väl rustad för att designa mer komplexa formulär och hantera deras data.