Modifier DOM et inclure du php

Version imprimable

Bonjour tout le forum, j'ai besoin de votre aide.

Voici mon formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<div id="pieces">
			<div id="piece1">
				Pièce 1 <?php include("/var/www/compte_rendu/liste_piece.php");?>
				Prix <input type="number" name="prix1" id="prix1" />
				Quantité <input type="number" name="quantite1" id="quantite1" />
			</div>
		</div>
		<div id="ajouterPiece">
			<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(1)" />
		</div>
		<script type="text/javascript" src="/test.js"></script>
	</body>
</html>

Je souhaite que l'utilisateur puisse ajouter des pièces avant l'envoi du formulaire, voici le JavaScript dans un fichier à part src="/test.js" :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function ajouterPiece(numPiece) {
	// console.log("Passage fonction ajouterPiece");
 
	let nouvelleDiv = document.createElement("div");
 
	let numPieceSuivante = numPiece + 1;
 
	document
		.getElementById("pieces")
		.appendChild(nouvelleDiv)
		.setAttribute("id", "piece" + numPieceSuivante);
 
	const nouvellePiece = document.getElementById("piece" + numPieceSuivante);
	nouvellePiece.innerHTML =
	`Pièce ` + numPieceSuivante +`
	<?php include("/var/www/compte_rendu/liste_piece.php");?>
	Prix
	<input type="number" name="prix` + numPieceSuivante + `" id="prix` + numPieceSuivante + `" />
	Quantité
	<input type="number" name="quantite` + numPieceSuivante + `" id="quantite` + numPieceSuivante + `" />`
 
	document.getElementById('ajouterPiece').innerHTML = '<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(' + numPieceSuivante + ')" />';
}

Mon problème, c'est le code php ligne 17, il est bien inclus, mais comme commentaire.

J'arrive à obtenir le bon fonctionnement en incluant directement le JavaScript dans la page html du formulaire dans une balise <script>:

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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<div id="pieces">
			<div id="piece1">
				Pièce 1 <span id="listePiece1"><?php include("/var/www/compte_rendu/liste_piece.php");?></span>
				Prix <input type="number" name="prix1" id="prix1" />
				Quantité <input type="number" name="quantite1" id="quantite1" />
			</div>
		</div>
		<div id="ajouterPiece">
			<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(1)" />
		</div>
		<script>
                        function ajouterPiece(numPiece) {
                                // console.log("Passage fonction ajouterPiece");
 
                                let nouvelleDiv = document.createElement("div");
 
                                let numPieceSuivante = numPiece + 1;
 
                                document
                                        .getElementById("pieces")
                                        .appendChild(nouvelleDiv)
                                        .setAttribute("id", "piece" + numPieceSuivante);
 
                                const nouvellePiece = document.getElementById("piece" + numPieceSuivante);
                                nouvellePiece.innerHTML =
                                `Pièce ` + numPieceSuivante +`
                                <span id="listePiece` + numPieceSuivante +`"></span>
                                Prix
                                <input type="number" name="prix` + numPieceSuivante + `" id="prix` + numPieceSuivante + `" />
                                Quantité
                                <input type="number" name="quantite` + numPieceSuivante + `" id="quantite` + numPieceSuivante + `" />`
 
                                let codePhp = `<?php include("/var/www/compte_rendu/liste_piece.php");?>`;
                                document
                                        .getElementById("listePiece" + numPieceSuivante)
                                        .innerHTML = codePhp;
 
                                document.getElementById('ajouterPiece').innerHTML = '<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(' + numPieceSuivante + ')" />';
                        }
                </script>
	</body>
</html>

Comment obtenir le même fonctionnement avec un fichier à part ?

Merci pour votre aide.

04/11/2022, 14h24
mathieu

j'ai l'impression que vous vous emmêler les pinceaux dans l'ordre d'exécution de php et javascript. regarde le schéma de cette page qui donne plus de détails à ce sujet :
https://dmouronval.developpez.com/tu...te-ajax/#Lno-I
04/11/2022, 14h24
SpaceFrog

https://www.plupload.com/

Bonjour, merci pour vos réponses.

J'ai coupé le code en deux. Une partie dans un fichier dédié qui modifie le html, une partie dans le fichier html, dans une balise <script> qui inclut le code 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
<!DOCTYPE html>
<html lang="fr">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
	</head>
	<body>
		<div id="pieces">
			<div id="piece1">
				Pièce 1 <span id="listePiece1"><?php include("/var/www/compte_rendu/liste_piece.php");?></span>
				Prix <input type="number" name="prix1" id="prix1" />
				Quantité <input type="number" name="quantite1" id="quantite1" />
			</div>
		</div>
		<div id="ajouterPiece">
			<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(1); includeListePieces(1)" />
		</div>
		<script type="text/javascript" src="/test2.js"></script>
		<script>
                        function includeListePieces(numPiece){
 
                                let numPieceSuivante = numPiece + 1;
 
                                let codePhp = `<?php include("/var/www/compte_rendu/liste_piece.php");?>`;
                                document
                                        .getElementById("listePiece" + numPieceSuivante)
                                        .innerHTML = codePhp;
                        }
                </script>
	</body>
</html>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function ajouterPiece(numPiece) {
	// console.log("Passage fonction ajouterPiece");
 
	let nouvelleDiv = document.createElement("div");
 
	let numPieceSuivante = numPiece + 1;
 
	document
		.getElementById("pieces")
		.appendChild(nouvelleDiv)
		.setAttribute("id", "piece" + numPieceSuivante);
 
	const nouvellePiece = document.getElementById("piece" + numPieceSuivante);
	nouvellePiece.innerHTML =
	`Pièce ` + numPieceSuivante +`
	<span id="listePiece` + numPieceSuivante +`"></span>
	Prix
	<input type="number" name="prix` + numPieceSuivante + `" id="prix` + numPieceSuivante + `" />
	Quantité
	<input type="number" name="quantite` + numPieceSuivante + `" id="quantite` + numPieceSuivante + `" />`
 
	document.getElementById('ajouterPiece').innerHTML = '<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(' + numPieceSuivante + '); listePiece(' + numPieceSuivante + ')" />';
}