Cacher un element en fonction d'un radiobutton

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Cacher un element en fonction d'un radiobutton

davidmarli

Bonjour,

j'espère poster dans la bonne catégorie.

Je suis entrain de faire une page HTML qui contient 2 radiobutton.
Je voudrais cacher un input et afficher l'autre si le radiobutton1 est cliqué et inversement.

Quelqu'un peut-il me dire comment faire ?

Merci.

Code :

<div class="row">
<p>La récupération de la consommation de la maison se fait via : </p>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioPowerMaison" id="flexRadioHA1">
<label class="form-check-label" for="flexRadioHA1">
Home Assistant
</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" name="flexRadioPowerMaison" id="flexRadioShelly1" checked>
<label class="form-check-label" for="flexRadioShelly1">
Shelly
</label>
</div>
<div class="col-md-12 col-lg-6">
<div class="input-group my-3" id="IPShelly1">
<span class="input-group-text col-8" >IP du Shelly 1 (conso maison)</span>
<input required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" type="text" class="form-control mr-3 col-4" id="IPShelly1" placeholder="192.168.1.XXX" aria-describedby="IPShelly1">
</div>
<div class="input-group my-3" id="IPHA" >
<span class="input-group-text col-8" >IP de Home Assistant</span>
<input required pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" type="text" class="form-control mr-3 col-4" id="IPHA" placeholder="192.168.1.XXX" aria-describedby="IPHA">
</div>
</div>

---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF

Publicité

mechkurt

Tu as des solutions pure css mais il faut que le bloc a caché / découvrir soit placé au niveau html juste après l'input checkbox, comme ici par exemple :

Code :

<style>
input[type=checkbox]{
display: none;
}
input[type=checkbox]:checked ~ .remove-check{
display: none;
}
input[type=checkbox]:checked ~ #email{
display: block;
}
#email{
display: none;
}
</style>
<label for="reveal-email" class="btn" style="width: 300px"> Sign Up</label>
<input type="checkbox" id="reveal-email" role="button">
<div id="email">
<form id="email-form" class="nice" action="" method="post">
<input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" />
<input type="hidden" name="name" id="id_name_email">
<a class="btn" >Apply</a>
</form>
</div>

Source : https://jsfiddle.net/nzcage/nvrgbj5q/

Sinon en JS avec ou sans Framework avec un listener sur l'input checkbox et des modification de display sur l'id ciblé comme ici :

Code :

<script>
function showMe (box) {
var chboxs = document.getElementsByName("c1" );
var vis = "none";
for(var i=0;i<chboxs.length;i++) {
if(chboxs[i].checked){
vis = "block";
break;
}
}
document.getElementById(box).style.display = vis;
}
</script>
<div id="div1" style="display:none">
<table border=1 id="t1">
<tr>
<td>i am here!</td>
</tr>
</table>
</div>
<form>
<input type="checkbox" name="c1" onclick="showMe('div1')">Show Hide Checkbox
</form>

Source : https://jsfiddle.net/mithunsatheesh/wwcRr/

---------------
D3

davidmarli

EDIT : mon premier message n'a pas été validé.
merci pour ton aide le code fonctionne bien.

En revanche, après essai j'ai un truc que je ne comprends pas.

Lorsque je lance le fichier les 2 input sont bien côte à côte

https://ibb.co/9cbPLkS

Je clique sur Home assistant : j'ai bien les 3 input qui apparaissent

https://ibb.co/9h9Rtkr

Si j'appuie de nouveau sur Shelly : les 2 input ne sont plus côte à côte !!!

https://ibb.co/zrnCSDr

Voici mon code source

Code :

<body id="page-top">
<div id="wrapper">
<ul class="navbar-nav bg-gradient-success sidebar sidebar-dark accordion" id="accordionSidebar">
<a class="sidebar-brand d-flex align-items-center justify-content-center" href="/">
<div class="sidebar-brand-icon">
<i class="bi bi-sun"></i>
</div>
<div class="sidebar-brand-text mx-3">Routeur Solaire</div>
</a>
<hr class="sidebar-divider my-0">
<li class="nav-item active">
<a class="nav-link" href="/">
<h6 class="font-weight-bold"><i class="fas fa-fw fa-tachometer-alt"></i> Tableau de bord</h6>
</a>
</li>
</ul>
<div id="content-wrapper" class="d-flex flex-column">
<div class="container-fluid">
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800">Configuration du Système</h1>
</div>
<p class="mb-4">Page de configuration du Routeur Solaire; Pensez à sauvegarder votre configuration après l'avoir appliquée.</p>
<div class="col-xl-12 col-xxl-12">
<div class="card position-relative">
<div class="card-header py-3">
<h6 class="m-0 font-weight-bold text-primary">Configuration</h6>
<span id="saveform"></span>
</div>
<div class="card-body shadow">
<div class="col col-12">
<form class="user" id="formulaire" method="post" action="" >
<div class="container text-start">
<div class="row">
<p>La récupération de la consommation de la maison se fait via : </p>
</div>
<div class="row">
<div class="form-check">
<input class="form-check-input" type="radio" style="margin-right:10px;" name="flexRadioConsoMaison" id="flexRadioConsoMaisonHA" onclick="DisplayInputConsoMaison()">
<label class="form-check-label" style="margin-right:10px;" for="flexRadioConsoMaisonHA">Home Assistant</label>
</div>
<div class="form-check">
<input class="form-check-input" type="radio" style="margin-right:10px;" name="flexRadioConsoMaison" id="flexRadioConsoMaisonShelly" onclick="DisplayInputConsoMaison()" checked >
<label class="form-check-label" for="flexRadioConsoMaisonShelly" style="margin-right:10px;">Shelly</label>
</div>
</div>
<div class="row" id="SHELLY_Input" >
<div class="col-md-12 col-lg-6">
<div class="input-group my-3" >
<span class="input-group-text col-8" >IP du Shelly 1 (conso maison)</span>
<input pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" type="text" class="form-control mr-3 col-4" id="IPShelly1" placeholder="192.168.1.XXX" aria-describedby="IPShelly1">
</div>
</div>
<div class="col-md-12 col-lg-6">
<div class="input-group my-3" id="IPShelly1">
<span class="input-group-text col-8" >emeter</span>
<input type="text" class="form-control mr-3 col-4" id="EmeterShelly1" placeholder="0" aria-describedby="IPShelly1">
</div>
</div>
</div>
<div class="row" id="HA_Input" style="display:none">
<div class="col-md-6 col-sm-12">
<div class="input-group my-3" id="IPHA" >
<span class="input-group-text col-8" >IP de Home Assistant</span>
<input pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" type="text" class="form-control mr-3 col-4" id="IPHA" placeholder="192.168.1.XXX" aria-describedby="IPHA">
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="input-group my-3" id="HASensor" >
<span class="input-group-text col-8" >Nom du sensor</span>
<input type="text" class="form-control mr-3 col-4" id="HASensor" placeholder="" aria-describedby="HASensor">
</div>
</div>
<div class="col-md-6 col-sm-12">
<div class="input-group my-3" id="HABearer" >
<span class="input-group-text col-8" >Bearer HA</span>
<input type="text" class="form-control mr-3 col-4" id="HABearer" placeholder="" aria-describedby="HABearer">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-lg-6">
<div class="input-group my-3" id="IPShelly2">
<span class="input-group-text col-8" >IP du Shelly 2 (conso CE)</span>
<input pattern="^((\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])\.){3}(\d|[1-9]\d|1\d\d|2[0-4]\d|25[0-5])$" type="text" class="form-control mr-3 col-4" id="IPShelly2" placeholder="192.168.1.XXX" aria-describedby="IPShelly2">
</div>
</div>
<div class="col-md-12 col-lg-6">
<div class="input-group my-3" id="IPShelly1">
<span class="input-group-text col-8" >emeter</span>
<input type="text" class="form-control mr-3 col-4" id="EmeterShelly2" placeholder="1" aria-describedby="IPShelly1">
</div>
</div>
</div>
<input type="submit" value=" Application des parametres" class="btn btn-success btn-user btn-block col-4 mx-auto shadow h-100">
</div>
</form>
</div>
</div>
</div>
</div>
<div class="col-lg-4 my-2 mx-auto">
<div class="card border-left-success shadow h-100 py-2">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<!--<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Sauvegarder</div>
-->
<div class="h5 mb-0 font-weight-bold text-gray-800"><span id="save" ><a href="#">SAUVEGARDER</a></span><br><span id="savemsg"></span>
</div>
</div>
<div class="col-auto">
<i class="fas fa-download fa-2x text-gray-300"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type='text/javascript'>
function DisplayInputConsoMaison () {
var chboxs = document.getElementsByName("flexRadioConsoMaison" );
if ( chboxs[0].checked) {
document.getElementById('HA_Input').style.display = "block";
document.getElementById('SHELLY_Input').style.display = "none";
}
if ( chboxs[1].checked) {
document.getElementById('HA_Input').style.display = "none";
document.getElementById('SHELLY_Input').style.display = "block";
}
}
</script>
</body>

Message édité par davidmarli le 30-05-2024 à 15:40:40

---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF

mechkurt

Le type d'un bloc div est par défaut block mais vu que tu utilises manifestement un framework qui te fait un colonage il se peut que ce soit flex ou inline-block.

Il se peut que son statut de block ou flex dépendent aussi de la résolution de ton dispositif de visualisation (un smartphone mettre surement tes colonnes les une au dessus des autres et donc tu seras probablement en display:block & width:100%).

Essaye d'inspecter ton élement à l'aide du clic droit de ton navigateur pour voir son style par défaut...
https://www.google.com/search?q=inspecter+l'element

---------------
D3

davidmarli

bien vu avec "flex" ça marche !

Quand on n'y connait rien, on perd vite son temps pour pas grand chose.

Encore merci pour ton aide.

Message cité 1 fois

---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF

mechkurt

davidmarli a écrit :

bien vu avec "flex" ça marche !

Tu devrais stocker la valeur initial avant ton code de modification car il se peut que sa valeur dépendent de ta résolution d'affichage.
Un truc du genre :

Code :

<script type='text/javascript'>
var original_display = document.getElementById('HA_Input').style.display;
function DisplayInputConsoMaison () {
var chboxs = document.getElementsByName("flexRadioConsoMaison" );
if ( chboxs[0].checked) {
document.getElementById('HA_Input').style.display = original_display;
document.getElementById('SHELLY_Input').style.display = "none";
}
if ( chboxs[1].checked) {
document.getElementById('HA_Input').style.display = ;
document.getElementById('SHELLY_Input').style.display = original_display;
}
}
</script>

Après y'aurait pas mal de chose à améliorer dans ton code mais du moment que ça fonctionne... [:nedurb]

davidmarli a écrit :

Quand on n'y connait rien, on perd vite son temps pour pas grand chose.

C'est sur.

davidmarli a écrit :

Encore merci pour ton aide.

De rien :hello:

Message édité par mechkurt le 30-05-2024 à 19:31:21

---------------
D3

davidmarli

je me doute bien que des spécialistes du html/bootstrap/javascript doivent avoir des sueurs froides en voyant mon code...
Mais chacun son métier.
J'essaye de faire du mieux que je peux.

Bon maintenant il faut que je m'attèle à la récupération des données à afficher sur l'HTML en piochant dans mes fichiers de config avec les submit des forms ....

Message édité par davidmarli le 30-05-2024 à 19:15:00

---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF

mechkurt

Tient nous au jus, y'a ptet une API interrogeable, voir même des projets déjà développé...

---------------
D3

davidmarli

pour ça, ça devrait aller, c'est pas la première fois que je programme ce genre de truc.
Mon programme renvoie une chaine de caractères avec les éléments dont j'ai besoin et je parse dans le doc HTML en attribuant les innerHTML

Mais je n'hésiterai pas si j'ai besoin.

---------------
Matheux Fou - https://afficheur-tempo.fr - TEMPO BOX pour abonnés TEMPO EDF

FORUM HardWare.fr

Programmation

HTML/CSS

Cacher un element en fonction d'un radiobutton

Sujets relatifs
Changer url d'un onclick en fonction d'une variable ?	[Résolu] Comportement bizarre d'une fonction entre PHP5 et PHP8
[SOLVED] fonction super except	fonction illisible dans un fichier annexe
Changer une icone en fonction d'une variable ?	Créer et ajouter fonction au menu contextuel
[MarketingCloud] tri de groupes en ne récupérant que le 1er élément	Fonction exec()
élément d'ancrage	problème de récupération de texte avec une fonction
Plus de sujets relatifs à : Cacher un element en fonction d'un radiobutton

Page générée en 0.222 secondes