Inclure une page suivant un formulaire

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Inclure une page suivant un formulaire

kewan

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 :

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

Publicité

MaybeEijOrNot

but someone at least

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.

kewan

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

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

rufo

Pas me confondre avec Lycos!

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

FORUM HardWare.fr

Programmation

Javascript/Node.js

Inclure une page suivant un formulaire

Sujets relatifs
Créer une page auteur avec Tri Alphabétique	Détecter changement d'une partie de page - Améliorer Deezer
Rechercher une page précise dans un classement sur le web	Transformer 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 navigateur	Lecteur vidéo web qui switch suivant le débit ?
Plus de sujets relatifs à : Inclure une page suivant un formulaire

Page générée en 0.091 secondes