Inclure une page suivant un formulaire

Version imprimable

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
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
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>test2</title>
    <style type="text/css">
      table {
        border-collapse: collapse;
        border: 3px solid rgb(0, 0, 0);
        width: 50%;
        background-color: rgb(194, 194, 194);
        text-align: center;
        color: rgb(0, 0, 0);
        margin: 8px;
      }
      table th {
        border: 3px solid rgb(0, 0, 0);
      }
      table tr {
        border: 3px solid rgb(0, 0, 0);
      }
      table td {
        border: 3px solid rgb(0, 0, 0);
      }
      .grille {
        display: inline-block;
        vertical-align: top;
        border: 3px solid blue;
      }
      .formulaire {
        display: inline-block;
        vertical-align: top;
        border: 3px solid blue;
      }
    </style>
    <script type="text/javascript">
      function typeGrille1() {
        x = document.getElementsByClassName("grille");
        x[0].innerHTML =
          "<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>";
      }
      function typeGrille2() {
        x = document.getElementsByClassName("grille");
        x[0].innerHTML =
          "<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>";
      }
    </script>
  </head>
  <body class="s2">
    <div class="formulaire">
      <input
        type="radio"
        name="typeGrille"
        value="1"
        id="1"
        onclick="typeGrille1()"
      /><label for="1">grille1</label><br />
      <input
        type="radio"
        name="typeGrille"
        value="2"
        id="2"
        onclick="typeGrille2()"
      /><label for="2">grille2</label>
    </div>
    <div class="grille"></div>
  </body>
</html>

Merci pour votre aide.

25/10/2021, 11h51
SpaceFrog

Tu peux soit charger les données au départ dans un ou plusieurs JSON et afficher le tableau souhiaté en le peuplant à partir du JSON
Ou encore faire un ajax pour récupérer les données sous forme de JSON ...

Merci pour ta réponse,

je ne connais pas JSON, il va falloir que je m'y mette.

pour l'instant j'ai créé 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
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
<?php
    if(!empty($_POST['subGrille'])){
        if($_POST['subGrille'] == "sco"){
            unset($_SESSION['avecCritereOperationnel']);
            $_SESSION['sansCritereOperationnel'] = 1;
        }elseif($_POST['subGrille'] == "aco"){
            unset($_SESSION['sansCritereOperationnel']);
            $_SESSION['avecCritereOperationnel'] = 1;
        }
    }
?>
<form method="post" id="formTypeGrille" class="p1 p2">
    <p>Configuration de ma grille d’évaluation</p>
    <table class="tbConfigGrille">
        <tbody>
            <tr>
                <th colspan="4" class="pCentre">Type de grille</th>
            </tr>
            <tr>
                <td colspan="3">Sans critère opérationnel</td>
                <td colspan="3"><input type="radio" name="subGrille" onclick="formTypeGrille.submit()" value="sco" id="sco"/><label for="sco"></td>
            </tr>
            <tr>
                <td colspan="3">Avec critères opérationnels</td>
                <td colspan="3"><input type="radio" name="subGrille" onclick="formTypeGrille.submit()" value="aco" id="aco"/><label for="aco"></td>
            </tr>
        </tbody>
    </table>
</form>
<?php
    if(!empty($_SESSION['avecCritereOperationnel'])){
        include("/var/www/chefDOeuvre/prof/_grilleConfigAco.php");
    }elseif(!empty($_SESSION['sansCritereOperationnel'])){
        include("/var/www/chefDOeuvre/prof/_grilleConfigSco.php");
    }
?>