# Formulieren

Bij het werken met formulieren zijn er een aantal gebeurtenissen die onze aandacht vereisen. Er is het invullen van de individuele velden, de gebeurtenissen die er zijn tijdens het invullen, wanneer je in of uit de velden stapt en uiteindelijk het verlaten van het formulier via het doorsturen van de gegevens. Als je je formulier en de erin liggende velden een id hebt gegeven, kan je ze bereiken via document.getElementById() of document.querySelector(). Als je de name-attribuut aan een formulier hebt gegeven, kan je ook onderstaande notatie gebruiken:

let formulier = document.forms.myForm;

In dit geval heeft het formulier een naam myForm. Als er in dat formulier dan ook nog een veld zit met de naam telefoon, dan kan je dat bereiken via:

let myPhoneField = document.forms.myForm.telefoon;

Het meest voorkomende veld is het tekstveld. Zoals we reeds gezien hebben, heeft dit veld een value eigenschap. Deze kan je ophalen of veranderen. Ook hebben ze enkele gebeurtenissen zoals onfocus en onblur, maar ook onchange. Tegelijk hebben ze zelfs gebeurtenissen voor elke toets die je indrukt: onkeypress, onkeydown en onkeyup.

Voor checkboxen en keuzerondjes willen we dan weer weten wat de checked eigenschap aan waarde bevat, true of false. Tegelijk hebben ze ook onclick en onchange gebeurtenissen.

Bij selectievelden moeten we een onderscheid maken tussen de mogelijkheid dat we één of meerdere elementen kunnen selecteren. Dit kunnen we achterhalen door het type eigenschap van het veld op te vragen. Ofwel is dit select-one of `select-multiple.

Als we er slechts één kunnen selecteren, dan vinden we de waarde door de 'selectedIndex' eigenschap op te vragen. Als we echter meerdere elementen kunnen selecteren, krijgen we een Array van waarden terug als we de options[n].selected raadplegen. Het antwoord is dan telkens true of false. Dat lijkt veel werk, maar met wat denkwerk, kunnen we dit snel en goed oplossen. De selectievelden bevatten ook een onchange gebeurtenis.

Het formulier zelf moet uiteindelijk verzonden worden. Bij de door JavaScript op te vangen gebeurtenis onsubmit, kan je nog voor het versturen naar de server ingrijpen. Dit wil zeggen dat je bijvoorbeeld nog wel één en ander kan nakijken en de gebruiker op eventuele fouten kan wijzen, vooraleer je het formulier laat versturen. Natuurlijk is het raadzaam dat op de server zelf nog steeds wordt nagekeken of alle velden correct zijn ingevuld. Maar dat is voor de cursus PHP, mySQL.

# Stop submit

Bekijk bijgevoegd formulier. Het is een eenvoudig formulier dat ons zal waarschuwen als we geen e-mail hebben ingevuld. Wat nog belangrijker is, is dat het formulier niet wordt opgestuurd, zolang er geen e-mail is ingevuld.

// handle the form submit event
function prepareEventHandlers() {
	document.getElementById("frmContact").onsubmit = function() {
		// prevent a form from submitting if no email.
		if (document.getElementById("email").value == "") {
			document.getElementById("errorMessage").innerHTML = "Please provide at least an email address!";
			// to STOP the form from submitting
			return false;
		} else {
			// reset and allow the form to submit
			document.getElementById("errorMessage").innerHTML = "";
			return true;
		}
	};
}
// when the document loads
window.onload = function() {
	prepareEventHandlers();
};

Belangrijk is dat we de regel return false; kunnen gebruiken om het eigenlijke opsturen van een formulier te stoppen. return true; laat het versturen wel gebeuren.

# Reageren op formulier selecties

In plaats van te reageren op het submit event, gaan we dat deze keer op een individueel element doen. In dit geval zal het een check box zijn die, als die geactiveerd wordt, een extra deel van ons formulier zichtbaar of actief maakt.

Bekijk bijgevoegde HTML code. De sectie met verschillende check boxen staat in een <div> met een id tourSelection. Daar is tevens geen CSS aan gekoppeld en dus zijn ze ook niet verstopt bij het laden van de pagina. Dit doen we wel via het JavaScript, zoals hieronder vermeld.

// show and hide sections of a form
function preparePage() {
	document.getElementById("brochures").onclick = function() {
		if (document.getElementById("brochures").checked) {
			// use CSS style to show it
			document.getElementById("tourSelection").style.display = "block";
		} else {
			// hide the div
			document.getElementById("tourSelection").style.display = "none";
		}
	};
	// now hide it on the initial page load.
	document.getElementById("tourSelection").style.display = "none";
}
window.onload = function() {
	preparePage();
};

Wat we doen in de preparePage() functie is de div tourSelection verstoppen via .style.display = "none". De style eigenschap hadden we nog niet gezien. Deze laat ons toe om CSS te genereren in JavaScript en deze tegelijk een waarde te geven die uiteraard direct wordt toegepast. We diepen dit verder uit in het volgende hoofdstuk. Natuurlijk hadden we dit gelijk kunnen doen in onze CSS, maar als er iemand in zijn browser JavaScript had gedeactiveerd, dan zal het keuzeblok nooit zichtbaar kunnen worden.

Men noemt deze manier van werken progressive enhancement (progressieve verbetering). Het komt er op neer dat een gebruiker zonder JavaScript nog steeds alle functionaliteit van de pagina kan genieten, maar als JavaScript er wel is, de beleving op de pagina anders kan zijn.