Inclure une page suivant un formulaire

Inclure une page suivant un formulaire - Javascript/Node.js - Programmation

Marsh Posté le 24-10-2021 à 20:19:53    

Bonjour tout le forum, :coucou:
 
j'ai besoin de votre aide.
 
Je voudrais permettre à l'utilisateur de choisir entre deux tableaux.
 
Je voudrais créer un formulaire avec deux boutons d'option (type="radio" ) et suivant le bouton sélectionné le tableau correspondant apparait dans une div.
 
Comment obtenir ce résultat ? Fonction avec innerHTML ? fonction qui inclut une page ?
 
Voilà un rapide exemple de ce que je voudrais obtenir.
En réalité mon tableau est beaucoup plus grand, il fait une centaine de lignes.
Le css sera dans un fichier css
Les fonctions seront dans un fichier js dédié.

Code :
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8" />
  5.     <title>test2</title>
  6.     <style type="text/css">
  7.       table {
  8.         border-collapse: collapse;
  9.         border: 3px solid rgb(0, 0, 0);
  10.         width: 50%;
  11.         background-color: rgb(194, 194, 194);
  12.         text-align: center;
  13.         color: rgb(0, 0, 0);
  14.         margin: 8px;
  15.       }
  16.       table th {
  17.         border: 3px solid rgb(0, 0, 0);
  18.       }
  19.       table tr {
  20.         border: 3px solid rgb(0, 0, 0);
  21.       }
  22.       table td {
  23.         border: 3px solid rgb(0, 0, 0);
  24.       }
  25.       .grille {
  26.         display: inline-block;
  27.         vertical-align: top;
  28.         border: 3px solid blue;
  29.       }
  30.       .formulaire {
  31.         display: inline-block;
  32.         vertical-align: top;
  33.         border: 3px solid blue;
  34.       }
  35.     </style>
  36.     <script type="text/javascript">
  37.       function typeGrille1() {
  38.         x = document.getElementsByClassName("grille" );
  39.         x[0].innerHTML =
  40.           "<table class='table'><thead><tr><th>Grille1</th><th>Grille1</th><th>Grille1</th></tr></thead><tbody><tr><td>1</td><td>1</td><td>1</td></tr></tbody></table>";
  41.       }
  42.       function typeGrille2() {
  43.         x = document.getElementsByClassName("grille" );
  44.         x[0].innerHTML =
  45.           "<table class='table'><thead><tr><th>Grille2</th><th>Grille2</th><th>Grille2</th></tr></thead><tbody><tr><td>2</td><td>2</td><td>2</td></tr></tbody></table>";
  46.       }
  47.     </script>
  48.   </head>
  49.   <body class="s2">
  50.     <div class="formulaire">
  51.       <input
  52.         type="radio"
  53.         name="typeGrille"
  54.         value="1"
  55.         id="1"
  56.         onclick="typeGrille1()"
  57.       /><label for="1">grille1</label><br />
  58.       <input
  59.         type="radio"
  60.         name="typeGrille"
  61.         value="2"
  62.         id="2"
  63.         onclick="typeGrille2()"
  64.       /><label for="2">grille2</label>
  65.     </div>
  66.     <div class="grille"></div>
  67.   </body>
  68. </html>


 
Merci pour votre aide.

Reply

Marsh Posté le 24-10-2021 à 20:19:53   

Reply

Marsh Posté le 24-10-2021 à 20:44:00    

Bonjour,

 

Si les données ne sont pas trop difficiles à charger et pas sensibles, tu crées deux tableaux puis affiche/cache via CSS en fonction du choix du formulaire.
Sinon tu fais une requête AJAX pour aller chercher les bonnes données et crées le tableau en JS.


Message édité par MaybeEijOrNot le 24-10-2021 à 20:44:12

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

Marsh Posté le 27-10-2021 à 18:29:02    

:hello: merci pour ta réponse.
 
Voilà ce que j'ai fait.
 
1 formulaire avec 2 boutons, suivant le bouton sur lequel on clic, une session est créée, et suivant la session créée la bonne grille s'affiche.
 

Code :
  1. <?php
  2.     if(!empty($_POST['subGrille'])){
  3.         if($_POST['subGrille'] == "sco" ){
  4.             unset($_SESSION['avecCritereOperationnel']);
  5.             $_SESSION['sansCritereOperationnel'] = 1;
  6.         }elseif($_POST['subGrille'] == "aco" ){
  7.             unset($_SESSION['sansCritereOperationnel']);
  8.             $_SESSION['avecCritereOperationnel'] = 1;
  9.         }
  10.     }
  11. ?>
  12. <form method="post" id="formTypeGrille" class="p1 p2">
  13.     <p>Configuration de ma grille d’évaluation</p>
  14.     <table class="tbConfigGrille">
  15.         <tbody>
  16.             <tr>
  17.                 <th colspan="4" class="pCentre">Type de grille</th>
  18.             </tr>
  19.             <tr>
  20.                 <td colspan="3">Sans critère opérationnel</td>
  21.                 <td colspan="3"><input type="radio" name="subGrille" onclick="formTypeGrille.submit()" value="sco" id="sco"/><label for="sco"></td>
  22.             </tr>
  23.             <tr>
  24.                 <td colspan="3">Avec critères opérationnels</td>
  25.                 <td colspan="3"><input type="radio" name="subGrille" onclick="formTypeGrille.submit()" value="aco" id="aco"/><label for="aco"></td>
  26.             </tr>
  27.         </tbody>
  28.     </table>
  29. </form>
  30. <?php
  31.     if(!empty($_SESSION['avecCritereOperationnel'])){
  32.         include("/var/www/chefDOeuvre/prof/_grilleConfigAco.php" );
  33.     }elseif(!empty($_SESSION['sansCritereOperationnel'])){
  34.         include("/var/www/chefDOeuvre/prof/_grilleConfigSco.php" );
  35.     }
  36. ?>

Reply

Marsh Posté le 29-10-2021 à 11:59:57    

Pour le include, je ferais plutôt un chemin relative plutôt qu'absolu. Le jour où tu change de serveur et que le File system est organisé différemment, tu vas devoir reprendre ton code :/


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

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed