1. #1
    Membre du Club
    Femme Profil pro
    Développeur Web
    Inscrit en
    octobre 2010
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : octobre 2010
    Messages : 153
    Points : 47
    Points
    47

    Par défaut Ajouter des champs dynamiquement

    Bonjour
    J'ai un formulaire dans lequel j'ai un élément button comme ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <button>+ Ajouter une expérience</button>
    J'aimerais que quand je clique sur ce bouton, j'ai 3 champs textes et un champ d'une liste déroulante qui apparaissent. Je voudrai pouvoir recliquer sur ce bouton et afficher encore d'autres même champs à remplir. Comment puis-je le faire ? Aidez-moi !
    Développement web - WebMarketing - Recrutement
    Site O'ClockWeb : http://oclockweb.cvflashjob.com/
    Mon Facebook : https://www.facebook.com/Anouchkalawebmarketeuse

  2. #2
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    878
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 878
    Points : 978
    Points
    978

    Par défaut

    Salut,

    On peut le faire d'une façon qui est critiquée je crois a savoir en utilisant la propriété innerHTML, on crée par exemple une div, on lui ajoute le code html qu'on veut via la propriété innerHTML puis on a ajoute cette div au document.

    Sinon on utilise les méthode de manipulation du DOM mais je trouve que ça peut être long des fois...

  3. #3
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    37 383
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 67
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 37 383
    Points : 63 675
    Points
    63 675
    Billets dans le blog
    1
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag


    réalisations :www.oxygen-translations.com|www.saftair.com| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  4. #4
    Membre du Club
    Femme Profil pro
    Développeur Web
    Inscrit en
    octobre 2010
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : octobre 2010
    Messages : 153
    Points : 47
    Points
    47

    Par défaut

    J'ai trouvé ce script qui permet juste d'ajouter un seul champ texte :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    <form name="formulaireDynamique">
       <input type="button" onclick="ajout(this);" value="ajouter un champ"/>
       <br /><br />
       <input type="submit" value="soumettre"/>
    </form>
     
    <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);
       }
     
    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);
    }
    </script>
    J'ai modifié ce code pour pouvoir ajouter 3 champs texte et une liste déroulante mais ça ne marche pas :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    <form name="formulaireDynamique">
       <input type="button" onclick="ajout(this);" value="ajouter un champ"/>
       <br /><br />
       <input type="submit" value="soumettre"/>
    </form>
     
    <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 4 nouvels élément de type "input"
          var champ1 = document.createElement("input");
    	  var champ2 = document.createElement("input");
    	  var champ3 = document.createElement("input");
    	  var champ4 = document.createElement("select");
          // Les valeurs encodée dans le formulaire seront stockées dans un tableau
          champ1.name = "champs1[]";
          champ1.type = "text";
     
    	  champ2.name = "champs2[]";
          champ2.type = "text";
     
    	  champ3.name = "champs3[]";
          champ3.type = "text";
     
    	  champ4.name = "champs4[]";
          champ4.type = "text";
     
          var sup = document.createElement("input");
          sup.value = "x";
          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 bloc1 = document.createElement("p");
    	  var bloc2 = document.createElement("p");
    	  var bloc3 = document.createElement("p");
    	  var bloc4 = document.createElement("p");
          bloc1.appendChild(champ1);
    	  bloc2.appendChild(champ2);
    	  bloc3.appendChild(champ3);
    	  bloc4.appendChild(champ4);
          formulaire.insertBefore(ajout, element);
          formulaire.insertBefore(sup, element);
          formulaire.insertBefore(bloc, element);
       }
     
       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);
    }
    </script>
    Développement web - WebMarketing - Recrutement
    Site O'ClockWeb : http://oclockweb.cvflashjob.com/
    Mon Facebook : https://www.facebook.com/Anouchkalawebmarketeuse

  5. #5
    Membre éclairé
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    381
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 381
    Points : 765
    Points
    765

    Par défaut

    jour

    bloc1 bloc2 et bloc3 et bloc4 ne sont pas inséré dans le document

  6. #6
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    878
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 878
    Points : 978
    Points
    978

    Par défaut

    Oui melka one a raison, à la ligne 48 vous insérez "bloc" qui n'existe pas au lieu d’insérer bloc1, bloc2,bloc3 et bloc4...

    Remplacez cette ligne 48 par :

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
          formulaire.insertBefore(bloc1, element);
          formulaire.insertBefore(bloc2, element);
          formulaire.insertBefore(bloc3, element);
          formulaire.insertBefore(bloc4, element);

    Mais il y a d'autres problèmes, la fonction "suppression" ne fonctionne pas car elle était particulière à l'exemple d'où vous l'avez prise...Vous avez maintenant quatre champs il faut donc quatre fois l'instruction : formulaire.removeChild(element.nextSibling);

    Vous pouvez testez ici : http://jsbin.com/savebanoja/edit?html,output

  7. #7
    Membre éclairé
    Homme Profil pro
    chomeur
    Inscrit en
    avril 2015
    Messages
    381
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : chomeur
    Secteur : Distribution

    Informations forums :
    Inscription : avril 2015
    Messages : 381
    Points : 765
    Points
    765

    Par défaut

    le plus simple serait de créer un conteneur dans lequel on met les éléments et j'ai du mal a comprendre l’intérêt de mettre les input et le select dans une balise p

  8. #8
    Membre du Club
    Femme Profil pro
    Développeur Web
    Inscrit en
    octobre 2010
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : octobre 2010
    Messages : 153
    Points : 47
    Points
    47

    Par défaut

    Ca marche en suivant toutes vos indications. Ma question maintenant est de savoir comment construire et mèttre des données dans ma liste déroulante ?

    Voici en dessous mon code qui fonction :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    <form name="formulaireDynamique">
       <input type="button" onclick="ajout(this);" value="ajouter un champ"/>
       <br /><br />
       <input type="submit" value="soumettre"/>
    </form>
     
    <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 4 nouvels élément de type "input"
          var champ1 = document.createElement("input");
    	  var champ2 = document.createElement("input");
    	  var champ3 = document.createElement("input");
    	  var champ4 = document.createElement("select");
          // Les valeurs encodée dans le formulaire seront stockées dans un tableau
          champ1.name = "champs1[]";
          champ1.type = "text";
     
    	  champ2.name = "champs2[]";
          champ2.type = "text";
     
    	  champ3.name = "champs3[]";
          champ3.type = "text";
     
    	  champ4.name = "champs4[]";
          champ4.type = "text";
     
          var sup = document.createElement("input");
          sup.value = "x";
          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 bloc1 = document.createElement("p");
    	  var bloc2 = document.createElement("p");
    	  var bloc3 = document.createElement("p");
    	  var bloc4 = document.createElement("p");
          bloc1.appendChild(champ1);
    	  bloc2.appendChild(champ2);
    	  bloc3.appendChild(champ3);
    	  bloc4.appendChild(champ4);
          formulaire.insertBefore(ajout, element);
          formulaire.insertBefore(sup, element);
          formulaire.insertBefore(bloc1, element);
          formulaire.insertBefore(bloc2, element);
          formulaire.insertBefore(bloc3, element);
          formulaire.insertBefore(bloc4, element);
     
       }
     
       function suppression(element){
       var formulaire = window.document.formulaireDynamique;
     
       // Supprime le bouton d'ajout
       formulaire.removeChild(element.previousSibling);
       // Supprime le champ
       formulaire.removeChild(element.nextSibling);
       formulaire.removeChild(element.nextSibling);
       formulaire.removeChild(element.nextSibling);
       formulaire.removeChild(element.nextSibling);
       // Supprime le bouton de suppression
       formulaire.removeChild(element);
    }
    </script>
    Développement web - WebMarketing - Recrutement
    Site O'ClockWeb : http://oclockweb.cvflashjob.com/
    Mon Facebook : https://www.facebook.com/Anouchkalawebmarketeuse

  9. #9
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    878
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 878
    Points : 978
    Points
    978

    Par défaut

    Citation Envoyé par MInfo25 Voir le message
    Voici en dessous mon code qui fonction :
    Oui on peut aussi voir et même tester le code dans lien que j'ai donné...

    Citation Envoyé par MInfo25 Voir le message
    Ca marche en suivant toutes vos indications. Ma question maintenant est de savoir comment construire et mèttre des données dans ma liste déroulante ?
    Après ou pendant l'insertion dynamique ? Et quelle liste déroulante puisqu'il peut y en avoir plusieurs ?

  10. #10
    Membre du Club
    Femme Profil pro
    Développeur Web
    Inscrit en
    octobre 2010
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : octobre 2010
    Messages : 153
    Points : 47
    Points
    47

    Par défaut

    Oui pendant l'insertion dynamique, j'aimerais que cette liste déroulante s'ajoute :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <select>
    <option value="" selected="selected">Principal enseignement...</option>
    <option value="connaissance_metier">Connaissance du métier</option>
    <option value="interet_metier">Intérêt pour le métier</option>
    <option value="connaissance_secteur">Connaissance du secteur</option>
    <option value="interet_secteur">Intérêt pour le secteur</option>
    <option value="management">Management</option>
    <option value="rigueur">Rigueur</option>
    </select>
    Développement web - WebMarketing - Recrutement
    Site O'ClockWeb : http://oclockweb.cvflashjob.com/
    Mon Facebook : https://www.facebook.com/Anouchkalawebmarketeuse

  11. #11
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    878
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 878
    Points : 978
    Points
    978

    Par défaut

    Ok mais à quelle liste déroulante puisqu'il peut y en avoir plusieurs ?

    Vous voulez ces options pour chaque liste insérée ?

    A la fin ça risque d'être long on en revient alors à la méthode dont je parlais au début...

    PS : c'est quoi l’intérêt de faire plusieurs insertions les unes à la suite des autres ?

  12. #12
    Membre du Club
    Femme Profil pro
    Développeur Web
    Inscrit en
    octobre 2010
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : octobre 2010
    Messages : 153
    Points : 47
    Points
    47

    Par défaut

    En fait j'ai un long formulaire, à un moment donné je dois ajouter des expériences en cliquant sur le bouton
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <button>+ Ajouter une expérience</button>
    . Et après clique sur ce bouton 3 champs textes et une liste déroulante doivent apparaître en dessous du bouton. Dans la liste déroulante, les utilisateurs doivent pouvoir sélectionner une valeur. Et cette liste est celle en dessous :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    <select>
    <option value="" selected="selected">Principal enseignement...</option>
    <option value="connaissance_metier">Connaissance du métier</option>
    <option value="interet_metier">Intérêt pour le métier</option>
    <option value="connaissance_secteur">Connaissance du secteur</option>
    <option value="interet_secteur">Intérêt pour le secteur</option>
    <option value="management">Management</option>
    <option value="rigueur">Rigueur</option>
    </select>
    Développement web - WebMarketing - Recrutement
    Site O'ClockWeb : http://oclockweb.cvflashjob.com/
    Mon Facebook : https://www.facebook.com/Anouchkalawebmarketeuse

  13. #13
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    878
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 878
    Points : 978
    Points
    978

    Par défaut

    Je l'ai fait de la façon dont j'ai parlée et qui est critiquée je crois à savoir en utilisant la propriété innerHTML...

    J'ai donc ajouté une ligne, vous prouvez tester ici : http://jsbin.com/qawiyipita/edit?html,console,output

    PS : On peut faire tout le reste de cette manière mais si cela ne vous convient pas il faudra utiliser les mêmes méthodes que celles que vous avez utilisées (createElement(), appendChild()...)

  14. #14
    Membre éprouvé
    Homme Profil pro
    Inscrit en
    octobre 2011
    Messages
    878
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations forums :
    Inscription : octobre 2011
    Messages : 878
    Points : 978
    Points
    978

    Par défaut

    J'ai fait le reste de cette manière : http://jsbin.com/weloxulobe/1/edit?html,output

    PS : C'est quoi fondamentalement le problème avec cette méthode dans ce genre de situation ?

  15. #15
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    11 699
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 11 699
    Points : 24 980
    Points
    24 980

    Par défaut

    Bonjour,
    tu peux également regarder du coté de cette discussion : Insertion/Suppression d'une ligne d'une TABLE

  16. #16
    Membre du Club
    Femme Profil pro
    Développeur Web
    Inscrit en
    octobre 2010
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : octobre 2010
    Messages : 153
    Points : 47
    Points
    47

    Par défaut

    Bonjour
    Désolée de repondre tardivement, je n'étais pas partie. J'ai pu adopter la dernière solution qui marchait à savoir celle de Beginner.
    Le problème que je rencontre maintenant est comment afficher le rendu en javascript dans un de mes fieldset html ?

    J'ai crée une nouvelle discussion, je ferme celle-ci ! Merci à tous de votre aide
    Développement web - WebMarketing - Recrutement
    Site O'ClockWeb : http://oclockweb.cvflashjob.com/
    Mon Facebook : https://www.facebook.com/Anouchkalawebmarketeuse

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [AC-2007] ajouter des champs dynamiquement
    Par xargin dans le forum VBA Access
    Réponses: 12
    Dernier message: 21/10/2011, 19h15
  2. [SP-2007] Ajouter des champs dynamiquement dans une cutom list
    Par takuan64 dans le forum SharePoint
    Réponses: 8
    Dernier message: 26/07/2010, 14h12
  3. ajouter des champs dynamiquement en javascript
    Par ncheboi dans le forum JavaScript
    Réponses: 6
    Dernier message: 10/03/2010, 14h28
  4. Ajouter des champs dynamiquement
    Par lemirandais dans le forum jQuery
    Réponses: 2
    Dernier message: 25/02/2009, 13h41
  5. Réponses: 1
    Dernier message: 14/08/2006, 09h41

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo