Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Autre
    Inscrit en
    août 2017
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : août 2017
    Messages : 51
    Points : 39
    Points
    39

    Par défaut Ajout et suppression input text

    Salut à tous
    Voilà j ai un formulaire ou l utilisateur doit entrer des mot clé.
    Il y a un input vide avec a côté un bouton ajouter.

    J ai fait un script pour que quand il clique sur ajouter un nouvel input apparait avec ce qu'il a saisi et un bouton supprimer.
    Pour le moment ça fonctionne
    La ou je pèche c'est pour le supprimer

    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
    function plus() {
    	var champ = document.getElementById("choice");
    	var ajout = document.getElementById("form_input");
    	var count = document.getElementById("count");
     
    	//nouveau champ
    	var new_champ = '<input type="text" name="formul[]" value="'+champ.value+'"> <button id="minus" form="other" onclick="minus(this.item);">-</button><br>';
     
    	champ.value = '';
    	count.value = count.value+1;
    	var div = document.createElement('div');
    	div.innerHTML = new_champ;
     
    	ajout.appendChild(div);
     
    }
     
    function minus(id) {
    	var ajout = document.getElementById("form_input");
     
    	ajout.removeChild(ajout.childNodes.item(id));
    }
    Le html
    Code HTML : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <script src="js/form.js"></script>
            <form method="post">
              <div id="form_input" class="f"></div>
              <input type="text" id="choice" name="formul[]"> <button id="plus" onclick="plus();" form="other">+</button>
              <input type="hidden" id="count" value="0">
            </form>
    Avec ceci, suivant ce que j ai supprimé précédemment, je ne supprime pas toujours le bon.
    Normal car le count n est plus bon.

    Auriez vous un conseil a me donner

    Merci d avance

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    février 2009
    Messages
    6 151
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 69
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : février 2009
    Messages : 6 151
    Points : 22 257
    Points
    22 257
    Billets dans le blog
    63

    Par défaut



    Je viens de tester vos codes et je ne comprends pas votre problème !

    Lorsqu'on clique sur le "+" un nouvel input apparaît et le "+" se transforme en "-".
    Si on clique sur un "-" l'input concerné est détruit.

    Donc votre code fonctionne correctement.

    Blog



    Nota bene : si vous devez être compatible avec les navigateurs obsolètes (IE8 et plus), vous devez convertir les codes ES2015 en ES5 avec Babel.

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Rédacteur/Modérateur
    Avatar de jreaux62
    Homme Profil pro
    Webdesigner
    Inscrit en
    août 2008
    Messages
    15 102
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 52
    Localisation : France, Pas de Calais (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Webdesigner
    Secteur : Arts - Culture

    Informations forums :
    Inscription : août 2008
    Messages : 15 102
    Points : 30 819
    Points
    30 819

    Par défaut

    @danielhagnoul
    Ce n'est pas le bon input (celui à coté du bouton "-") qui est supprimé, mais le 1er !

    Je vois aussi PLUSIEURS autres problèmes :

    1- count.
    C'est un input.
    Donc, count.value est une chaine.
    Du coup, pour l'incrémentation, il faut remplacer :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
     count.value = count.value+1;
    par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
      count.value = Number(count.value)+1;
    Sinon, on obtient : '0', '01', '011', '0111', '01111',...

    Cela dit, il n'est pas utilisé dans le reste du script !

    2- id="minus" :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var new_champ = '...<button id="minus" ...';
    On NE peut PAS dupliquer un id, car il doit être UNIQUE.
    Il faut appliquer une classe.
    "Si tu suis le chemin qui s'appelle « plus tard », tu arriveras à la place qui s'appelle « jamais »."
    François Camille Prévot (1910-1996), instituteur puis Directeur d'école et... mon grand-père.
    "Pose ta question, tu seras idiot une seconde. Ne la pose pas, tu seras idiot toute ta vie."
    Albert Einstein (1879-1955).
    Mes tutos DVP
    Gestion-Affichage de Nouvelles
    Affichage en tableau HTML
    Fonctions de redimensionnement d'images

  4. #4
    Membre expert
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    août 2003
    Messages
    2 813
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : août 2003
    Messages : 2 813
    Points : 3 603
    Points
    3 603

    Par défaut

    suggestion:

    Code javascript : 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
    // raccourci pour nommer les éléments de la page
    function q(tag){
    	return document.getElementById(tag)
    }
     
    // activation du bouton "ajouter une ligne"
    function init(){
    	q("plus").addEventListener("click",plus_moins,false);
    }
     
    // création des nouveaux champs + bouton de suppression
    function plus_moins(){
    	// chaque ajout est inséré dans un div
    	// ce qui permettra de supprimer directement le div
    	let d=document.createElement("div");
    	let ch=document.createElement("input");
    	ch.type="text";
    	ch.name="formul[]";
    	let b=document.createElement("button");
    	b.textContent= " - ";
    	b.padding= "0px";
    	b.title="supprimer ce champ";
    	b.addEventListener	(// le bouton "-" supprime tout le div
    		"click",(e) =>	{
    			q("cadre").removeChild(e.target.parentElement);
    			e.preventDefault()
    				}
    				);
    	d.appendChild(ch);
    	d.appendChild(b);
    	q("cadre").appendChild(d);
     
    }
     
    window.addEventListener("load",init,true);

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <form id="frm" action="">
    	<p>
    		<input id="plus" type="button" value="ajouter une ligne" />
    	</p>
    	<div id="cadre">
    	</div>
    </form>

    En fait, count ne sert pas à grand chose...

  5. #5
    Nouveau membre du Club
    Homme Profil pro
    Autre
    Inscrit en
    août 2017
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 40
    Localisation : France, Seine Maritime (Haute Normandie)

    Informations professionnelles :
    Activité : Autre

    Informations forums :
    Inscription : août 2017
    Messages : 51
    Points : 39
    Points
    39

    Par défaut

    ouahh super javatwister
    ton code est excellent, je l'ai un peu mis à ma sauce, mais excellent.

    Merci à toi

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

Discussions similaires

  1. [BootStrap] Ajout input text dans une popover
    Par RolandGautier dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 05/04/2018, 09h03
  2. Zend form, ajouter un caractère derrière un input text
    Par supertotal dans le forum Zend_Form
    Réponses: 7
    Dernier message: 24/02/2012, 18h00
  3. Problèmes ajout dynamic d'input text
    Par LordBelial8 dans le forum Flex
    Réponses: 0
    Dernier message: 26/01/2010, 16h05
  4. ajout d'un champs input text dans un formulaire
    Par korrigann dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 10/04/2006, 15h45
  5. [FLASH MX2004] Ajout et suppression de texte
    Par noarno dans le forum Flash
    Réponses: 2
    Dernier message: 17/06/2005, 13h41

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