Nommer champs input après insertBefore

Version imprimable

Bonjour,

J'arrive à créer un champs texte avant un bouton, avec insertBefore (c'est de la balle)
mais le problème c'est pour
donner un nom différent aux nouveaux inputs (pour les récupérer en POST).

Dans l'exemple ci-dessous, il y a:
3 lignes contenant chacune: 3 inputs + un bouton lançant 'add_input'.

J'y envoi:
- before_what = id du bouton
- id_ligne
- num_champ (le dernier numéro du champs)

Est-ce que la solution serait de:
Créer une variable js pour chacune des lignes avec le nombre d'input
et de l'incrémenter à chaque appel de la fonction ?

Code:

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
<?php 
for ($id_ligne=1; $id_ligne <= 3; $id_ligne++) { ?>
	<div>
		<?php for ($num_champ=0; $num_champ <3 ; $num_champ++) { ?>
			<input type="text" name="champ_<?php echo $id_ligne;?>_<?php echo $num_champ;?>" placeholder="champ_<?php echo $id_ligne;?>_<?php echo $num_champ;?>">
		<?php } ?>
		<input id="ajout_<?php echo $id_ligne;?>" type="button" value="Ajouter ligne <?php echo $id_ligne;?>" onclick="add_input(this.id,'<?php echo $id_ligne;?>','<?php echo $num_champ;?>')">
	</div>
<?php } ?>
 
<script type="text/javascript">
function add_input(before_what,id_ligne,num_champ) { 
 
        alert('Ajouter avant: '+before_what+' \nLigne: '+id_ligne+' \nnum_champ: '+num_champ);
 
         // Creer le input
         var elm = document.createElement('input'); 
         elm.setAttribute('type', 'text'); 
 
         // Donner nom (+ le Placeholder pour voir le resultat)
         elm.setAttribute('name', 'champs_'+id_ligne+'_'+num_champ); 
         elm.setAttribute('placeholder', 'champs_'+id_ligne+'_'+num_champ); 
         
         // sets the objects for reference and parent 
         var reper = document.getElementById(before_what); 
         var parinte = reper.parentNode; 
          // Adds elm 
         parinte.insertBefore(elm, reper); 
}
</script>

Tu peux utiliser les attributs de données. Ici cela consiste à stocker l'indice que tu appelais num_champs comme une propriété de chaque input.

Code:

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
<!DOCTYPE html>
<html>
<head><script type="text/javascript">
function add_input(before_what,id_ligne) { 
  // sets the objects for reference and parent 
  var reper     = document.getElementById(before_what); 
  // index courant
  var num_champ = parseInt(reper.dataset.indexNumber);
  // mise à jour de l'index avec la nouvelle valeur
  reper.dataset.indexNumber = num_champ + 1;
  //alert('Ajouter avant: '+before_what+' \nLigne: '+id_ligne+' \nnum_champ: '+num_champ);
 
  // Creer le input
  var elm = document.createElement('input'); 
  elm.setAttribute('type', 'text'); 
 
  // Donner nom (+ le Placeholder pour voir le resultat)
  elm.setAttribute('name', 'champs_'+id_ligne+'_'+num_champ); 
  elm.setAttribute('placeholder', 'champs_'+id_ligne+'_'+num_champ); 
 
  var parinte = reper.parentNode; 
   // Adds elm 
  parinte.insertBefore(elm, reper); 
}
</script>
</head>
<body>
<?php 
for ($id_ligne=1; $id_ligne <= 3; $id_ligne++) { ?>
 <div>
  <?php for ($num_champ=0; $num_champ <3 ; $num_champ++) { ?>
   <input type="text" name="champ_<?php echo $id_ligne;?>_<?php echo $num_champ;?>" placeholder="champ_<?php echo $id_ligne;?>_<?php echo $num_champ;?>">
  <?php } ?>
  <input id="ajout_<?php echo $id_ligne;?>" data-index-number="<?php echo $num_champ;?>" type="button" value="Ajouter ligne <?php echo $id_ligne;?>" onclick="add_input(this.id,'<?php echo $id_ligne;?>')">
 </div>
<?php } ?>
 
</body>
</html>

Bonjour,

Code:

1
2
3
4
5
6
7
8
<?php for ($id_ligne=1; $id_ligne <= 3; $id_ligne++) { ?>
	<div>
		<?php for ($num_champ=0; $num_champ <3 ; $num_champ++) { ?>
			<input type="text" name="champ[<?php echo $id_ligne;?>][<?php echo $num_champ;?>]" placeholder="champ <?php echo $id_ligne .'-'. $num_champ;?>" />
		<?php } ?>
		<input type="button" value="Ajouter ligne <?php echo $id_ligne;?>" class="ajout" id="ajout_<?php echo $id_ligne;?>" data-lgn="<?php echo $id_ligne;?>" data-num="<?php echo $num_champ;?>" />
	</div>
<?php } ?>

Code:

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
function add_input( before_id, id_ligne, num_champ ) 
{
//	console.log('Ajouter avant: '+before_id+' \nLigne: '+id_ligne+' \nnum_champ: '+num_champ);
 
	// Créer un élément input
	var elm = document.createElement('input'); 
	elm.setAttribute('type', 'text'); 
	// Donner nom (+ le Placeholder pour voir le resultat)
	elm.setAttribute('name', 'champs['+id_ligne+']['+num_champ+']'); 
	elm.setAttribute('placeholder', 'champs '+id_ligne+'-'+num_champ); 
 
	// sets the objects for reference and parent 
	var input_ajout = document.getElementById(before_id); 
	var input_parent = input_ajout.parentNode; 
	// Adds elm Before
	input_parent.insertBefore(elm, input_ajout); 
 
	// on incrémente le num_champ
	document.getElementById(before_id).dataset.num = num_champ + 1;
}
// --------------
var input_ajouts = document.querySelectorAll('input.ajout');
input_ajouts.forEach( function( input_ajout )
{
	input_ajout.addEventListener( 'click', function()
	{
		add_input( this.id, Number(this.dataset.lgn), Number(this.dataset.num );
	});
});

Bonjour,
merci des réponses, j'ai testé les deux.

La solution de badaze, est bien car elle renvoie un array, et ca peut être utile.
Par contre
Code:

1 2 3 4 5 6 7 8 var input_ajouts = document.querySelectorAll('input.ajout'); input_ajouts.forEach( function( input_ajout ) { input_ajout.addEventListener( 'click', function() { add_input( this.id, Number(this.dataset.lgn), Number(this.dataset.num ); }); });
j'ai pas vu que ca affectais la fonction onclick aux boutons. Alors je lai mis en dur à chaque bouton.

Celle de jreaux62, convient car sur un
Code:

1 2 3 4 5 6 7 <?php if (isset($_POST['submit'])) { foreach ($_POST as $key => $value) { echo $key.' => '.$value.'<br>'; } } ?>
on recoit tous les post distinctement.

Bravo les gars, respect.

Ps: on laisse un peu ouvert le post, pour d'autres réactions,
je le mettrais résolu, un peu plus tard (si ca dérange pas).

Bonjour,

On peut effectivement aller plus loin :

Code:

1
2
3
4
5
6
7
8
9
<?php for ($champ_ligne=1; $champ_ligne <= 3; $champ_ligne++) { ?>
	<div>
		<?php for ($champ_num=0; $champ_num <3 ; $champ_num++) { ?>
			<input type="text" name="champ[<?php echo $champ_ligne;?>][<?php echo $champ_num;?>]" placeholder="champ <?php echo $champ_ligne .'-'. $champ_num;?>" />
		<?php } ?>
		<input type="button" class="input_add" id="input_add_<?php echo $champ_ligne;?>" data-name="champ" data-lgn="<?php echo $champ_ligne;?>" data-num="<?php echo $champ_num;//suivant?>" title="Ajouter ligne <?php echo $champ_ligne;?>, champ <?php echo $champ_num;//suivant?>" value="+" />
		<input type="button" class="input_del" id="input_del_<?php echo $champ_ligne;?>" data-name="champ" data-lgn="<?php echo $champ_ligne;?>" data-num="<?php echo $champ_num-1;//précédent ?>" title="Supprimer ligne <?php echo $champ_ligne;?>, champ <?php echo $champ_num-1;//précédent ?>" value="-" />
	</div>
<?php } ?>

Code:

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
69
70
71
// --------------
// AJOUTER un INPUT
function add_input( champ_name, champ_ligne, champ_num ) 
{
	if( champ_num < 10 ) // on LIMITE le nombre MAXI
	{
		// Créer un élément input
		var elm = document.createElement('input'); 
		elm.setAttribute('type', 'text'); 
		// Donner nom (+ le Placeholder pour voir le resultat)
		elm.setAttribute('name', champ_name+'['+champ_ligne+']['+champ_num+']'); 
		elm.setAttribute('placeholder', champ_name+' '+champ_ligne+'-'+champ_num); 
		// sets the objects for reference and parent 
		var input_add = document.getElementById('input_add_'+champ_ligne); 
		var input_parent = input_add.parentNode; 
		// Adds elm Before
		input_parent.insertBefore(elm, input_add); 
 
		// on INcrémente le champ_num
		document.getElementById('input_add_'+champ_ligne).dataset.num = champ_num + 1;
		document.getElementById('input_del_'+champ_ligne).dataset.num = champ_num;
		document.getElementById('input_add_'+champ_ligne).style.display = '';
		document.getElementById('input_del_'+champ_ligne).style.display = '';
	} else {
		document.getElementById('input_add_'+champ_ligne).style.display = 'none';
	}
}
// --------------
var input_adds = document.querySelectorAll('input.input_add');
input_adds.forEach( function( input_add ){
	input_add.addEventListener( 'click', function(){
		var champ_name = this.dataset.name;
		var champ_ligne = Number(this.dataset.lgn);
		var champ_num = Number(this.dataset.num);
		add_input( champ_name, champ_ligne, champ_num );
	});
});
 
// --------------
// SUPPRIMER un INPUT
function input_del_input( champ_name, champ_ligne, champ_num ) 
{
	console.log('Supprime : '+champ_name+' \nLigne: '+champ_ligne+' \nnum_champ: '+champ_num);
	if( champ_num > 0 ) // SAUF le 1er
	{
		// Supprime un élément input
		var element = document.querySelector( 'input[name="'+champ_name+'['+champ_ligne+']['+champ_num+']"]' );
		element.remove();
 
		// on DEcrémente le champ_num
		document.getElementById('input_add_'+champ_ligne).dataset.num = champ_num;
		document.getElementById('input_del_'+champ_ligne).dataset.num = champ_num - 1;
		document.getElementById('input_add_'+champ_ligne).style.display = '';
		document.getElementById('input_del_'+champ_ligne).style.display = '';
	}
	if( champ_num == 1 ) // SAUF le 1er
	{
		document.getElementById('input_del_'+champ_ligne).style.display = 'none';
	}
}
// --------------
var input_dels = document.querySelectorAll('input.input_del');
input_dels.forEach( function( input_del ){
	input_del.addEventListener( 'click', function(){
		var champ_name = this.dataset.name;
		var champ_ligne = Number(this.dataset.lgn);
		var champ_num = Number(this.dataset.num);
		input_del_input( champ_name, champ_ligne, champ_num );
	});
});
// --------------

17/09/2018, 16h01
feelwatt

Waouh, en effet ca c'est plus poussé !
Bien joué.

Je note résolu, le sujet pour laisser de la place aux autres post.