Formulieren automatisch invullen

Een verbazingwekkend groot onderdeel van kenniswerk is het invullen van formulieren. En daar zijn twee dingen waar je heel vaak in kunt automatiseren:

1. Je kunt zorgen dat je ze niet hoeft in te vullen, omdat je gewoon gegevens zit over te typen van het ene systeem naar het andere, wat vaak niet nodig is;
2. Je hebt vaak standaard “sjablonen” die je kunt gebruiken, ook al valt dat niet altijd direct op.

Een voorbeeld kan zijn dat er altijd wat verplichte velden zijn als “KVK” en “BTW”, maar dat je ook met particuliere klanten werkt, en je dan altijd “Nvt” invult. (Wat natuurlijk weer niet zo erg is bij twee velden, maar vervelender wordt als het meer is.)

Maar zo zijn er veel meer opties, dingen waar het eigenlijk altijd is “Als dit A is, dan is dat B, dat C, et cetera”.

Een formulier waar je medicijnen moet invullen, en je weet dat altijd als je medicijn X selecteert, dat het type dan op “vloeistof” moet komen, de eenheid op “ml”, de risico’s zijn dan Y…

Dit zijn echt die dingen die je eigenlijk doet zonder na te denken. En dus dingen waar je de computer prima op automatische piloot kunt zetten.

Laten we een voorbeeld bekijken.

Voorbeeld: gegevens automatisch op “nvt”

Voor het eerste voorbeeld maken we een simpel formuliertje, wat er ongeveer zo uit ziet:

Afhankelijk of we “Particulier” of “Zakelijk” kiezen, willen we “nvt” invullen bij voornaam en achternaam, of juist bij bedrijfsnaam.

Als we de code van het formulieren zouden inspecteren vinden we iets als dit:

<form action="#" method="get" id="demo-form-business-consumer">

	<p>
		<input type="radio" id="business-consumer-consumer" name="business-consumer" value="consumer"><label for="business-consumer-consumer"> Particulier</label><br>
		<input type="radio" id="business-consumer-business" name="business-consumer" value="business"><label for="business-consumer-business"> Zakelijk</label>

		<p>
			<label for="first-name">Voornaam</label>
			<input type="text" id="first-name" name="first-name" placeholder="Voornaam" required />
		</p>

		<p>
			<label for="last-name">Achternaam</label>
			<input type="text" id="last-name" name="last-name" placeholder="Achternaam" required />
		</p>

		<p>
			<label for="business-name">Bedrijfsnaam</label>
			<input type="text" id="business-name" name="business-name" placeholder="Bedrijfsnaam" required />
		</p>

		<p>
			<input type="submit" value="Opslaan">
		</p>
</form>

Dat betekent dat we het vrij eenvoudig met JavaScript kunnen aanpakken, door te kijken of de gebruiker de keuze van particulier/zakelijk wijzigt, en zo ja, de “nvt” automatisch invullen.

Eventueel kunnen we dat alleen doen als er nog niets is ingevuld, voor beide opties valt wat te zeggen hier.

Het JavaScript zou er bijvoorbeeld zo uit zien:

const doesNotApplyValue = 'nvt';

document.addEventListener('DOMContentLoaded', function(){
  const businessConsumerRadios = document.getElementsByName('business-consumer');
  const businessNameInput = document.getElementById('business-name');
  const firstNameInput = document.getElementById('first-name');
  const lastNameInput = document.getElementById('last-name');
  businessConsumerRadios.forEach(radio => {
    radio.addEventListener('change', function(){
      if(this.value === 'consumer')
      {
        businessNameInput.value = doesNotApplyValue;
        if(firstNameInput.value == doesNotApplyValue)
        {
	        firstNameInput.value = ''
	    }
	    if(lastNameInput.value == doesNotApplyValue)
        {
	        lastNameInput.value = ''
	    }
      }
      else if(this.value === 'business')
      {
        firstNameInput.value = doesNotApplyValue;
        lastNameInput.value = doesNotApplyValue;
        if(businessNameInput.value == doesNotApplyValue)
        {
	        businessNameInput.value = ''
        }
      }
    });
  });
});

Dit kunnen we eenvoudig in bijvoorbeeld een Tampermonkey script zetten, om te zorgen dat het automatisch uitgevoerd wordt op de pagina.

Op deze pagina is het al toegepast, en je kunt het zelf testen op het formulier hier boven.

Dit soort dingen kunnen weer helpen in tijd, frustratie, en fouten, als je het genoeg moet doen, of als er genoeg van die velden zijn.

We zullen een andere keer nog kijken naar een uitgebreider voorbeeld, waar we hele sjablonen kunnen gebruiken om formulieren in te vullen.