Moduler l'affichage d'un formulaire selon les choix effectués
5 réponses
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
Cette action est irreversible, confirmez la suppression du commentaire ?
Signaler le commentaire
Veuillez sélectionner un problème
Nudité
Violence
Harcèlement
Fraude
Vente illégale
Discours haineux
Terrorisme
Autre
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.
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.
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.
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...
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...
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...
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.
[...] 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.
[...] 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.
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; }
<!-- non propriétaire --> <tr ID="NonProprio"> <td height="50"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"> Avez-vous été propriétaire de votre résidence principale au cours des deux années précé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ésidence principale suite à 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>
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;
}
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; }
<!-- non propriétaire --> <tr ID="NonProprio"> <td height="50"><font face="Verdana, Arial, Helvetica, sans-serif" size="2"> Avez-vous été propriétaire de votre résidence principale au cours des deux années précé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ésidence principale suite à 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>
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 = "";
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.
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 = "";
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.
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 = "";
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.