Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1519 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Modifier DOM et inclure du php

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Modifier DOM et inclure du php

n°2431120
kewan
Posté le 04-11-2022 à 13:36:13  profilanswer
 

Bonjour tout le forum, j'ai besoin de votre aide.
 
Voici mon formulaire :

Code :
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  <title>Document</title>
  8. </head>
  9. <body>
  10.  <div id="pieces">
  11.   <div id="piece1">
  12.    Pièce 1 <?php include("/var/www/compte_rendu/liste_piece.php" );?>
  13.    Prix <input type="number" name="prix1" id="prix1" />
  14.    Quantité <input type="number" name="quantite1" id="quantite1" />
  15.   </div>
  16.  </div>
  17.  <div id="ajouterPiece">
  18.   <input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(1)" />
  19.  </div>
  20.  <script type="text/javascript" src="/test.js"></script>
  21. </body>
  22. </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. function ajouterPiece(numPiece) {
  2. // console.log("Passage fonction ajouterPiece" );
  4. let nouvelleDiv = document.createElement("div" );
  6. let numPieceSuivante = numPiece + 1;
  8. document
  9.  .getElementById("pieces" )
  10.  .appendChild(nouvelleDiv)
  11.  .setAttribute("id", "piece" + numPieceSuivante);
  13. const nouvellePiece = document.getElementById("piece" + numPieceSuivante);
  14. nouvellePiece.innerHTML =
  15. `Pièce ` + numPieceSuivante +`
  16. <?php include("/var/www/compte_rendu/liste_piece.php" );?>
  17. Prix
  18. <input type="number" name="prix` + numPieceSuivante + `" id="prix` + numPieceSuivante + `" />
  19. Quantité
  20. <input type="number" name="quantite` + numPieceSuivante + `" id="quantite` + numPieceSuivante + `" />`
  22. document.getElementById('ajouterPiece').innerHTML = '<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(' + numPieceSuivante + ')" />';
  23. }


 
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 :
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3. <head>
  4.  <meta charset="UTF-8">
  5.  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.  <title>Document</title>
  8. </head>
  9. <body>
  10.  <div id="pieces">
  11.   <div id="piece1">
  12.    Pièce 1 <span id="listePiece1"><?php include("/var/www/compte_rendu/liste_piece.php" );?></span>
  13.    Prix <input type="number" name="prix1" id="prix1" />
  14.    Quantité <input type="number" name="quantite1" id="quantite1" />
  15.   </div>
  16.  </div>
  17.  <div id="ajouterPiece">
  18.   <input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(1)" />
  19.  </div>
  20.  <script>
  21.   function ajouterPiece(numPiece) {
  22.    // console.log("Passage fonction ajouterPiece" );
  24.    let nouvelleDiv = document.createElement("div" );
  26.    let numPieceSuivante = numPiece + 1;
  28.    document
  29.     .getElementById("pieces" )
  30.     .appendChild(nouvelleDiv)
  31.     .setAttribute("id", "piece" + numPieceSuivante);
  33.    const nouvellePiece = document.getElementById("piece" + numPieceSuivante);
  34.    nouvellePiece.innerHTML =
  35.    `Pièce ` + numPieceSuivante +`
  36.    <span id="listePiece` + numPieceSuivante +`"></span>
  37.    Prix
  38.    <input type="number" name="prix` + numPieceSuivante + `" id="prix` + numPieceSuivante + `" />
  39.    Quantité
  40.    <input type="number" name="quantite` + numPieceSuivante + `" id="quantite` + numPieceSuivante + `" />`
  42.    let codePhp = `<?php include("/var/www/compte_rendu/liste_piece.php" );?>`;
  43.    document
  44.     .getElementById("listePiece" + numPieceSuivante)
  45.     .innerHTML = codePhp;
  47.    document.getElementById('ajouterPiece').innerHTML = '<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(' + numPieceSuivante + ')" />';
  48.   }
  49.  </script>
  50. </body>
  51. </html>


 
Comment obtenir le même fonctionnement avec un fichier à part ?
 
Merci pour votre aide.

mood
Publicité
Posté le 04-11-2022 à 13:36:13  profilanswer
 

n°2431163
rat de com​bat
attention rongeur méchant!
Posté le 04-11-2022 à 18:28:44  profilanswer
 

Je suis (heureusement :o ) 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.

n°2431185
mechkurt
Posté le 04-11-2022 à 23:35:23  profilanswer
 

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 :
  1. <script type="text/javascript" src="/test.php"></script>


Et dans test.php

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


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... :o


---------------
D3
n°2431191
kewan
Posté le 05-11-2022 à 08:34:30  profilanswer
 

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

Code :
  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.         <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.         <title>Document</title>
  8.     </head>
  9.     <body>
  10.         <form method="post">
  11.             <div id="pieces">
  12.                 <div id="piece1">
  13.                     Pièce 1 <span id="listePiece1"><?php include("/var/www/compte_rendu/liste_piece.php" );?></span>
  14.                     Prix <input type="number" name="prix1" id="prix1" />
  15.                     Quantité <input type="number" name="quantite1" id="quantite1" />
  16.                 </div>
  17.             </div>
  18.             <div id="ajouterPiece">
  19.                 <input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(1)" />
  20.             </div>
  21.             <input type="submit" name="subForm" id="subForm" value="Envoyer le formulaire">
  22.         </form>
  23.         <script>
  24.             function ajouterPiece(numPiece) {
  25.                 // console.log("Passage fonction ajouterPiece" );
  27.                 let nouvelleDiv = document.createElement("div" );
  29.                 let numPieceSuivante = numPiece + 1;
  31.                 document
  32.                     .getElementById("pieces" )
  33.                     .appendChild(nouvelleDiv)
  34.                     .setAttribute("id", "piece" + numPieceSuivante);
  36.                 const nouvellePiece = document.getElementById("piece" + numPieceSuivante);
  37.                 nouvellePiece.innerHTML =
  38.                 `Pièce ` + numPieceSuivante +`
  39.                 <span id="listePiece` + numPieceSuivante +`"></span>
  40.                 Prix
  41.                 <input type="number" name="prix` + numPieceSuivante + `" id="prix` + numPieceSuivante + `" />
  42.                 Quantité
  43.                 <input type="number" name="quantite` + numPieceSuivante + `" id="quantite` + numPieceSuivante + `" />`
  45.                 let codePhp = `<?php include("/var/www/compte_rendu/liste_piece.php" );?>`;
  46.                 document
  47.                     .getElementById("listePiece" + numPieceSuivante)
  48.                     .innerHTML = codePhp;
  50.                 document.getElementById('ajouterPiece').innerHTML = '<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(' + numPieceSuivante + ')" />';
  51.             }
  52.         </script>
  53.     </body>
  54. </html>


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

Code :
  1. <select name="consommable" id="consommable">
  2. <option value=""></option>
  3. <?php
  4.  $chConsommable = $bdd->query('SELECT id, nomConsommable FROM consommable ORDER BY nomConsommable ASC');
  5.  while ($consommable = $chConsommable->fetch()){
  6.   ?>
  7.   <option value="<?php echo $consommable['nomConsommable']; ?>"><?php echo $consommable['nomConsommable']; ?></option>
  8.   <?php
  9.  }
  10. ?>
  11. </select>


 

n°2431193
mechkurt
Posté le 05-11-2022 à 09:07:59  profilanswer
 

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 :
  1. <?php
  2. $chConsommable = $bdd->query('SELECT id, nomConsommable FROM consommable ORDER BY nomConsommable ASC');
  3. $liste_option = '';
  4. while ($consommable = $chConsommable->fetch()){
  5.   $liste_option .= '<option value="'.$consommable['nomConsommable'].'">'.$consommable['nomConsommable'].'</option>';
  6. }
  7. ?>
  8. <!DOCTYPE html>
  9.     <html lang="fr">
  10.         <head>
  11.             <meta charset="UTF-8">
  12.             <meta http-equiv="X-UA-Compatible" content="IE=edge">
  13.             <meta name="viewport" content="width=device-width, initial-scale=1.0">
  14.             <title>Document</title>
  15.         </head>
  16.         <body>
  17.             <form method="post">
  18.                 <div id="pieces">
  19.                     <div id="piece1">
  20.                         Pièce 1 <span id="listePiece1"><select name="consommable1" id="consommable1"><?php echo $liste_option;?></select></span>
  21.                         Prix <input type="number" name="prix1" id="prix1" />
  22.                         Quantité <input type="number" name="quantite1" id="quantite1" />
  23.                     </div>
  24.                 </div>
  25.                 <div id="ajouterPiece">
  26.                     <input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(1)" />
  27.                 </div>
  28.                 <input type="submit" name="subForm" id="subForm" value="Envoyer le formulaire">
  29.             </form>
  30.             <script>
  31.                 function ajouterPiece(numPiece) {
  32.                     // console.log("Passage fonction ajouterPiece" );
  33.                     let nouvelleDiv = document.createElement("div" );
  34.                     let numPieceSuivante = numPiece + 1;
  35.                     document
  36.                         .getElementById("pieces" )
  37.                         .appendChild(nouvelleDiv)
  38.                         .setAttribute("id", "piece" + numPieceSuivante);
  39.                     const nouvellePiece = document.getElementById("piece" + numPieceSuivante);
  40.                     nouvellePiece.innerHTML =
  41.                     `Pièce ` + numPieceSuivante +`
  42.                     <select name="consommable` + numPieceSuivante + `" id="consommable` + numPieceSuivante + `"><?php echo $liste_option;?></select>
  43.                     Prix
  44.                     <input type="number" name="prix` + numPieceSuivante + `" id="prix` + numPieceSuivante + `" />
  45.                     Quantité
  46.                     <input type="number" name="quantite` + numPieceSuivante + `" id="quantite` + numPieceSuivante + `" />`
  47.                     document.getElementById('ajouterPiece').innerHTML = '<input type="button" name="buttonAjouterPiece" id="buttonAjouterPiece" value="Rajouter une pièce" onClick="ajouterPiece(' + numPieceSuivante + ')" />';
  48.                 }
  49.             </script>
  50.         </body>
  51.     </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
n°2431263
rufo
Pas me confondre avec Lycos!
Posté le 05-11-2022 à 22:01:38  profilanswer
 

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
n°2431264
mechkurt
Posté le 05-11-2022 à 22:31:08  profilanswer
 

Avant de courir il faut savoir marcher...


---------------
D3
n°2431275
rufo
Pas me confondre avec Lycos!
Posté le 06-11-2022 à 08:14:53  profilanswer
 

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
n°2431276
mechkurt
Posté le 06-11-2022 à 09:25:30  profilanswer
 

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é. :o


---------------
D3
n°2431296
MaybeEijOr​Not
but someone at least
Posté le 06-11-2022 à 11:35:19  profilanswer
 

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


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

Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Modifier DOM et inclure du php

 

Sujets relatifs
inclure un modal dans un script JSModifier du code source VBA à la volée
Inclure une page suivant un formulaireRécupérer et modifier les données
Inclure des images et du son dans un runnable .jar (amateur inside)Modifier le format de la date des dossiers
[résolu] liste A dans B, modifier A modifie B ?UPDATE sql avec calcul de la valeur à modifier
Comment Modifier le contenu d'un fichier txt chaque jour par csvmodifier menus contextuels
Plus de sujets relatifs à : Modifier DOM et inclure du php

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.162 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR