11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu]Bascule avec style.display sur boutons radio

Bonjour,

Je débute en Javascript et j'ai besoin de créer un questionnaire avec des boutons radio. Quand je clique sur un bouton"Oui", une div doit apparaître sous ce bouton avec un contenu et quand je bascule sur le bouton "Non", cette div doit disparaitre et une autre doit apparaitre sous le deuxième bouton radio. Pour faire plus simple, voilà mon code actuel sauf que je n'arrive pas à faire le basculement..je sais qu'il faut utiliser un if quelque part mais je ne sais pas comment...merci de votre aide !!


<html>
<body>
<head>
<script language="javascript">
function afficher(theid,thevalue)
{
	
  document.getElementById(theid).style.display = thevalue;
}
</script>
</head>
<form name="maform" >
<input type=radio name="monradio" value="block" onclick="afficher('madiv2',this.value)">OUI

<br> <div id="madiv2" style="display: none">
<table border="1">
  <tr>
    <td>
     
     Commentaire: <input type=text name="moninput1">
     
    </td>
  </tr>
</table>
 </div>
<input type=radio name="monradio" value="block" onclick="afficher('madiv1',this.value)">NON
<br> <div id="madiv1" style="display: none">
<table border="1">
  <tr>
    <td>
     
      Commentaire: <input type=text name="moninput1">
     
    </td>
  </tr>
</table>
 </div>
</form>
</body>
</html>

Modifié par louloute8091 (15 Mar 2007 - 14:11)
Bonjour.

Tout d'abord peut-on savoir pourquoi tu utilises des tableaux ?

Pour ton problème ça vient du fait que tu n'as aucun bout de code pour cacher l'autre div quand tu affiches celui souhaité ...
Et question usabilité, il est mieux de désactiver les champs plutôt de les masquer, l'utilisateur à horreur des surprises.

Il vaut donc mieux tout désactiver par défaut, puis lors d'un clique sur le premier radio, activer les contrôles correspondants...
a écrit :
Tout d'abord peut-on savoir pourquoi tu utilises des tableaux ?


Parce que mon vrai questionnaire est sous forme de nombreux tableaux imbriqués pour une bonne présentation (enfait, je dois le compléter car il a déjà été commencé comme ça)

a écrit :
ça vient du fait que tu n'as aucun bout de code pour cacher l'autre div quand tu affiches celui souhaité

Je le sais ça !! Smiley biggrin mais justement je n'y arrive pas...

a écrit :
il est mieux de désactiver les champs plutôt de les masquer, l'utilisateur à horreur des surprises


Que veux-tu dire par là ? Le truc que je ne veux pas de "gros blanc" entre mon "Oui" et mon "Non" quand le "Oui" est décoché...c pour remonter le nom sous le "Oui"'....

Merci
OK. Désolé.

Une des solutions les plus simples qui me vient à l'esprit c'est de créer une fonction "cacher" que tu lances en même temps que la fonction "afficher". Là c'est du Javascript de base ... ( si tu ne trouves vraiment pas je te donnerai du code )
Modifié par CNeo (19 Feb 2007 - 13:52)
Super ça marche !! Merci ! Smiley ravi
En fait, finalement j'ai un peu changé la règle de gestion : qd je clique sur oui ça génère d'autres questions et qd je clique sur non, ça referme le bloc avec ces questions(il n'y plus de questions dépendant du non)....le seul truc maintenant , c que je souhaite qu'à l'initialisation le bloc du "oui" soit fermé...je pense faire une fonction chargement() suit met le display du div à "none" pour ça mais comment je l'appelle dans le code html après ?
Bon en fait j'ai trouvé !! j'ai mis un onload appelant la fonction chargement(theid) sur le même principe...et pis j'ai rajouté un unchecked sur les 2 boutons radio pour qu'ils soient vierges au chargement de la page..nickel ! Smiley smile

Merci ! Smiley lol
Salut à tous !!

Je reviens sur ce sujet mais pour une autre question :

voici comment j'ai construit mon questionnaire (dernière version):


<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="nahy7hcfizvgcsn@jetable.net">
<meta name="generator" content="AceHTML 5 Freeware">
</head>
<body>
<html>
<body>
<head>
<script language="javascript">


function afficher(theid)
{
	
  document.getElementById(theid).style.display = 'block';
}

function cacher(theid)
{

document.getElementById(theid).style.display = 'none';

}
</script>
</head>
<form name="maform" >
<input type=radio name="monradio" value="oui" onclick="afficher('madiv')">OUI

<br> <div id="madiv" style="display: none">
<table border="1">
  <tr>
    
<td> <input type="checkbox" name="Q01a"> choix 1</td>
<td><input type="checkbox" name="Q01a"> choix 2</td>

<td>
     
     Commentaire: <input type=text name="Q01Field">
     
    </td>
  </tr>
</table>
 </div>
<input type=radio name="monradio" value="non" onclick="cacher('madiv')">NON

</form>
</body>
</html>


je souhaiterai que lorsque je clique sur le "Non" les champs cochés dans le "Oui" soit décochés et que le champ field vidé...idem qd je clique sur le "Oui", tout doit être remis à zéro.

Je me doute qu'il faille créer une fonction pour ça et la rattacher au "on click" des boutons radio "oui" et "non"...j'ai essayé mais cela ne fonctionne pas...notamment ds mon vrai questionnaire j'ai des séries de boutons radio rattachés au "Oui"....

Est ce que qqn peut me donner une piste sur mon exemple ?? Merci !!
Alors je vais te faire quelques remarques pour commencer ...

Il n'y a pas de <DOCTYPE ...> dans le bout de code que tu nous a donné, est-ce juste un copier-coller incomplet ou n'en as-tu pas ?
Si ta page est en XHTML, je pense que l'attribut "border" de <table> doit être déprécié.

Sinon pour ce que tu veux faire je ne pense pas que ce soit une bonne idée car si l'utilisateur clique sans faire exprès sur NON il va perdre toutes les données qu'il avait rentré.
Non c juste un copier-coller vite fait...et c pas du xml...

Tu as raison pour le coup du "pas fait exprès" ....du coup ma question c'est : est ce que s'il change d'avis càd commence à remplir la réponse oui et au final décide de mettre 'non" , les données cachées du oui vont être transmise ds la BDD lors de l'envoi du formulaire ? où est ce au niveau de la bdd qu'il faut mettre des contrôles ?
Les données seront bien transmises je pense mais un simple test PHP t'indiquera si c'était OUI ou NON qui était coché et donc quelles données doivent être prises en compte.
Sujet clos
Aller à