Inclure une page suivant un formulaire

24 octobre 2021 à 20:18:05

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

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

LucasWerquin

24 octobre 2021 à 20:33:56

Mhmmm, si ton tableau n'avait pas été trop "lourd", je t'aurais conseillé de mettre les deux dans ta page HTML, et avec javascript de jouer avec le display.
Sinon, en php il y a bien le include, mais à manier avec précaution ( je me suis déjà fait salement pirater à cause d'un include utilisé de manière irréfléchie ).

L'avantage de la première solution que je te propose est d'éviter une interaction avec le serveur ( tout le contenu HTML est déjà chargé par le client, seul son affichage est modifié ), c'est donc plus rapide, plus "écologique" ( moins de bande passante utilisée ).
Mais sinon, il y a ajax.
Par contre je te conseille d'utiliser le type POST plutôt que GET, et de poster seulement une donnée de type texte, genre "tab1" ou "tab2", que le serveur saura interpréter pour t'envoyer soit le contenu du premier tableau, soit du deuxième.

_seb_

27 octobre 2021 à 18:26:23

Merci pour ta réponse, voilà ce que j'ai fait.

<?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");
    }
?>