jQuery - Formulier resetten


Normaal gesproken is het wellicht niet altijd even verstandig om een Reset knop toe te voegen aan een formulier omdat er dan het risico bestaat dat alle ingevulde gegevens worden gereset, vervelend indien het een uitgebreid formulier betreft. Maar een dergelijke knop kan soms ook handig zijn bijvoorbeeld in het geval van een zoekfilter. Met behulp van jQuery kan een formulier eenvoudig gereset worden. Dit gaat op onderstaande manier.

Plaats als eerste de onderstaande code. In de code staat de link met de classnaam a.reset, dit is de knop die zometeen wordt geplaatst om het formulier te resetten. Zorg dat het ID #form-validate zoals in de code hieronder staat overeenkomt met het ID van het formulier dat gereset moet gaan worden na een klik op de knop, wijzig dit naar wens.

$(document).ready(function() {
        $('a.reset').click(function() {
                $('#form-validate').each(function(){
                        this.reset();
                });
        });
});


Plaats dan de onderstaande link in het formulier.

<a href="javascript:void(0);" class="reset">Herstellen</a>

Functie

Je kunt het bovenstaande ook eventueel in een functie plaatsen, bijvoorbeeld handig als je meerdere formulieren op een website gebruikt. In dat geval staat de ID van het betreffende formulier in de code van de link als onclick. Het resultaat is dan uiteindelijk hetzelfde.

function resetForm(id) {
        jQuery('#'+id).each(function(){
                this.reset();
        });
}


<a href="javascript:void(0);" onclick="resetForm('form-validate');" >Herstellen</a>