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

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  Inclure une page suivant un formulaire

 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Inclure une page suivant un formulaire

n°2398799
kewan
Posté le 24-10-2021 à 20:19:53  profilanswer
 

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.

mood
Publicité
Posté le 24-10-2021 à 20:19:53  profilanswer
 

n°2398808
MaybeEijOr​Not
but someone at least
Posté le 24-10-2021 à 20:44:00  profilanswer
 

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.
n°2399093
kewan
Posté le 27-10-2021 à 18:29:02  profilanswer
 

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

n°2399244
rufo
Pas me confondre avec Lycos!
Posté le 29-10-2021 à 11:59:57  profilanswer
 

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

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

  Inclure une page suivant un formulaire

 

Sujets relatifs
Créer une page auteur avec Tri AlphabétiqueDétecter changement d'une partie de page - Améliorer Deezer
Rechercher une page précise dans un classement sur le webTransformer un fichier xlsm en page web
Automatisation action page web[RÉGLÉ]Mediawiki - Besoin de dépannage urgent - Sidebar en bas de page
Désactiver Scrolling Auto de la page par la Molette (souris)[PHP] Problème stylesheet CSS indisponible sur une page (MODEL MVC)
Ouvrir une page dans un navigateurLecteur vidéo web qui switch suivant le débit ?
Plus de sujets relatifs à : Inclure une page suivant un formulaire


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