Modifier DOM et inclure du php

Marsh Posté le 04-11-2022 à 13:36:13

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

Voici mon formulaire :

Code :

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

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 16, 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 :

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

Reply

Marsh Posté le 04-11-2022 à 13:36:13

Reply

Marsh Posté le 04-11-2022 à 18:28:44

Je suis (heureusement ) loin du dév web, mais pour moi ton problème montre un soucis de compréhension du fonctionnement de tout le système serveur-navigateur.

En effet le PHP est exécuté côté serveur et le résultat (soit du code HTML dans la plupart des cas) est envoyé au navigateur (donc côté client), mais jamais le code PHP directement. Sauf que si tu rajoutes un fichier .js celui-ci est directement envoyé au navigateur, sans être traité par le serveur web, puisqu'il (ce fichier) n'est pas censé contenir du PHP.

Après pour savoir comment faire correctement je laisse ma place aux dévs web... Faudra probablement du JS qui va communiquer en AJAX ou je sais pas quoi avec le serveur pour récupérer des "bouts" de HTML/JS à insérer dans la page côté client.

Reply

Marsh Posté le 04-11-2022 à 23:35:23

Faudrait voir ce que fait le fichier /var/www/compte_rendu/liste_piece.php pour savoir si y'a besoin de php ou pas...

Si nécessaire on pourrait très bien appeler un fichier qui php qui renverrait du js "précompiler".

Dans le html :

Code :

<script type="text/javascript" src="/test.php"></script>

Et dans test.php

Code :

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

Dans ce cas l'include vas fonctionner puicque les balises php seront interprété.

Mais sans savoir ce qu'il y a comme logique dans l'include, ca ne sert pas à grand chose de spéculer...

---------------
D3

Reply

Marsh Posté le 05-11-2022 à 08:34:30

Bonjour, merci de vos réponses. Voilà où j'en suis actuellement :

Code :

<!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>
<form method="post">
<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>
<input type="submit" name="subForm" id="subForm" value="Envoyer le formulaire">
</form>
<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>

Et voilà mon fichier /var/www/compte_rendu/liste_piece.php

Code :

<select name="consommable" id="consommable">
<option value=""></option>
<?php
$chConsommable = $bdd->query('SELECT id, nomConsommable FROM consommable ORDER BY nomConsommable ASC');
while ($consommable = $chConsommable->fetch()){
?>
<option value="<?php echo $consommable['nomConsommable']; ?>"><?php echo $consommable['nomConsommable']; ?></option>
<?php
}
?>
</select>

Reply

Marsh Posté le 05-11-2022 à 09:07:59

Si j'étais toi je renommerais ton fichier html en php et je ferais la construction de ton select au début de celui-ci...

...et tu ferais mieux de ne faire que les options et de construire le select dans la js avec un name unique (sinon tu auras du mal après à récupérer la valeur envoyé par ton form).

Code :

<?php
$chConsommable = $bdd->query('SELECT id, nomConsommable FROM consommable ORDER BY nomConsommable ASC');
$liste_option = '';
while ($consommable = $chConsommable->fetch()){
$liste_option .= '<option value="'.$consommable['nomConsommable'].'">'.$consommable['nomConsommable'].'</option>';
}
?>
<!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>
<form method="post">
<div id="pieces">
<div id="piece1">
Pièce 1 <span id="listePiece1"><select name="consommable1" id="consommable1"><?php echo $liste_option;?></select></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>
<input type="submit" name="subForm" id="subForm" value="Envoyer le formulaire">
</form>
<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 +`
<select name="consommable` + numPieceSuivante + `" id="consommable` + numPieceSuivante + `"><?php echo $liste_option;?></select>
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 + ')" />';
}
</script>
</body>
</html>

J'ai l'impression que tu as encore des erreurs dans ton code Javascript, et sans coloration syntaxique y'a de grande chance qu'il y'ai des coquilles dans mon code aussi mais ça devrait te mettre sur la voie...

Message édité par mechkurt le 05-11-2022 à 09:12:24

---------------
D3

Reply

Marsh Posté le 05-11-2022 à 22:01:38

Ca serait quand même plus propre et plus flexible si son front (HTML+JS) faisait une requête ajax vers son script php pour récupérer la liste des produits (soit en JSON soit directement en html avec les <option> ).

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Reply

Marsh Posté le 05-11-2022 à 22:31:08

Avant de courir il faut savoir marcher...

---------------
D3

Reply

Marsh Posté le 06-11-2022 à 08:14:53

Certes mais, perso, je trouve plus sain d'apprendre dès le début les bonnes pratiques plutôt que de faire des trucs sales.

---------------
Astres, outil de help-desk GPL : http://sourceforge.net/projects/astres, ICARE, gestion de conf : http://sourceforge.net/projects/icare, Outil Planeta Calandreta : https://framalibre.org/content/planeta-calandreta

Reply

Marsh Posté le 06-11-2022 à 09:25:30

Faire propre c'est souvent plus compliquer à faire fonctionner (en tout cas quand on débutes, passer d'un fichier à l'autre, gérer les chemins, etc.) et passer du temps sans résultat ça peut être frustrant...

De plus dans ce cas précis, sa liste étant "statique" (pas de filtre de recherche modifiant celle-ci suivant un contexte par exemple), je ne vois pas vraiment l’intérêt de faire un appel séparé au serveur pour récupérer les options.
Dans son cas du fonctionnel tout simple me semble approprié, du php au début pour faire du dynamique dans des variables, et ensuite le template html avec les variables renseigné.

Alors ok, on peut aussi lui conseiller de revoir tout son projet et de faire du MVC mais ça me semble un peu prématuré.

---------------
D3

Reply

Marsh Posté le 06-11-2022 à 11:35:19

Comme le proverbe le dit si bien : il ne faut pas jeter le prématuré avec l'eau du bain.

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.

Reply

Modifier DOM et inclure du php

Sujets relatifs:

Leave a Replay