Cacher un DIV avec input Radio

Version imprimable

Bonjour à tous,

J'ai créé un script où quand je choisi livraison Mondial Relay le Div s'affiche et quand je choisi l'une des 2 autres livraisons cela ne s'affiche pas.

Cela fonctionne en parti, j'arrive a afficher ou non en cliquant sur les radio mais le problème est quand on affiche la page pour la première fois, le DIV s'affiche automatiquement. Moi je voudrais qu'il soit cacher dès que l'on charge pour la première fois la page.

Code:

1
2
3
4
5
6
<script type="text/javascript">
function afficher(etat)
{  
    document.getElementById("champ").style.visibility=etat;  
}
</script>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<form name="formulaire" id="formulaire" action="" method="">
    <div id="haut_menu_grand"><h3>Adresse de livraison</h3></div>
    <div id="milieu_menu_grand">
        <p class="corps_milieu_grand">
            <input type="radio" name="livraison" value="adresse_principale" id="adresse_principale" checked="checked" onclick="afficher('hidden');" /> <label for="adresse_principale">Adresse de livraison principale (6,80 euros)</label><br /><br />
            <input type="radio" name="livraison" value="adresse_relais" id="adresse_relais" onclick="afficher('visible');" /> <label for="adresse_relais">Mondial Relais (5,95 euros)</label><br /><br />
            <input type="radio" name="livraison" value="adresse_mainpropre" id="adresse_mainpropre" onclick="afficher('hidden');" /> <label for="adresse_mainpropre">Livraison en main propre sur rendez-vous (Gratuit) - Attention : Sur Albert (80), Amiens (80), Méaulte (80).</label><br /><br />                
        </p>
 
        <div id="champ">Affichage du div</div>
 
    </div>
 
    <div id="bas_menu_grand"></div>
</form>

Merci pour votre aide

07/03/2018, 22h42
ProgElecT

Salut

Ligne 10

Code:

<div id="champ" style="visibility:hidden;">Affichage du div</div>
07/03/2018, 22h56
ABCIWEB

Bah oui, basiquement si on veut cacher un élément au chargement de la page on le fait en css ou dans un style incorporé comme l'a montré ProgElecT.
07/03/2018, 23h08
psgman80

Citation:

Envoyé par ProgElecT

Salut

Ligne 10

Code:

<div id="champ" style="visibility:hidden;">Affichage du div</div>

Merci cela règle en partie mon problème

"visibility" cache mais garde un grand espace vide

J'ai essayé

Code:

<div id="champ" style="display:none;">

ça cache bien mais quand je coche les Radio plus rien ne s'affiche.

Une idée ??
07/03/2018, 23h21
Michel

Code:

document.getElementById("champ").style.display=etat;

avec etat qui vaut none ou all

Salut

Citation:

Envoyé par Michel

Code:

document.getElementById("champ").style.display=etat;

avec etat qui vaut none ou all

Moi je pense plutôt à block

Code:

1
2
3
4
5
6
        <p class="corps_milieu_grand">
            <input type="radio" name="livraison" value="adresse_principale" id="adresse_principale" checked="checked" onclick="afficher('none');" /> <label for="adresse_principale">Adresse de livraison principale (6,80 euros)</label><br /><br />
            <input type="radio" name="livraison" value="adresse_relais" id="adresse_relais" onclick="afficher('block');" /> <label for="adresse_relais">Mondial Relais (5,95 euros)</label><br /><br />
            <input type="radio" name="livraison" value="adresse_mainpropre" id="adresse_mainpropre" onclick="afficher('none');" /> <label for="adresse_mainpropre">Livraison en main propre sur rendez-vous (Gratuit) - Attention : Sur Albert (80), Amiens (80), Méaulte (80).</label><br /><br />                
        </p>  
            <div id="champ" style="display:none;">Affichage du div</div>

Code:

1
2
3
4
function afficher(etat)
{  
    document.getElementById("champ").style.display=etat;  
}

08/03/2018, 18h40
ABCIWEB

Tu fais du javascript mais tu ne connais pas assez les bases du css/html et c'est essentiel. C'est ça qu'il faut commencer par maîtriser pour avancer car côté visiteur, javascript (ou même les langages serveur) ne font finalement qu'afficher du html. Donc toujours commencer par avoir de bonnes bases en html/css.

visibility affiche ou cache le bloc mais préserve son espace d'affichage dans la page contrairement à display. Attention toutefois à l'usage d'un display:none à l'intérieur d'un formulaire car les éléments contenus ne seront pas envoyés. Par ailleurs javascript n'aura pas la possibilité de trouver les dimensions d'un bloc en display:none. Pour dire que le fait que l'élément ne soit plus dans le flux (contrairement à un visibility:hidden) a des conséquences qu'il vaut mieux connaitre à l'avance. Mais bon dans ton cas cela ne gêne apparemment en rien.
08/03/2018, 19h56
NoSmoking

Bonjour,
@ABCIWEB : correctif

Citation:

Envoyé par ABCIWEB

Par ailleurs javascript n'aura pas la possibilité de trouver les positions ou les dimensions d'un bloc en display:none. Pour dire que le fait que l'élément ne soit plus dans le DOM (contrairement à un visibility:hidden) a des conséquences qu'il vaut mieux connaitre à l'avance.en rien.

Les éléments en display:none ne sont pas retirés du DOM, seulement du flux et la récupération de la position est réalisable mais ces dimensions sont misent à 0.

Par contre

Citation:

Attention toutefois à l'usage d'un display:none à l'intérieur d'un formulaire car les éléments contenus ne seront pas envoyés.

+1, ce point est très souvent négligé.
08/03/2018, 23h26
ABCIWEB

Oui effectivement il est toujours dans le DOM sinon on ne pourrait plus y avoir accès :lol: C'est corrigé.
08/03/2018, 23h48
Loralina

Bonsoir,

Citation:

Envoyé par ProgElecT

Moi je pense plutôt à block

Oui, mais pourquoi, plus généralement, ne pas mettre une chaîne vide ?
Ainsi c'est la valeur par défaut de la balise ou le css qu'on a défini qui est appliqué.
09/03/2018, 08h37
ProgElecT

Salut

Citation:

Ainsi c'est la valeur par défaut de la balise ou le css qu'on a défini qui est appliqué.

Oui mais passer

Code:

.style.display="";

ne change pas l’état du display, s'il était visible il le reste et il ne devient pas "none", sa valeur par defaut mais "" (rien), sans provoquer pour autant une erreur.
09/03/2018, 10h50
Loralina

Bonjour,

Citation:

Envoyé par ProgElecT

ne change pas l’état du display, s'il était visible il le reste et il ne devient pas "none", sa valeur par defaut mais "" (rien), sans provoquer pour autant une erreur.

Je ne parle pas de mettre "" pour cacher, mais pour afficher au contraire. :)
Dans le code actuel, si on met une chaîne vide '', à la place de 'Block', dans l'appel du deuxième bouton radio, alors cela va fonctionner comme prévu.

L'affichage par défaut est certes caché, mais quand je parlais de valeur par défaut, je ne me référais pas en fait à ce qui est écrit dans l'attribut "style".
Je considère que dans cet attribut on a redéfini l'affichage par défaut de la balise qui est "block".

Maintenant, si on définit "none" dans une classe dont dépend la balise, alors mettre vide sur la propriété "display" de la propriété "style" ne va pas afficher l'élément.
Il faut inverser, la chaîne vide permettra de remettre à "none", si on vient d'afficher l'élément.
Il faut savoir ce qu'on fait. :)

L'idée c'est : on a un comportement par défaut défini ailleurs que sur la propriété "style", on crée un cas paticulier sur la propriété "style", puis on l'annule.

Exemple :
On a une balise dépendant d'une classe, directement ou non.
Dans cette classe, on a une couleur.
A un moment, on crée un cas particulier en définissant la couleur directement depuis la propriété/l'attribut "style" de l'élément.
Pour revenir à l'état précédent/par défaut, on remet cette propriété à vide et c'est de nouveau la couleur de la classe qui s'applique.