OVH Cloud OVH Cloud

Moduler l'affichage d'un formulaire selon les choix effectués

5 réponses
Avatar
Marc
Ma question est sans doute classique, mais j'ai pas trouvé de réponse à mon
problème en cherchant sur google group...

Dans une page mapage.htm,
j'ai un formulaire avec des boutons radio.
Je voudrais que si par exemple le oui est coché, les questions suivantes de
ce formulaire dépendent de ce choix.
J'ai pas trouvé comment rafrîchir un formulaire alors j'ai eu l'idée
suivante :
Dans le gestionnaire OnClick du bouton radio je rappelle la même page en
rajoutant à la fin de l'URL la réponse à la question. Comme ça je peux
moduler, j'ai qu'à décrypter l'URL pour savoir comment afficher le
formulaire.
Ex :
<input type="radio" name="MaQuestion" value="oui"
OnClick="location='mapage.htm?MaQuestion=Oui';"> Oui
<input type="radio" name="MaQuestion" value="non" CHECKED
OnClick="location='mapage.htm?MaQuestion=Non';">Non

Est-ce que je peux faire ça ? Je suis assez débutant en la matière...
Je précise que je ne peux utiliser que le javascript (pas de PHP...)
Merci à vous
Marc

5 réponses

Avatar
Olivier Miakinen

Dans une page mapage.htm,
j'ai un formulaire avec des boutons radio.
Je voudrais que si par exemple le oui est coché, les questions suivantes de
ce formulaire dépendent de ce choix.
J'ai pas trouvé comment rafraîchir un formulaire


Voici les deux moyens que j'emploie, selon le cas.

Soit je rajoute des éléments HTML dynamiquement au moyen de
createElement(), appendChild(), etc. :
http://fr.selfhtml.org/javascript/objets/node.htm

Soit je fais apparaître ou disparaître des éléments définis en dur, en
changeant la propriété de style.display :
http://fr.selfhtml.org/javascript/objets/style.htm

alors j'ai eu l'idée suivante :
Dans le gestionnaire OnClick du bouton radio


Il vaudrait mieux utiliser le gestionnaire onChange, car avec onClick tu
ne détecteras pas les choix faits au clavier.

je rappelle la même page en
rajoutant à la fin de l'URL la réponse à la question. Comme ça je peux
moduler, j'ai qu'à décrypter l'URL pour savoir comment afficher le
formulaire.
Ex :
<input type="radio" name="MaQuestion" value="oui"
OnClick="location='mapage.htm?MaQuestion=Oui';"> Oui
<input type="radio" name="MaQuestion" value="non" CHECKED
OnClick="location='mapage.htm?MaQuestion=Non';">Non

Est-ce que je peux faire ça ?


Oui, tu peux... si tu veux faire fuir tes utilisateurs qui devront
attendre un nouvel échange (requête + réponse) HTTP alors que tout peut
se faire en local. Pour peu que le réseau soit un peu chargé ou qu'ils
aient une liaison lente, tu multiplieras le temps d'attente par
plusieurs milliers.

Je précise que je ne peux utiliser que le javascript (pas de PHP...)


Ça tombe bien : seul le javascript peut faire des changements de façon
locale sur le client, sans devoir attendre une nouvelle requête au
serveur sur lequel se trouve l'interprèteur PHP.

Avatar
Marc
Merci pour ta réponse,
je vais étudier tout ça.
Mais j'ai une question :
si mapage.htm est déjà chargée, est-ce que le fait d'appeler
mapage.htm?Q1=1 effectue une nouvelle requête sur le serveur ?
J'espèrait que tout ça se ferait en local puisque la page est déjà
chargée...
Avatar
Olivier Miakinen

[...] j'ai une question :
si mapage.htm est déjà chargée, est-ce que le fait d'appeler
mapage.htm?Q1=1 effectue une nouvelle requête sur le serveur ?


Oui. D'ailleurs même appeler mapage.htm (sans paramètre) effectue une
nouvelle requête, tout comme appuyer sur le bouton « recharger la page »
de ton navigateur.

--
Olivier Miakinen
Non, monsieur le juge, je vous le jure : jamais je n'ai cité
Bruxelles dans ma signature.

Avatar
Marc
J'ai fais ce que tu m'a indiqué avec l'objet style.
Pb : le code suivant marche sur IE et pas sur FireFox, où à chaque fois, le
bas du formulaire semble redescendre d'une ligne...
Est-ce qu'il y a une solution ?
voilà le bout de code en question ...

//------------------------------------------------------------------------------
function ProprioOui()
//------------------------------------------------------------------------------
{
NonProprio.style.display="none";
OuiProprio.style.display="inline";
window.document.formdiag.Q3[1].checked=true;
}

//------------------------------------------------------------------------------
function ProprioNon()
//------------------------------------------------------------------------------
{
OuiProprio.style.display="none";
NonProprio.style.display="inline";
window.document.formdiag.Q2[1].checked=true;
}


.....

<tr>
<td height="25"><font size="2" face="Verdana, Arial,
Helvetica, sans-serif">
Etes-vous actuellement propri&eacute;taire de votre
r&eacute;sidence principale ?
</font></td>
<td><font size="2" face="Verdana, Arial, Helvetica,
sans-serif">
<input type="radio" name="Q1" value="1"
OnClick="ProprioOui()">Oui
<input type="radio" name="Q1" value="0"
OnClick="ProprioNon()">Non
</font></td>
</tr>


<!-- non propriétaire -->
<tr ID="NonProprio">
<td height="50"><font face="Verdana, Arial, Helvetica,
sans-serif" size="2">
Avez-vous &eacute;t&eacute; propri&eacute;taire de
votre r&eacute;sidence principale
au cours des deux ann&eacute;es
pr&eacute;c&eacute;dentes ?
</font></td>
<td><font size="2" face="Verdana, Arial, Helvetica,
sans-serif">
<input type="radio" name="Q2" value="1">Oui
<input type="radio" name="Q2" value="0" CHECKED>Non
</font></td>
</tr>

<!-- déjà propriétaire -->
<tr ID="OuiProprio">
<td height="50"><font size="2" face="Verdana, Arial,
Helvetica, sans-serif">
Projetez-vous de vendre votre r&eacute;sidence
principale suite &agrave; une mutation professionnelle ?
</font></td>
<td><font size="2" face="Verdana, Arial, Helvetica,
sans-serif">
<input type="radio" name="Q3" value="1">Oui
<input type="radio" name="Q3" value="0"
CHECKED>Non
</font></td>
</tr>
Avatar
Olivier Miakinen

J'ai fais ce que tu m'a indiqué avec l'objet style.
Pb : le code suivant marche sur IE et pas sur FireFox, où à chaque fois, le
bas du formulaire semble redescendre d'une ligne...
Est-ce qu'il y a une solution ?
voilà le bout de code en question ...

function ProprioOui()
{
NonProprio.style.display="none";


J'utiliserais plutôt document.getElementById("NonProprio") que
simplement NonProprio. À moins, bien évidemment, que quelque part
tu aies défini :

var NonProprio = document.getElementById("NonProprio");

OuiProprio.style.display="inline";


Même remarque sur le nom OuiProprio. Par ailleurs, les rangées de tables
(tr) sont censées être affichées en mode "block" ; si tu les passes en
"inline", je ne garantis pas que le résultat soit très heureux.

Je proposerais :
document.getElementById("OuiProprio").style.display = "block";

Ou plus simplement :
document.getElementById("OuiProprio").style.display = "";

<font size="2" face="Verdana, Arial, Helvetica, sans-serif">


L'élément <font> est complètement déprécié en faveur des CSS, mais ceci
est un autre débat, ainsi d'ailleurs que le fait de forcer une taille
deux fois plus grande que celle choisie par l'utilisateur, pour autre
chose qu'un titre.


Cordialement,
--
Olivier Miakinen
Non, monsieur le juge, je vous le jure : jamais je n'ai cité
Bruxelles dans ma signature.