IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Masquer/Afficher un bouton


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut Masquer/Afficher un bouton
    Bonjour à tous,

    J'ai un formulaire avec un bouton masqué. Lorsque les conditions sont remplies le bouton doit s'afficher.
    Rendu html initial:
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    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
     
    <!DOCTYPE html>
    <html lang="fr">
    	<head>
    		<meta charset="utf-8">
    		<title>Sélection ou modification d'une activité</title>
     
    		<meta http-equiv="Expires" content="-1" />
    		<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
     
    		<base href="http://sirep.proginet.local" />
     
    		<link rel="stylesheet" media="all" type="text/css" href="../css/activity.css">
    	</head>
     
    	<body>
     
    <form method="post" name="actForm">
    	<input type="hidden" name="id" value="3011">
    			<fieldset class="activity"><legend>Zone d'édition&nbsp;: Sélection d'une activité</legend>
    				<label><span>Section</span><select name='naf[]'><option value='' label='&lt; ---- &gt;'></option><option value='1'>SECTION A - AGRICULTURE, SYLVICULTURE ET PÊCHE</option><option value='2'>SECTION B - INDUSTRIES EXTRACTIVES</option><option value='3'>SECTION C - INDUSTRIE MANUFACTURIÈRE</option></select></label><br>
    				<label><span>Division</span><select name='naf[]'><option value='' label='&lt; ---- &gt;'></option></select></label><br>
    				<label><span>Groupe</span><select name='naf[]'><option value='' label='&lt; ---- &gt;'></option></select></label><br>
    				<label><span>Activité</span><select name='naf[]'><option value='' label='&lt; ---- &gt;'></option></select></label><br>
    				<p><input type="submit" name="save" value="Enregistrer"></p>
    			</fieldset>
    </form>
     
    <script>const emptyOption = "<option value='' label='&lt; ---- &gt;'><\/option>";</script>
    <script type="module" src="../js/customerActivitiesHandler.js"></script>
     
    	</body>
    </html>
    Code CSS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    form[name="actForm"] .activity input[type='submit'] {
    	display:none;
    }
    Code JS : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    			if(nafs[0].value !='' && nafs[1].value !='' && nafs[2].value !='' && nafs[3].value !=''){
    				alert('vvv');
    				form.save.style.display = 'inlineBlock';
    			}
    A la ligne 2 du code JS, le message 'vvv' s'affiche conformément aux conditions mais le bouton save ne s'affiche pas.

  2. #2
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    Bonjour,

    Peut-être parce que la valeur que tu souhaites est "inline-block"?

  3. #3
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut
    Ben, je crois que inline-block est la valeur par défaut des input et j'ai remplacé le trait d'union par une majuscule. Ce n'est pas ce qu'il fallait faire. Comment faire alors?

  4. #4
    Expert confirmé
    Avatar de javatwister
    Homme Profil pro
    danseur
    Inscrit en
    Août 2003
    Messages
    3 684
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Calvados (Basse Normandie)

    Informations professionnelles :
    Activité : danseur

    Informations forums :
    Inscription : Août 2003
    Messages : 3 684
    Par défaut
    Euh, "inline-block", en fait.

  5. #5
    Expert confirmé Avatar de CosmoKnacki
    Homme Profil pro
    Justicier interdimensionnel
    Inscrit en
    Mars 2009
    Messages
    2 986
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Charente Maritime (Poitou Charente)

    Informations professionnelles :
    Activité : Justicier interdimensionnel

    Informations forums :
    Inscription : Mars 2009
    Messages : 2 986
    Par défaut
    style.bidule renvoie la propriété css "bidule" et sa valeur doit être donnée telle qu'elle apparaîtrait dans une feuille de style. Donc c'est bien la chaîne inline-block.

    Je pense que ton problème vient du fait que tu n'atteins pas cet input avec form.save. Tu peux essayer de le remplacer par forms.actForm.elements.save ou bien tu peux coller une id à cet input et faire document.getElementById('monid'), ou encore tenter le css: document.querySelector('form[name="actForm"] .activity input[name="save"]')

  6. #6
    Membre éprouvé
    Homme Profil pro
    Ingénieur en électrotechnique retraité
    Inscrit en
    Décembre 2008
    Messages
    1 718
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 73
    Localisation : France, Bas Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur en électrotechnique retraité

    Informations forums :
    Inscription : Décembre 2008
    Messages : 1 718
    Par défaut
    Merci à vous, effectivement, il suffit de remplacer inlineBlock par inline-block. J'ai été induit en erreur par le livre de S. de La Marck / J. Pardannaud, édition 2012 . Il y est dit page 185,
    En JavaScript, les tirets sont interdits dans les noms de propriétés... La solution est simple: Supprimer les tirets et chaque mot suivant normalement un tiret voit sa première lettre devenir une majuscule.
    Un exemple est donné: background-color devient backgroundColor.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 8
    Dernier message: 23/06/2017, 17h51
  2. [AC-2016] Masquer ou afficher un bouton
    Par Melchiorjl dans le forum Access
    Réponses: 4
    Dernier message: 06/07/2016, 14h33
  3. masquer/afficher une range via bouton
    Par marcoole dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 09/01/2011, 21h22
  4. Cacher/afficher des boutons
    Par philippef dans le forum Général JavaScript
    Réponses: 3
    Dernier message: 14/09/2005, 16h09
  5. Afficher un bouton appartenant à une classe sur une form
    Par Julien_riquelme dans le forum Composants VCL
    Réponses: 2
    Dernier message: 05/09/2005, 13h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo