Hide / Show DIV pour formulaire

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Hide / Show DIV pour formulaire

Re: Hide / Show DIV pour formulaire

par visualight » 03 avr. 2010, 15:18

Salut,

J'ai résolu mon problème comme ceci :

[javascript]
<script type="text/javascript">

function Form_HideShowDiv (check_id, id_hide, id_show) {

// si id_hide n'est pas vide, on cache le DIV qui correspond à id_hide
// On vérifie également su le bouton (radio ou checkbox) est coché

if(id_hide) {
var baliseHide = document.getElementById(id_hide);

if (baliseHide.style.display == "block" && document.getElementById(check_id).checked == true) {
baliseHide.style.display = "none";
}
}

// Si id_show n'est pas vide, on teste si le style.display est none ou block et on affiche ou cache le DIV correspondant à id_show
// On vérifie également su le bouton (radio ou checkbox) est coché

if(id_show) {
var baliseShow = document.getElementById(id_show);

if (baliseShow.style.display == "none" && document.getElementById(check_id).checked == true) {
baliseShow.style.display = "block";
} else if (baliseShow.style.display == "block" && document.getElementById(check_id).checked == false) {
baliseShow.style.display = "none";
}
}
}
</script>
[/javascript]

L'appel se fait :

Code : Tout sélectionner

onClick="javascript:Form_HideShowDiv(this.id,'watermark','flickr')"

Mais le code ne me parait pas très propre. Comment puis-je l'améliorer ?

Merci,
raph

Hide / Show DIV pour formulaire

par visualight » 03 avr. 2010, 11:47

Bonjour,

Je suis en pleine réalisation d'un formulaire et j'ai développé une fonction javascript me permettant d'afficher/cacher un DIV donné mais il s'avère que je rencontre un petit bug.

Voici la fonction :

Code : Tout sélectionner

function Form_HideShowDiv (id_hide, id_hideshow) { var baliseHide = document.getElementById(id_hide); var baliseHideShow = document.getElementById(id_hideshow); if (baliseHide.style.display == "block") { baliseHide.style.display = "none"; } if (baliseHideShow.style.display == "none") { baliseHideShow.style.display = "block"; } else baliseHideShow.style.display = "none"; }
J'appelle la fonction comme suit (dans un echo PHP) :

Code : Tout sélectionner

echo '<input type="radio" name="video_local" value="true" id="videolocal_0" onClick="javascript:Form_HideShowDiv(\'flickr\',\'watermark\')" />';
Comme dans l'exemple d'appel ci-dessus, la fonction marche très bien.
Elle ferme le DIV "flickr" et ouvre le DIV "watermark".

Par contre, j'aimerai que ma fonction marche aussi comme ceci :

Code : Tout sélectionner

javascript:Form_HideShowDiv(' ','page_descr')
Comme vous le remarquez je désirerai laisser vide l'appel de la première ID du DIV (car j'en ai pas besoin) et appeler seulement la second ID DIV.
Pour avoir une seule et même fonction qui fait tout.

Pour rappel, la première ID DIV que j'appelle détecte si display=block et le met en display=none.
la seconde ID DIV détecte si le DIV en question est display=none et le met en display=block et inversément.

Mais là je bloque ...
Que dois-je modifier dans ma fonction (ou dans l'appel) pour que ça marche ?

Par la même occasion, si vous avez une astuce pour rendre le code javascript plus propre, je suis preneur ;)


Merci,
raph