Citation :
<html>
<head>
<title>Test d'un formulaire</title>
<style type="text/css">
@import url(formulaire.css);
</style>
<script language="javascript">
/* La fonction "counter" prend 2 paramêtres:
- l'id du <div> suivant le checkbox appellant la fonction (cet id étant composé d'une partie en lettres et d'une partie en chiffres, les deux étant séparée par un underscore)
- l'id du premier <input> de ce <div> (cet id étant composé uniquement d'un chiffre) */
/* Lors de l'appel de la fonction, le premier paramêtre (id) doit être écrit entre guillemets simples, le second doit être écrit SANS guillements */
/* Les 2 paramêtres étant séparés par une virgule */
function Counter(id, nbr1){
/* Lors du clic sur le checkbox, si le <div> est fermé, on l'ouvre et on lui donne une taille "auto" */
if (document.getElementById(id).style.display =='none'){
document.getElementById(id).style.display='block'; document.getElementById(id).style.height='auto';
}
/* Sinon (si le <div> est ouvert), on le ferme et on lui attribue une taille nulle */
else{
document.getElementById(id).style.display='none'; document.getElementById(id).style.height='0';
}
/* variable "taille" determinant le nombre de <div> dans le <div> ayant l'id entré en paramêtre */
var taille = document.getElementById(id).getElementsByTagName('div').length;
/* variable "taille2" déterminant le numéro du dernier <input> présent dans le <div> ayant l'id entré en paramêtre */
var taille2 = nbr1 + document.getElementById(id).getElementsByTagName('input').length -2;
var i;
/* boucle permettant la réinitialisation des tous les <input> présent dans le <div> ayant l'id entré en paramêtre */
/* Cela inclut les <input> présent dans des <div> inclus dans le <div> ayant l'id entré en paramêtre */
for (i=nbr1-1; i<=taille2; i++){
//Pour débugger: document.write(formulaire.elements[i] + "<br>" );
formulaire.elements[i].checked="";
formulaire.elements[i].value="";
//Pour débugger: window.alert ("123" );
}
/* Découpage de l'id en 2 parties */
var id_explode = id.split("_" );
/* La partie "id_prefixe" correspondant à la partie en lettres de l'id */
var id_prefixe = id_explode[0];
/* La partie "id_suffixe" correspondant à la partie en chiffre de l'id */
var id_suffixe = id_explode[1];
id_suffixe = parseInt (id_suffixe);
var j;
var a=id_suffixe+1;
var b=id_suffixe+taille;
//Pour débugger: window.alert ("j="+a+" j<="+b);
/* Boucle permettant de faire en sorte que les <div> présent dans le <div> ayant l'id entré en paramêtre soient redéfinis comme "invisible" */
for (j=id_suffixe+1; j<=id_suffixe+taille; j++){
document.getElementById(id_prefixe + "_" + j).style.display='none';
document.getElementById(id_prefixe + "_" + j).style.height='0';
}
}
</script>
</head>
<body>
<h1> Mon Formulaire </h1>
<div class="visiblea">
<form id="formulaire "name="formulaire" method="post" action="result.html">
Vous avez une voiture:<INPUT id="1" type="checkbox" value="voiture" OnClick="Counter('invisiblea_1', 2);">
<div id="invisiblea_1" style="display:none">
Renault:<INPUT id="2" type="checkbox" value="renault"><br />
Ford:<INPUT id="3" type="checkbox" value="ford"><br />
Peugeot:<INPUT id="4" type="checkbox" value="peugeot"><br />
Autres:<INPUT id="5" type="checkbox" value="autres" OnClick="Counter('invisiblea_2', 6);"><br />
<div id="invisiblea_2" style="display:none">
Ferrari:<INPUT id="6" type="checkbox" id="test" value="ferrari"><br />
BMW:<INPUT id="7" type="checkbox" value="bmw"><br />
Porsche:<INPUT id="8" type="checkbox" value="porsche" OnClick="Counter('invisiblea_3', 9);"><br />
<div id="invisiblea_3" style="display:none">
modele1:<INPUT id="9" type="checkbox" value="modele1"><br />
modele2:<INPUT id="10" type="checkbox" value="modele2"><br />
modele3:<INPUT id="11" type="checkbox" value="modele3"><br />
Autre modele:<INPUT id="12" type="textarea" value=""><br />
</div><br />
</div><br />
</div>
<br />
</div>
<div class="visibleb">
Voyage à l'étranger:<INPUT id="13" type="checkbox" value="voyage" OnClick="Counter('invisibleb_1', 14);">
<div id="invisibleb_1" style="display:none">
Italie:<INPUT id="14" type="checkbox" value="italie"><br />
Irlande:<INPUT id="15" type="checkbox" value="irlande"><br />
Angleterre:<INPUT id="16" type="checkbox" value="angleterre"><br />
Autres:<INPUT id="17" type="checkbox" value="autres" OnClick="Counter('invisibleb_2', 18);"><br />
<div id="invisibleb_2" style="display:none">
Portugal:<INPUT id="18" type="checkbox" id="test" value="portugal"OnClick="Counter('invisibleb_3', 19);"><br />
<div id="invisibleb_3" style="display:none">
Lisbone:<INPUT id="19" type="checkbox" value="madrid"><br />
Ville2:<INPUT id="20" type="checkbox" value="barcelone">
</div>
Etats-unis:<INPUT id="21" type="checkbox" value="usa"><br />
Espagne:<INPUT id="22" type="checkbox" value="espagne" OnClick="Counter('invisibleb_4', 23);"><br />
<div id="invisibleb_4" style="display:none">
Madrid:<INPUT id="23" type="checkbox" value="madrid"><br />
Barcelone:<INPUT id="24" type="checkbox" value="barcelone"><br />
Valence:<INPUT id="25" type="checkbox" value="valence"><br />
Autre ville:<INPUT id="26" type="textarea" value=""><br />
</div><br />
</div><br />
</div><br />
</div>
<div><br />
<INPUT id="27" type="submit" value="envoyer" name="envoyer" align="center">
</form>
</div>
</body>
</html>
|
