Ajout de lignes et envoi des données

**slefevre77** · 14/01/2022, 11h25

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

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

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.

**domi65** · 14/01/2022, 19h39

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

**slefevre77** · 15/01/2022, 09h07

Bonjour,

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

!

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

**NoSmoking** · 15/01/2022, 11h27

Bonjour,
je note un manque de rigueur dans ton code ligne 24 et 25

Code php :

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

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>

**slefevre77** · 15/01/2022, 11h49

Désolé pour ces fautes d’inattention !

Bon bah tout fonctionne bien !

Mille fois merci !!!!

Ajout de lignes et envoi des données

JavaScript

Vue hybride

Discussions similaires

Partager

Partager