Scripts et Programmation

JAVASCRIPT : Envoyer un formulaire et l'effacer après

Table des matières

Introduction
Formulaire
1. Partie HTML
2. Partie JS

Introduction

Dans cet article, nous allons voir un exemple de formulaire en HTML, qui après envoi efface les champs remplis.
En effet, par défaut, les champs ne se vident pas après l'envoi.
Ici, c'est du Javascript simple, pas de JQuery ou autres libs lourdingues !

Formulaire

Partie HTML

Voici l'exemple du formulaire HTML. C'est un exemple tiré d'un code d'une appli perso web.
(Le formulaire affiche un champ texte et lance une recherche sur le site de beatport dans un nouvel onglet)

Code HTML :

<form name="beatport" action="https://www.beatport.com/search/tracks" target="_blank" method="get">
          <label><img src="img/beatport.png" style="height:1em;"></label>
          <input type="text" id="searchbeatport" name="q" />
          <input type="submit" value="&#10004;" onclick="submitBeatport()"  />
</form>

Notez les éléments importants dans notre cas :
- name="beatport" : Nommer le formulaire, ici beatport
- onclick="submitBeatport()" : Dans le bouton, ajouter une fonction Javascript nommée submitBeatport

Partie JS

Pour la partie Javascript, c'est très simple :

Code JAVASCRIPT :

function submitBeatport()
{
          document.beatport.submit();
          document.beatport.reset();
}

Et voilà, après envoi du formulaire, il s'efface tout seul