Afsendelse af formularer i JavaScript

Du kan allerede arbejde med formular-elementer i JavaScript ved at behandle dem i browseren. Formularer kan dog også sendes til serveren, så de kan blive behandlet af webstedets server-side, skrevet i PHP eller NodeJS.

Dette er nødvendigt for at tilføje og ændre webstedets data, som er gemt på serveren.

Lad os se, hvordan det gøres. Antag, at vi har et par input-felter og en knap:

<input>
<input>
<input type="submit">

Lad os indpakke vores elementer i form-tagget. I dette tilfælde får vi en formular, som ved at klikke på knappen vil blive sendt til serveren:

<form>
	<input>
	<input>
	<input type="submit">
</form>

For at serveren kan modtage dataene fra formularen, er det nødvendigt at give hvert input-felt sit eget navn:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

I dette tilfælde vil formularens data ankomme til serveren i form af nøgle-værdi-par, hvor nøglerne vil være navnene på formular-elementerne, og værdierne vil være de indtastede data.

For at sende formularen er der ikke behov for en server. Du kan kopiere den viste formularkode ind i en hvilken som helst fil, åbne den i browseren og klikke på afsendelsesknappen - formularen vil blive sendt og browsersiden vil blive genindlæst.

Uden en server vil formularens data dog ikke blive gemt nogen steder. Så lad os tjekke formularens funktion sammen med en server. Indtil videre kender du ikke til nogle server-sprog, så lad os øve os på at sende en formular med hjælp af vores pædagogiske HTTP server.

Lad os placere vores formular i en bestemt fil, så den er tilgængelig på adressen http://localhost:3001/form.html:

<form>
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Lad os tilføje vores formular attributten action, som angiver adressen for, hvor vores formular skal sendes til:

<form action="/handler/">
	<input name="test1">
	<input name="test2">
	<input type="submit">
</form>

Nu skal vi i filen server.js skrive en handler for adressen, hvor formularen sendes til:

export default {
	'/handler/': function() {
		return 'form data received';
	}
}

I parameteren til vores handler vil de sendte formulardata blive modtaget:

export default {
	'/handler/': function(data) {
		console.log(data); // vil blive vist i server-konsollen
		return 'form data received';
	}
}

Opret en formular og en fil til dens behandling. Send formularen og kontroller, at dataene virkelig er ankommet til serveren.