Hoe maak je een formulier schoon in een…

Het wissen van formulier velden kan op verschillende manieren worden geïmplementeerd, afhankelijk van de context:

Formulier resetten met een reset knop: Het gebruik van een knop met type="reset" in een HTML-formulier reset automatisch alle formulier elementen naar hun oorspronkelijke waarden.

<form id="myForm">
  <input type="text" name="username" value="Initial value">
  <input type="email" name="email">
  <button type="reset">Wissen</button>
</form>

Programma reset van het formulier met JavaScript: Je kunt de reset() methode aanroepen op het DOM-element van het formulier.
```
const form = document.getElementById('myForm');
form.reset(); // Reset het formulier naar de initiële waarden
```

Handmatig elk formulier veld wissen met JavaScript: Iteratie door de velden van het formulier en hun waarden instellen op een lege string of een andere beginwaarde.

const form = document.getElementById('myForm');
const inputs = form.querySelectorAll('input, textarea, select');

inputs.forEach(input => {
  const type = input.type;
  const tagName = input.tagName.toLowerCase();

  // Bepaal het type veld en wis het op de juiste manier
  if (type === 'text' || type === 'email' || type === 'password' || type === 'tel' || tagName === 'textarea') {
    input.value = '';
  } else if (type === 'checkbox' || type === 'radio') {
    input.checked = false;
  } else if (tagName === 'select') {
    input.selectedIndex = -1; // of zet op de standaardoptie
  }
  // Extra logica voor andere invoertypes indien nodig
});

Formuliervelden wissen in frameworks (bijvoorbeeld React, Vue): In frameworks waar de formulierstatus wordt beheerd door componenten, wordt wissen bereikt door het bijwerken van de status.

React (met gebruik van state):

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({
    username: '',
    email: ''
  });

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Gegevens verzenden
    console.log(formData);
    // Formulier wissen
    setFormData({
      username: '',
      email: ''
    });
  };

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        name="username"
        value={formData.username}
        onChange={handleChange}
      />
      <input
        type="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <button type="submit">Verzenden</button>
      <button type="button" onClick={() => setFormData({ username: '', email: '' })}>Wissen</button>
    </form>
  );
}

Vue (met v-model):

<template>
  <form @submit.prevent="handleSubmit">
    <input type="text" v-model="formData.username">
    <input type="email" v-model="formData.email">
    <button type="submit">Verzenden</button>
    <button type="button" @click="clearForm">Wissen</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '',
        email: ''
        // ... andere velden
      }
    };
  },
  methods: {
    handleSubmit() {
      // Gegevens verzenden
      console.log(this.formData);
      this.clearForm(); // Wissen na verzending
    },
    clearForm() {
      this.formData.username = '';
      this.formData.email = '';
      // ... andere velden resetten
    }
  }
};
</script>

De keuze van methode hangt af van de structuur van de applicatie, gebruikte technologieën en functionele eisen. HTML reset en JavaScript form.reset() zijn de eenvoudigste. In complexere applicaties met statusbeheer via frameworks, is het bijwerken van de status de standaardpraktijk.

Hoe maak je een formulier schoon in een webapplicatie?