Masquer/Afficher un bouton

Version imprimable

Bonjour à tous,

J'ai un formulaire avec un bouton masqué. Lorsque les conditions sont remplies le bouton doit s'afficher.
Rendu html initial:

Code:

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:

1
2
3
form[name="actForm"] .activity input[type='submit'] {
	display:none;
}

Code:

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.

13/02/2021, 18h30
javatwister

Bonjour,

Peut-être parce que la valeur que tu souhaites est "inline-block"?
13/02/2021, 20h49
moimp

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?
13/02/2021, 21h39
javatwister

Euh, "inline-block", en fait.
13/02/2021, 21h55
CosmoKnacki

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"]')
13/02/2021, 22h17
moimp

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,

Citation:

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.