Nommer champs input après insertBefore

**feelwatt** · 13/09/2018, 17h00

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 HTML :

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
<?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>

**badaze** · 13/09/2018, 20h39

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 HTML :

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
<!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>

Invité · 14/09/2018, 01h39

Bonjour,

Code html :

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

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 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
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 );
	});
});

**feelwatt** · 14/09/2018, 11h33

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 :

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

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 :

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

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).

Invité · 14/09/2018, 12h48

Bonjour,

On peut effectivement aller plus loin :

Code php :

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

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 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
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 );
	});
});
// --------------

**feelwatt** · 17/09/2018, 16h01

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

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

Nommer champs input après insertBefore

JavaScript

Discussions similaires

Partager

Partager