Discussion :

[franfr57]

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

[BrYs]

Tu mets un id à ton bouton et tu utilises :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[bkill]

Salut,

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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';

[franfr57]

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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?

[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 ...

[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

[franfr57]

à super 69 messages ça va me porter bonheur lol

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

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<input style="visibility:visible;" type="button" name="Submit" value="Envoyer" onclick="this.style.visibility='hidden';" >

[bkill]

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"

[franfr57]

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

voici ma fonction javascript :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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