Des options cac hées dans un formulaire
floppydisck
-
floppydisck -
floppydisck -
Bonsoir,
j'ai crée un formulaire dans lequel il y a plusieurs champs, mais voilà l'un d'eux c'est "adresse mail"
dans le cas où mon visiteur a plusieures adresses, je voudrais bien qu'il les affiche aussi, mais je ne veux pas que les champs où vont s'écrire les adresse soient visibles dès le debut.
normalement voilà à quoi ça doit ressembler
nom : (zone de saisie)
prenom : (zone de saisie)
adresse électronique : (zone de saisie) [bouton "une autre adresse?"]
si ce bouton est cliqué un autre champs apparaît
nom : (zone de saisie)
prenom : (zone de saisie)
adresse électronique : (zone de saisie)
deuxieme adresse électronique : (zone de saisie) [bouton "une autre adresse?"]
et encore une fois
nom : (zone de saisie)
prenom : (zone de saisie)
adresse électronique : (zone de saisie)
deuxieme adresse électronique : (zone de saisie)
troisieme adresse électronique : (zone de saisie)
donc au maximum trois adresses.
j'ai vu que ça devait se faire avec du javascript, mais je narrive pas à trouver comment svp un peu d'aide ne serait pas de refus.
j'ai crée un formulaire dans lequel il y a plusieurs champs, mais voilà l'un d'eux c'est "adresse mail"
dans le cas où mon visiteur a plusieures adresses, je voudrais bien qu'il les affiche aussi, mais je ne veux pas que les champs où vont s'écrire les adresse soient visibles dès le debut.
normalement voilà à quoi ça doit ressembler
nom : (zone de saisie)
prenom : (zone de saisie)
adresse électronique : (zone de saisie) [bouton "une autre adresse?"]
si ce bouton est cliqué un autre champs apparaît
nom : (zone de saisie)
prenom : (zone de saisie)
adresse électronique : (zone de saisie)
deuxieme adresse électronique : (zone de saisie) [bouton "une autre adresse?"]
et encore une fois
nom : (zone de saisie)
prenom : (zone de saisie)
adresse électronique : (zone de saisie)
deuxieme adresse électronique : (zone de saisie)
troisieme adresse électronique : (zone de saisie)
donc au maximum trois adresses.
j'ai vu que ça devait se faire avec du javascript, mais je narrive pas à trouver comment svp un peu d'aide ne serait pas de refus.
A voir également:
- Des options cac hées dans un formulaire
- Whatsapp formulaire opposition - Guide
- Formulaire de réclamation facebook compte désactivé - Guide
- Formulaire de reclamation instagram - Guide
- Windows 11 afficher d'autres options - Guide
- Non envoyé voir les options ✓ - Forum Mobile
5 réponses
Bonjour.
Un "bête" Javascript qui rend visible (ou pas) les champs devrait fonctionner...
Un petit exemple vite fait :
1. Le CSS : on rend invisibles les paragraphes qui contiendront les champs email2 et email3.
2. La fonction JavaScript : quand on l'appelle (avec un id en paramètre), elle rend visible/invisible suivant l'état précédent.
Le formulaire lui-même : Je pense qu'il se passe de commentaires...
Les améliorations à envisager :
- Penser à ceux qui n'ont pas le JS. Il faudrait laisser les champs visibles par défaut, et créer une fonction JS qui les rende invisible (comme ça, si le JS est désactivé, on peut quand-même voir les champs)
- Pour le moment, la fonction gère les élements inline. Il faudrait qu'elle gère aussi les block, et surtout qu'elle revienne au bon état.
Un "bête" Javascript qui rend visible (ou pas) les champs devrait fonctionner...
Un petit exemple vite fait :
1. Le CSS : on rend invisibles les paragraphes qui contiendront les champs email2 et email3.
<html>
<head>
<style>
#p_email2, #p_email3 {
display:none;
}
</style>
2. La fonction JavaScript : quand on l'appelle (avec un id en paramètre), elle rend visible/invisible suivant l'état précédent.
<script language="JavaScript">
function Switcher(id) {
switch (document.getElementById(id).style.display) {
case 'inline':
document.getElementById(id).style.display ='none';
break;
default :
document.getElementById(id).style.display = 'inline';
}
}
</script>
Le formulaire lui-même : Je pense qu'il se passe de commentaires...
<form name="post">
<fieldset>
<legend>Votre (ou vos) emails</legend>
<p><label for="email1">email</label><input name="email1" type="text" value="" /><label for="chk_em2">email2 ?</label><input name="chk_em2" type="checkbox" value="" onclick="Switcher('p_email2')" /></p>
<p id="p_email2"><label for="email2">email</label><input name="email2" type="text" value="" /><label for="chk_em2">email3 ?</label><input name="chk_em3" type="checkbox" value="" onclick="Switcher()" /></p>
</fieldset>
</form>
Les améliorations à envisager :
- Penser à ceux qui n'ont pas le JS. Il faudrait laisser les champs visibles par défaut, et créer une fonction JS qui les rende invisible (comme ça, si le JS est désactivé, on peut quand-même voir les champs)
- Pour le moment, la fonction gère les élements inline. Il faudrait qu'elle gère aussi les block, et surtout qu'elle revienne au bon état.
Bonjour,
bon, et bien, il se peut bien que ce soit un script "tout bête" j'y avais pensé mais le probleme est que je ne connais absolument rien au language javascript et c'est pour celà que je tribuche un peu sur ce que tu viens de me donner.
si j'ai bien compris, cette fonction permet de changer l'état "visible/invisible" mais comment puis-je faire pour que le bouton "autre adresse?" disparaisse une fois cliqué dessus?
Merci beaucoup pour ta reponse ça m'aide beaucoup et je crois que je vais me mettre à apprendre le javascript.
Pour les personnes qui ont désactivé le JS, est-ce que c'est raisonable de mettre un petit message d'information pour dire que le js doit être activé?
bon, et bien, il se peut bien que ce soit un script "tout bête" j'y avais pensé mais le probleme est que je ne connais absolument rien au language javascript et c'est pour celà que je tribuche un peu sur ce que tu viens de me donner.
si j'ai bien compris, cette fonction permet de changer l'état "visible/invisible" mais comment puis-je faire pour que le bouton "autre adresse?" disparaisse une fois cliqué dessus?
Merci beaucoup pour ta reponse ça m'aide beaucoup et je crois que je vais me mettre à apprendre le javascript.
Pour les personnes qui ont désactivé le JS, est-ce que c'est raisonable de mettre un petit message d'information pour dire que le js doit être activé?
si j'ai bien compris, cette fonction permet de changer l'état "visible/invisible" mais comment puis-je faire pour que le bouton "autre adresse?" disparaisse une fois cliqué dessus?
Voilà une fonction qui te permettra de passer le paragraphe en visible et le bouton en caché :
Et le code html :
Au clic, la fonction AfficherChamp va donc afficher le paragraphe p_email2, et cacher la checkbox correspondante...
Pour les personnes qui ont désactivé le JS, est-ce que c'est raisonable de mettre un petit message d'information pour dire que le js doit être activé?
Ca dépend :
- Type de site : un site commercial doit être accessible par le maximum de monde. Pour un site perso, c'est moins grave.
- Public visé : le JS est maintenant largement supporté. Ceux qui peuvent être gênés sont surtout les handicapés (qui utilisent des navigateurs particuliers), les "geeks" (qui bloquent le JS dans leur navigateur, ou utilisent un navigateur "exotique"), éventuellement certaines entreprises (proxy, ...). De même, le message (et les éventuelles instructions pour activer le JS) ne sera pas forcément compris par le "tout-venant"...
- Utilité du(des) champ(s) caché(s). Il faut éviter de rendre inaccessible un champ indispensable. S'il s'agit juste d'un champ optionnel, c'est moins grave...
Voilà une fonction qui te permettra de passer le paragraphe en visible et le bouton en caché :
<script language="JavaScript">
function Switcher(id) {
...
}
function AfficherChamp(id) {
parag = "p_"+id;
check = "chk_"+id;
Switcher(parag);
Switcher(check);
}
</script>
Et le code html :
<p><label for="email1">email</label><input name="email1" type="text" value="" />
<span id="chk_email2" style="display:inline"><label for="chk_em2">email2 ?</label><input name="chk_email2" type="checkbox" value="" onclick="AfficherChamp('email2')" /></span></p>
Au clic, la fonction AfficherChamp va donc afficher le paragraphe p_email2, et cacher la checkbox correspondante...
Pour les personnes qui ont désactivé le JS, est-ce que c'est raisonable de mettre un petit message d'information pour dire que le js doit être activé?
Ca dépend :
- Type de site : un site commercial doit être accessible par le maximum de monde. Pour un site perso, c'est moins grave.
- Public visé : le JS est maintenant largement supporté. Ceux qui peuvent être gênés sont surtout les handicapés (qui utilisent des navigateurs particuliers), les "geeks" (qui bloquent le JS dans leur navigateur, ou utilisent un navigateur "exotique"), éventuellement certaines entreprises (proxy, ...). De même, le message (et les éventuelles instructions pour activer le JS) ne sera pas forcément compris par le "tout-venant"...
- Utilité du(des) champ(s) caché(s). Il faut éviter de rendre inaccessible un champ indispensable. S'il s'agit juste d'un champ optionnel, c'est moins grave...
Merci beaucoup pour toutes ces explications, je suis vraiment touchée par tes réponses, merci pour ton temps et je m'excuse pour le dérangement que j'aurais pu te causer.
Juste une question, un peu hors sujet, j'ai appris le langage PHP en trois semaines et je pense que je maîtrise assez bien les bases, je me demande est-ce que le javascript est aussi accessible?
Juste une question, un peu hors sujet, j'ai appris le langage PHP en trois semaines et je pense que je maîtrise assez bien les bases, je me demande est-ce que le javascript est aussi accessible?
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Je vais vous gêner encore un peu :$
voilà, j'ai appliqué le script à mon site, tout va bien , sauf que la case "une autre adresse" ne disparait pas au premier clic c'est en cliquant une deuxième fois que ça disparait.
peut être bien que c'est moi qui ai fait une grossière bêtise avec le code gentiment proposé par Macgawel, est-ce que quelqu'un pourrait me guider sur ce que j'aurais pu faire de mal?
voilà, j'ai appliqué le script à mon site, tout va bien , sauf que la case "une autre adresse" ne disparait pas au premier clic c'est en cliquant une deuxième fois que ça disparait.
peut être bien que c'est moi qui ai fait une grossière bêtise avec le code gentiment proposé par Macgawel, est-ce que quelqu'un pourrait me guider sur ce que j'aurais pu faire de mal?
