Galactic Civilizations 3
Formulaire dynamique en JavaScript

Formulaire dynamique en JavaScript

Catégorie: Javascript.
Posté par le 19/12/2011.
Dernière mise à jour le 19/12/2011.

Description

Ce tutoriel vous expliquera comment créer un formulaire dynamique en JavaScript.

Introduction

Tout au long de ce tutoriel, nous vous expliquerons comment ajouter/supprimer un champ dans un formulaire à l’aide d’un petit script JavaScript.

Ce tutoriel nécessite des connaissances de base en HTML et en JavaScript

Formulaire HTML

Pour commencer, nous allons créer un fichier du nom de formulaire-dynamique.html.

formulaire-dynamique.html

<form name="formulaireDynamique">
   <input type="button" onclick="ajout(this);" value="ajouter un champ"/>
   <br /><br />
   <input type="submit" value="soumettre"/>
</form>

Comme vous pouvez le voir, celui-ci est très simple. Nous avons nommé le formulaire « formulaireDynamique » et un bouton permettant l’ajout d’un champ y a été placé.

Ce bouton écoute l’événement onclick afin d’appeler une fonction JavaScript « ajout(Element) » qui permettra d’ajouter un champ au-dessus du bouton « ajouter un champ ».

Fonction d’ajout

Nous allons maintenant écrire la fonction JavaScript permettant d’ajouter un champ au formulaire. Pour ce faire, ajoutez le code suivant en haut du formulaire :

formulaire-dynamique.html

<script type="text/Javascript" >
   function ajout(element){
      var formulaire = window.document.formulaireDynamique;
      // On clone le bouton d'ajout
      var ajout = element.cloneNode(true);
      // Crée un nouvel élément de type "input"
      var champ = document.createElement("input");
      // Les valeurs encodée dans le formulaire seront stockées dans un tableau
      champ.name = "champs[]";
      champ.type = "text";
        
      var sup = document.createElement("input");
      sup.value = "supprimer un champ";
      sup.type = "button";
      // Ajout de l'événement onclick
      sup.onclick = function onclick(event)
         {suppression(this);};
        
      // On crée un nouvel élément de type "p" et on insère le champ l'intérieur.
      var bloc = document.createElement("p");
      bloc.appendChild(champ);
      formulaire.insertBefore(ajout, element);
      formulaire.insertBefore(sup, element);
      formulaire.insertBefore(bloc, element);
   }
</script>

Comme vous pouvez le voir ci-dessus, la fonction ajout crée les deux boutons (ajout et suppression de champ), les incèrent avant l’élément qui a appelé la fonction. De plus il place le champ dans une balise « p » et insère cette balise après les deux boutons.

Fonction de suppression

La fonction de suppression est beaucoup plus simple puisqu’elle consiste juste à supprimer trois éléments : le bouton d’ajout, le bouton de suppression et le bloc « p ». Voici ce qu’il faut rajouter entre les balises script pour finaliser le formulaire dynamique :

formulaire-dynamique.html

function suppression(element){
   var formulaire = window.document.formulaireDynamique;
        
   // Supprime le bouton d'ajout
   formulaire.removeChild(element.previousSibling);
   // Supprime le champ
   formulaire.removeChild(element.nextSibling);
   // Supprime le bouton de suppression
   formulaire.removeChild(element);
}

Notre formulaire dynamique est maintenant terminé.
 

Tu as aimé ce tutoriel ?
Aide nous à améliorer le site ! Deviens partenaire officiel ou suis nous sur facebook !

Commentaires[1]

Tu as aimé ce tutoriel ? Alors partage-le avec tes amis !
Partager sur Facebook Partager sur Twitter Partager sur Myspace Partager sur Stumbleupon Soumettre sur Reddit Partager sur Digg Ajouter à vos favoris Technorati Ajouter à vos favoris Live Ajouter à vos favoris Google Ajouter sur vos favoris Yahoo Voir le flux rss

Mots Clés: DOM formulaire dynamique html JavaScript web

Veve :
(11/04/2013 - 17:19:44)
il faut juste mettre "sudo" à la place de "su" pour exécuter la commande en root

Veve :
(11/04/2013 - 17:18:56)
Salut tu peux aller lire ce tutoriel: http://www.tutorielsenfolie.com/tutoriels-63-installation-configuration-opennebula.html Il fonctionne aussi sous ubuntu

safa.souissi4 :
(10/04/2013 - 20:58:13)
s'il vous plait c urgent :(

safa.souissi4 :
(10/04/2013 - 20:56:25)
bonsoir,je cherche un tutos pour installer opennebula.org sous ubuntu 12.

Veve :
(18/03/2013 - 20:07:49)
oui, j'essaye de voir d'ou viens le problème.

sonde :
(18/03/2013 - 13:29:57)
re merci (j apprend un peu plus) je crois que j ai trouver pourquoi je peu pas poster si il y a ligne code impossible de poster lol

Veve :
(17/03/2013 - 21:34:49)
Salut, j'espère que ça t'a aidé.

sonde :
(17/03/2013 - 09:59:02)
pour ton aide

sonde :
(17/03/2013 - 09:57:36)
slt Veve impossible de laisser com

sonde :
(17/03/2013 - 09:56:55)
??

Demi-dieu :
(15/03/2013 - 18:41:13)
salut ^^

sonde :
(13/03/2013 - 14:49:35)
un petit coucou

Tanamoureuse :
(29/09/2011 - 06:11:08)
Je t'aime

Faire un don

Ma Publicité ici


Faire un don