Lomakkeiden lähettäminen JavaScriptissä

Osaat jo työskennellä lomakkeen elementtien kanssa JavaScriptissä, käsitellen niitä selaimessa. Lomakkeita voidaan kuitenkin myös lähettää palvelimelle, jotta ne voidaan käsitellä sivuston palvelinpuolella, joka on kirjoitettu PHP:llä tai NodeJS:llä.

Tämä on tarpeen, jotta voidaan lisätä ja muuttaa sivuston palvelimella tallennettuja tietoja.

Katsotaan kuinka se tehdään. Oletetaan, että meillä on useita syöttökenttiä ja painike:

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

Kääritään elementtimme form-tagin sisään. Tällöin saamme lomakkeen, joka painiketta painamalla lähetetään palvelimelle:

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

Jotta palvelimella voidaan vastaanottaa lomakkeen tiedot, tulee jokaiselle syöttökentälle antaa oma nimi:

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

Tällöin lomakkeen tiedot saapuvat palvelimelle muodossa avain-arvo -pareja, joissa avaimina ovat lomakkeen elementtien nimet ja arvoina - syötetyt tiedot.

Lomakkeen lähettämiseen ei tarvita palvelinta. Voit kopioida annetun lomakkekoodin mihin tahansa tiedostoon, avata sen selaimessa ja painaa lähetyspainiketta - lomake lähetetään ja selainsivu latautuu uudelleen.

Ilman palvelinta lomakkeen tiedot eivät kuitenkaan mene mihinkään. Joten testataan lomakkeen toimintaa palvelimen kanssa. Et vielä tunne palvelinkieliä, joten harjoitellaan lomakkeen lähettämistä käyttämällä opetus HTTP-palvelintamme.

Sijoitetaan lomakkeemme johonkin tiedostoon siten, että se on saatavilla osoitteessa http://localhost:3001/form.html:

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

Lisätään lomakkeellemme action-attribuutti, joka osoittaa lomakkeen lähetysosoitteen:

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

Kirjoitetaan nyt tiedostoon server.js lomakkeen lähetysosoitteen käsittelijä:

export default {
	'/handler/': function() {
		return 'lomaketiedot vastaanotettu';
	}
}

Käsittelijämme parametriin saapuvat lähetetyt lomakkeen tiedot:

export default {
	'/handler/': function(data) {
		console.log(data); // tulostuu palvelimen konsoliin
		return 'lomaketiedot vastaanotettu';
	}
}

Luo lomake ja tiedosto sen käsittelyyn. Lähetä lomake ja varmista, että tiedot todella saapuivat palvelimelle.