bouton invisible

Version imprimable

03/05/2006, 10h00
franfr57

bouton invisible

Bonjour,
je voudrais savoir si est possible de rendre invisible un bouton!
pour l'instant quand la personne coche la case de la case à cocher je le met disabled grâce à une fonction javascript

Merci de votre aide
03/05/2006, 10h08
BrYs

Tu mets un id à ton bouton et tu utilises :

Code:

document.getElementById('id_de_ton_bouton').style.display = "none"

Salut,

tu peux modifier ta fonction javascript pour changer le css du bouton:
Code:

1 2 3 4 5 6 7 8 9 10 <input type="button" name="bla" value="bla" id="btn"> <script language="javascript" type="text/javascript"> function toggleBtn(state) { btn = document.getElementById('btn'); btn.style.visibility = (state == 'visible') ? 'visible' : 'hidden'; btn.style.display = (state == 'visible') ? 'block' : 'none'; } </script>
Après, tu peux appeler la fonction comme suit:
Code:

1 2 3 toggleBtn('visible'); // pour l'afficher toggleBtn('hidden'); // pour le cacher
Voila, c'est un exemple...
L'important étant que pour l'afficher, il faut
<LEBOUTON>.style.visibility = 'visible';
<LEBOUTON>.style.display = 'block';

et pour cacher:
<LEBOUTON>.style.visibility = 'hidden';
<LEBOUTON>.style.display = 'none';

merci bkbill mais j'ai un autre problème quand j'appele ma fonction javascript suivante :

Code:

1
2
3
4
5
6
 
 
 function ChangeStatut1(formulaire) {
  if(formulaire.checkbox.checked == true) {formulaire.textfield.readonly="false";  formulaire.Submit.style.visibility = 'visible'; formulaire.Submit.style.display = 'block';}
  if(formulaire.checkbox.checked == false) {formulaire.Submit.style.visibility = 'hidden'; formulaire.Submit.style.display = 'none';}
 }

mon formulaire :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
    <td><form name="form1" method="post" action="">
      <label>
        <input type="text" name="textfield" readonly="true" size="5" maxlength="5" value="00:00" >
      </label>
      <label>
      <input type="checkbox" name="checkbox" value="checkbox" onClick="ChangeStatut1(this.form)">
      </label>
      <label>
      <input type="submit" name="Submit" value="Envoyer" >
      </label>
    </td></form>

dans mon formulaire qui se trouve dans une case de tableau, lorsque je coche la case le bouton apparait en dessous de mon champ text et plus à côté

Comment puis je faire?

03/05/2006, 10h58
SpaceFrog

ne pas utiliser display mais uniquement visibility ..
le display:none retire l'objet du flux de la page et change docn la mise en page des objets suivants dans le flux qui viennent prendre la place libre ...
en ne jouant que sur le visibility l'objet reste dans le flux de la page et la mise en page ne change pas ...
03/05/2006, 11h00
franfr57

et pour rendre mon bouton invisible je fait :

<input Submit.style.visibility = 'hidden'; type="submit" name="Submit" value="Envoyer" >
mais cela ne fonctionne pas...

Merci de votre aide
03/05/2006, 11h04
franfr57

à super 69 messages ça va me porter bonheur lol :D

je voudrais rentre dans ma fonction javascript quand je coche ma case je puisse modifier le champ text qui est readonly au départ!
je fait comme ceci dans ma focntion javascript :
formulaire.textfield.readonly='false';

mais cela ne fonctione pas

merci de votre aide
03/05/2006, 11h18
SpaceFrog

Code:

<input style="visibility:visible;" type="button" name="Submit" value="Envoyer" onclick="this.style.visibility='hidden';" >
03/05/2006, 11h19
bkill

Citation:

Envoyé par SpaceFrog

ne pas utiliser display mais uniquement visibility ..

Justement, ca dépend de ce qu'il veut faire dans son document ;)
Peut-être qu'il veut que le bouton soit complètement caché, et que le contenu de la page bouge avec ce changement...
Ta remarque est bonne en tout cas, mais je ne suis pas 100% d'accord sur le "ne pas utiliser" ;)

je n'arrive pas à controle le readonly avec ma fonction javascript, par défaut mon champ text est readonly

voici ma fonction javascript :
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript"> function ChangeStatut1(formulaire) { if(formulaire.checkbox.checked == true) {formulaire.textfield.readonly='false'; formulaire.Submit.style.visibility = 'visible'; } if(formulaire.checkbox.checked == false) {formulaire.Submit.style.visibility = 'hidden'; } } </script>
Merci de votre aide