Ajout de lignes et envoi des données

Version imprimable

Bonjour,

Après lecture de cette discussion: https://www.developpez.net/forums/d3...gne-d-tableau/, le code m'intéressant, je voudrais savoir comment faire pour insérer les numéros d'ID pour un envoi du formulaire avec toutes les lignes et pas seulement la dernière :

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
<html>
	<head>
		<script type="text/javascript">
                        function ajoutLigne() {
                                var Cell;
                                var nom = document.getElementById("nom").value;
                                var prenom = document.getElementById("prenom").value;
                                var tableau = document.getElementById("tableau");
                                var ligne = tableau.insertRow(-1); 
   
                                Cell = ligne.insertCell(0);
                                Cell.innerHTML = ligne.rowIndex;
                                Cell = ligne.insertCell(1);
                                Cell.innerHTML = nom;
                                Cell = ligne.insertCell(2); 
                                Cell.innerHTML = prenom;
                                Cell = ligne.insertCell(3);
 
                                var bouton = document.createElement("input");
                                bouton.type = "button";
                                bouton.value = "Supprimer";
                                bouton.onclick = function(){suppression(ligne)};
                                Cell.appendChild(bouton);
    
                                //document.getElementById("nom").value = "";
                                //document.getElementById("prenom").value = "";
                        }
                        
                        //for (n = 0; n < Cell.length; n++) {
                        //      (ligne.insertCell(n)).appendChild(champ(Cell[n]));
                        //}
 
                        function suppression(ligne) {
                                document.getElementById('tableau').deleteRow(ligne.rowIndex);
 
                                //Recomptage des lignes...
                                var tableau = document.getElementById('tableau');
                                var trs = tableau.rows;
                                var n = trs.length;
                                var i;
 
                                for (i = 1; i < n; i++) {
                                        trs[i].cells[0].innerHTML = trs[i].rowIndex;
                                }
                        }
                </script>
	</head>
	<body>
		<div align="center">
			<FORM id="formulaire" method="post" action="result.php">
				Nom <input type="text" id="nom" name="nom[]"><br>
				Prenom <input type="text" id="prenom" name="prenom[]"><br>
				<table name="tableau" id="tableau" border="1">
					<tr>
						<td>Numéro de ligne</td>
						<td>Nom</td>
						<td>Prenom</td>
						<td>Supprimer la ligne</td>
					</tr> 
				</table>
				<br>
				<input type="button" value="Ajouter une ligne" onclick="ajoutLigne()" >
				<br><br>
				<input name="submit" type="submit" value="Envoyer" />
			</FORM>
		</div>
	</body>
</html>

Et pour la récupération des infos :

result.php

Code:

1
2
3
4
5
6
7
8
9
<html>
	<head>
	</head>
	<body>
		<?php
                        print_r ($_POST);
                ?>
	</body>
</html>

Ce qui ne donne que :

Array ( [nom] => Array ( [0] => Nom3 ) [prenom] => Array ( [0] => Prénom3 ) [submit] => Envoyer ).

Et pas :

Array ( [nom] => Array ( [0] => Nom1, [1] => Nom2, [2] => Nom3 ) [prenom] => Array ( [0] => Prénom1, [1] => Prénom2, [2] => Prénom3 ) [submit] => Envoyer ).

(quelque chose comme ça :-) )

Quelqu'un saurait ajouter la notion d'ID ([0], [1], [2], ...) lors de l'ajout de lignes ?

Par avance merci.

Bonjour. Je me suis permis de refaire cette page à ma façon. Un de ses avantages, outre sa simplicité, est de ne pas avoir besoin de la souris pour ajouter des personnes. La touche tab suffit.
Je n'ai pas mis l'identifiant, à mon avis inutile : c'est en traitant le tableau, dans le script PHP que tu incrémenteras celui-ci (ou mieux, ce sera fait par la bbd si le champ est en auto-incrément, ce qui évitera les doublons)
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <form action="result.php" method=post name=formu> <div id=personnes> </div> <input type=button onclick="ajout()" value="Ajouter une personne"> <p style="text-align:center"><input type=submit value=Enregistrer></p> </form> <script> let liste = document.getElementById('personnes') function ajout() { let code = '<div>Nom : <input name=nom[] > Prénom <input name=prenom[]> <input type=button onclick="supprime(this)" value=Supprimer></div>'; liste.insertAdjacentHTML('beforeEnd', code); liste.lastChild.querySelector('input').focus() } function supprime(moi) { liste.removeChild(moi.parentNode) } </script>

Bonjour,

Merci pour ta réponse et tes modifications qui simplifient le code :D !

Cela fonctionne super bien !

Par contre je me heurte toujours à une petite chose à laquelle personne ne me répond jamais.

Ce code va me permettre d'enregistrer en base de données les infos que je rentre dans les champs.
Mais comment faire pour ré afficher ces infos dans le même formulaire afin de les modifier ?

Je mets le code que j'ai fait :

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
 
<html>
	<head>
	</head>
	<body>
		<?php
                        $acteurs = "Jake_Gyllenhaal, Jon_Favreau, Samuel_L. Jackson, Tom_Holland, Zendaya_";
                        $exp_acteurs = explode(', ', $acteurs);
                        $nb_acteurs = count($exp_acteurs);
                ?>
		<div align="center">
			<form action="result_acteurs.php" method=post name=formu>
			<div id=acteurs>
				<?php
                                        $i = 0;
                                        $j = 1;
                                        while ($j <= $nb_acteurs) {
                                                $recup_prenom_nom = explode('_', $exp_acteurs[$i]);
                                                print "<div>";
                                                print "Prénom :";
                                                print "<input name=prenom[] value='$recup_prenom_nom[0]'>";
                                                print "Nom :";
                                                print "<input name=nom[] value='$recup_prenom_nom[1]'>";
                                                print "<input type='button' onclick='supprime(this)' value='Supprimer'";
                                                print "/<div>";
                                                $i++;
                                                $j++;
                                        }
                                ?>
			</div>
				<br>
				<input type=button onclick="ajout()" value="Ajouter un acteur">
				<p style="text-align:center"><input type=submit value=Enregistrer></p>
			</form>
			<script>
                                let liste = document.getElementById('acteurs')
                                function ajout() {
                                        let code = '<div>Prénom : <input name=prenom[] > Nom : <input name=nom[]> <input type=button onclick="supprime(this)" value=Supprimer></div>';
                                        liste.insertAdjacentHTML('beforeEnd', code);
                                        liste.lastChild.querySelector('input').focus()
                                }
                                function supprime(moi) {
                                        liste.removeChild(moi.parentNode)
                                }
                        </script>
		</div>
	</body>
</html>

Mon problème est que le seul bouton supprimer qui fonctionne est celui de la première ligne, et qu'il supprime toutes les lignes !
De plus, quand j'ajoute une nouvelle ligne, elle ne se positionne pas en dessous des autres, mais sous le bouton "Enregistrer".

Peux-tu m'aider à résoudre ceci ?

Par avance merci,

Sébastien

15/01/2022, 11h27
NoSmoking
Bonjour,
je note un manque de rigueur dans ton code ligne 24 et 25
Code:

1 2 print "<input type='button' onclick='supprime(this)' value='Supprimer'"; print "/<div>";
- ligne 24 : manque le > de fin de balise
- ligne 25 : / est en dehors de <div>
15/01/2022, 11h49
slefevre77

Désolé pour ces fautes d’inattention !

Bon bah tout fonctionne bien !

Mille fois merci !!!!