Modifier DOM et inclure du php

**kewan** · 04/11/2022, 13h30

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

Voici mon formulaire :

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

**mathieu** · 04/11/2022, 14h24

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

**SpaceFrog** · 04/11/2022, 14h24

https://www.plupload.com/

**kewan** · 04/11/2022, 15h26

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 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
<!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 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
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 + ')" />';
}

Modifier DOM et inclure du php

JavaScript

Discussions similaires

Partager

Partager