Discussion :

[dario81]

bonjour à tous.

Je me retrouve dans une petite impasse et je sollicite votre aide.

Je souhaiterais dupliquer les inputs qui se trouvent dans ce div en cliquant sur un bouton de formulaire:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div id="ingredientsDetail">
<div id="creationIng">
<input type="texte">
<input type="texte">
<input type="button" value="&#x2b;" onclick="newItem()">
</div>
</div>

et voici mon code javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
function newItem()
		{
     	var new=document.getElementById("creationIng").cloneNode(true);
		document.getElementById("ingredientsDetail").appendChild(new);
		}

N'étant pas un pro en javascript, je n'arrive pas à débugger ma fonction et comprendre ce qui ne va pas.

Merci d'avance pour votre aide, Gerald

[dario81]

le nom de ma variable n’était pas correct.

Le nom de 'new' posait problème, je l'ai modifiée en 'iNew' et tout fonctionne.

Je mets ce post en "résolu".

Bonne journée, soirée et surtout bonne année a tous.... Gerals

[javatwister]

Ne fais surtout pas ça: tu vas dupliquer creationIng avec le même id et tout son contenu, y compris le bouton...

Une petite recherche sur le forum s'impose car le sujet a été traité à peu près 3 milliards de fois.

[dario81]

Ha!?! ben merci pour ta réponse, si je ne trouve ppas pr moi-même, je chercherais encore.

Encore merci et bonne année :-)

[dario81]

bonsoir.
Je reviens vers vous, suite a la remarque de JAvawitser, j'ai remodifier un peu (enfin, j'ai trouvé une qui fonctionne mieux! ) ma fonction
Le voici:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
var i;
var item = document.getElementById("creationIng");	
for (i = 1; i < 20; i++) 
{
		var clone = item.cloneNode(true);
		clone.id = 'creationIng'+i;
		document.getElementById("ingredientsDetail").appendChild(clone);
}

Le hic c'est qu'elle me crée les 20 div en une fois alors que je voudrais les créer un par un jusque 20 maximum.

Merci pour votre aide, Gerald...

[javatwister]

Hum. quand tu cliques le bouton, tu veux recréer un div comme creationIng, c'est ça? Qui contienne deux input?

=> Ton bouton est mal placé, il faut que tu en aies conscience;
=> De fait, tu peux cloner creationIng avec (true) et mettre à jour son id;
=> Je ne comprends pas pourquoi tu dis "un par un" alors que la div contient 2 input au départ.

[Invité]

Bonjour,

le problème a été posé - et résolu - de nombreuses fois.

Une solution : https://codepen.io/jreaux62/pen/wvwMZwL

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<form method="post">
  <div id="form_input_modele">
    <label>champ1 : <input type="text" name="champ1[]" /></label>
    <label>champ2 : <input type="text" name="champ2[]" /></label>
  </div>
  <div id="form_input_adds"></div>
  <button type="button" id="btn_add_input" data-nbre="0" data-max="5">+</button>
</form>

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
36
37
38
39
40
41
"use strict";
const btn_add_input = document.getElementById("btn_add_input");
const form_input_modele = document.getElementById("form_input_modele");
const form_input_adds = document.getElementById("form_input_adds");
 
btn_add_input.addEventListener( 'click', function() {
  let nbre_add = Number(btn_add_input.dataset.nbre);
  let nbre_max = Number(btn_add_input.dataset.max);
  if( nbre_add < nbre_max )
  {
    btn_add_input.dataset.nbre = Number(btn_add_input.dataset.nbre)+1;
    // -----------
    // on clone le div modele
    let form_input_clone = form_input_modele.cloneNode(true);
    form_input_clone.removeAttribute('id'); // on supprime l attribut id du clone (car un id est unique)
    // -----------
    // bouton de suppression de la ligne
    let button = document.createElement("button");
    button.type = "button";
    button.classList.add("minus");
    button.textContent = "-";
    button.addEventListener	( // le bouton "-" supprime tout le div
      "click",function(e){
        form_input_adds.removeChild(e.target.parentElement);
        e.preventDefault();
        btn_add_input.dataset.nbre = Number(btn_add_input.dataset.nbre)-1;
        btn_add_input.style.display = 'block';
      }
    );
    // -----------
    form_input_clone.appendChild(button);
    form_input_adds.appendChild(form_input_clone);
    // -----------
    // nombre maxi atteint
    if( nbre_add == nbre_max-1 )
    {
      btn_add_input.style.display = 'none';
    }
    // -----------
  }
});

[NoSmoking]

Bonjour,
juste une remarque, si l'on utilise le clonage, le clonage de cet élément doit se faire avant toutes saisies sous peine d'avoir à effacer les saisies lors d'un ajout.

Important lors de l'ajout il faut ajouter un clone de l'élément cloné.

[dario81]

ok, merci mais je l'ai déjà essayé mais quand j’inclue le code dans ma page, rien ne se passe.
J'ai beau cliquer sur le plus, rien ne se crée.

[javatwister]

Autre exemple de code: http://javatwist.imingo.net/ajoutsup.htm

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<form id="frm" action="">
	<div id="cadre">
		<label>champ1 : <input type="text" name="champ1[]" /></label>
		<label>champ2 : <input type="text" name="champ2[]" /></label>
	</div>
	<div id="bou">
		<input id="plus" type="button" value="ajouter une ligne" />
	</div>
</form>

Désolé pour les noms de variables pas retouchés.

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
window.addEventListener("load",()=>{
	const d=document.getElementById("cadre");
	document.getElementById("plus").addEventListener("click",(e)=>{
		if(document.querySelectorAll('[name="champ1[]"]').length <20){
			const bis=d.cloneNode(true);
			bis.removeAttribute("id");
			const t=bis.querySelectorAll(["label > input"]);
			for(let i=0;i<t.length;i++){
				t[i].value=""
			}
 
			const b=e.target.cloneNode();
			b.value= " - ";
			b.padding= "0px";
			b.title="supprimer ce champ";
			bis.appendChild(b);
 
			b.addEventListener("click",(e)=>{
				document.getElementById("frm").removeChild(e.target.parentElement);
				e.preventDefault()
			},false);
			document.getElementById("frm").insertBefore(bis,document.getElementById("bou"));
		}
 	},false);
},false);