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

JavaScript Discussion :

Ajout et suppression input text


Sujet :

JavaScript

  1. #1
    Membre du Club
    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



    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.

  3. #3
    Invité
    Invité(e)
    @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.

  4. #4
    Expert confirmé
    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
    Membre du Club
    ouahh super javatwister
    ton code est excellent, je l'ai un peu mis à ma sauce, mais excellent.

    Merci à toi

  6. #6
    Membre du Club
    Salut javatwister et la communauté également

    je reviens vers toi car j'ai un problème avec le code que tu m'as donné.

    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
    function plus_moins(){
        let tr=document.createElement("div");
        tr.classList.add("tr");
        let le=document.createElement("div");
        le.classList.add("le");
        let ri=document.createElement("div");
        ri.classList.add("ri");
        let ch=document.createElement("select");
        ch.name='heure[]';
        let h=q('h').value;
        for (var i = 0; i < 24; i++) {
          var option = document.createElement("option");
          option.value = i;
          option.text = i;
          if(i == h){
            option.selected = "selected";
          }
          ch.appendChild(option);
        }
        q("h").selectedIndex=0;
        let cm=document.createElement("select");
        cm.name='minute[]';
        let m=q('m').value;
        for (var i = 0; i < 12; i++) {
          var option = document.createElement("option");
          option.value = i * 5;
          option.text = i * 5;
          if(i*5 == m){
            option.selected = "selected";
          }
          cm.appendChild(option);
        }
        q("m").selectedIndex=0;
     
        let b=document.createElement("button");
        b.className="fas fa-minus";
        b.title="Supprimer";
        b.addEventListener  (
        "click",(e) =>  {
          q("prog").removeChild(e.target.parentElement);
          e.preventDefault()
            }
            );
     
        let hide=document.createElement("input");
        hide.type='hidden';
        hide.name='ids[]';
        hide.value='';
     
        ri.appendChild(ch);
        ri.appendChild(document.createTextNode(" "));
        ri.appendChild(cm);
        ri.appendChild(document.createTextNode(" "));
        ri.appendChild(b);
        ri.appendChild(hide);
        tr.appendChild(le);
        tr.appendChild(ri);
        q("prog").appendChild(tr);
     
    }


    voilà avec ce code ça me crée un truc du genre
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="prog">
        <dir class="tr">
            <div class="le"></div>
            <div class="ri">....</div>
        </div>
        ....
    </div>


    le souci est que quand je clique sur - ça ne fonctionne pas.

    si je mets
    Code HTML :Sélectionner tout -Visualiser dans une fenêtre à part
    1
    2
    3
    4
    <div id="prog">
        <div class="ri">....</div>
        ....
    </div>

    ça fonctionne mais du coup coté visuel c'est plus ça

    peux-tu m'aider

    EDIT: c'est bon j'ai trouvé
    Code :Sélectionner tout -Visualiser dans une fenêtre à part
    q("prog").removeChild(e.target.parentElement.parentElement);

  7. #7
    Expert confirmé
    bien vu