Scripts et Programmation

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

Table des matières

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 :)
Cette page a été vue 5079 fois