11548 sujets

JavaScript, DOM et API Web HTML5

[RESOLU]Afficher un formulaire en fonction d'un checkbox

Bonjour tout le monde,

je precise avant tout que je suis en apprentissage au niveau du javascipt( Smiley lol )
voila mon soucis, j'ai un formulaire avec des input, textarea, menu deroulant et des checkbox.
Je voudrais afficher une partie du formulaire que si un des checkbox est coché, j'ai essaye de le faire avec l'attribut css visibility mais ca ma fait un truc tout moche.
En fait je voudrais savoir comment je peut pour mettre le code correspondant a ce qui doit etre affiché dans mon script et comme ca si la case est coché, pouf ca me décale tout vers le bas et m'affiche mon bout de formulaire en plus.
pour le moment j'essaie mais je n'y arrive pas, et voila comment je m'y prends:
<script language="javascript" type="text/javascript">
		    if document.getElementById("chkDevis").checked==true{
		        <input type="text".....>
                        <textarea .....>
		</script>

mais vous vous en douterez ca ne fonctionne pas tres bien(pas du tout meme)
j'espere bien expliqué le probleme... Smiley confus
et si quelqu'un connait un bon tutoriel je suis preneur

merci d'avance
Modifié par bedomon (14 Feb 2006 - 10:05)
Bonjour,

le problème dans ton code est que tu mets de l'HTML dans du javascript.
Si tu veux écrire de l'HTML dans ton code, tu peux faire un truc du genre :

document.write("<input type='text' ....>")


Mais avec ce système ca ne sera pas dynamique.

Il faut que tu passes par les évenements.

Sur ton checkbox :
<input onclick="mafonction(this)" type="checkbox" name="CHOIX" value="CASE 1"> CASE 1



et au début de ta page, entre les balise <head>, tu déclares ta fonction :


<script>
function mafonction(moncheckbox){
  if(moncheckbox.checked){
     //le code qui affiche la partie de ton formulaire masquée
  }
  else{
    //le code qui le cache
  }
}
</script>

Quelque chose dans le genre
Modifié par Marloneyes (13 Feb 2006 - 12:54)
Le mieux est de préparer un div (mais ça peut être un autre élément) doté d'un id, que tu afficheras/masqueras lors d'un clic sur la checkbox. Je te conseille d'utiliser display plutôt que visibility, c'est plus adapté à ce que tu veux faire.

Exemple :

<div id="formcache">
<input ... />
<textarea ... >...</textarea>
</div>
<input type="checkbox" onclick="document.getElementById('formcache').style.display = (this.checked? 'block':'none');" ... />
Cliquez sur la case pour afficher blablabla ...
le fait d'utilisé visibility:hidden fait que dans mon formulaire j'ai un gros trou ou il n'y a rien, et ce que je voudrai c'est que si la case est coché il y ai une décalage du formulaire et sa m'affiche la partie caché.
Smiley confused en fait c'est ca que je ne sais pas faire Smiley confused
j'ai essayer de faire ca mais ca ne marche toujours pas
<script language="javascript" type="text/javascript">
		if document.getElementById("chkDevis").checked==true{
		    document.getElementById("visible").style.visibility=="visible"
		    document.getElementById("visible").style.height=="200px"}</script>


et dans mon css par ddefaut j'ai ca:
#visible
{
    visibility:hidden;
    height:1px;
}

Modifié par bedomon (13 Feb 2006 - 16:09)
Justement, pour avoir le décalage automatique à la place d'un "trou", il faut utiliser display au lieu de visibility.
'alut!

c'est cool, ce post correspond à ce dont j'aii besoin (pas besoin d'en lancer un nouveau) Smiley smile

ben, moi j'ai un problème avec cette démarche, qui se fait avec un select. Je m'y connais pas trop en Javascript, mais je pensais Que ma syntaxe était bonne. hors il ne se passe rien du tout, hormis le alert de test.

ce que je voudrais faire c'est afficher une partie du formulaire, si telle option du select est choisie. J'ai mon alert qui fonctionne, ce qui me prouve que la selection de l'option est bien reconnue (onBlur)...

voici mon code javascript : 

function verifautre()
{ if (document.forms.remise.motifnonremise.options.selectedIndex==9)
    { document.getElementById("verifo").style.display=="block";
     alert("c'est sensé marcher")}
}



et voici mon css : 

#verifo {
display:none;
}


simple non?
si quelqu'un pouvait m'expliquer pourquoi mon div id="verifo" n'apparait pas... Smiley sweatdrop

merci beaucoup!! Smiley biggrin
Modifié par flock86 (29 Mar 2006 - 15:40)
Sujet clos
Aller à