Afficher un texte selon le choix d'une case radio dans un formulaire

Afficher un texte selon le choix d'une case radio dans un formulaire - HTML/CSS - Programmation

Marsh Posté le 06-10-2004 à 16:11:03    

Bonjour,
 
Je suis en train de faire un formulaire, et dans celui-ci, il y a :
 
<input type="radio" name="formule" value="1">Formule 1
 
<input type="radio" name="formule" value="2">Formule 2
 
<input type="radio" name="formule" value="3">Formule 3
 
 
J'aimerai qu'un script (j'imagine tout bête) affiche une valeur texte dépendant du choix de la formulaire.
 
i.e.
 
quand on clique sur aucune case, il s'affiche
Prix : "Faites votre choix",
 
quand on clique sur la formule 1, il s'affiche
Prix : "Prix 1",
 
et ainsi de suite jusqu'à la formule 3.
 
 
 
Merci beaucoup pour votre aide :jap:

Reply

Marsh Posté le 06-10-2004 à 16:11:03   

Reply

Marsh Posté le 06-10-2004 à 16:28:16    

Le texte doit s'afficher dans un textBox ou directement sur la page ?

Reply

Marsh Posté le 06-10-2004 à 16:29:47    

Ca n'a pas trop d'importance, c'est jusque pour que le client soit bien conscient du prix en fonction de la formule qu'il choisit,
 
je dirais sous forme de textbox c bien ca en fait un champ variable comme les autres,
 
mais si c'est autrement c pas forcément très grave ;)

Reply

Marsh Posté le 06-10-2004 à 16:31:28    

Un script vite fais qui te donne le résultat que tu veux ... tu peux facilement changer l'affichage du texte par un document.write ou avec une méthode plus propre (create,append ...).
 

Code :
  1. <form action="toto" method="post">
  2. <input type="radio" name="formule" value="1">Formule 1
  3. <input type="radio" name="formule" value="2">Formule 2
  4. <input type="radio" name="formule" value="3">Formule 3
  5. <input type='text' name="texte" id="texte" value ="Faites votre choix" style="border:none;" disabled="disabled" />
  6. <input type="submit" name="go" value="Envoyer le formulaire" />
  7. </form>
  8. <script language='javascript'>
  9. function afficheprix()
  10. {
  11. var texte=document.getElementById("texte" );
  12. if (this.value=='1')
  13.    {
  14.    texte.value="prix1";
  15.    }
  16.    else if (this.value=='2')
  17.    {
  18.    texte.value="prix2";
  19.    }
  20.    else if (this.value=='3')
  21.    {
  22.    texte.value="prix3";
  23.    }
  24. }
  25. var radios=document.getElementsByName("formule" );
  26. for (var i=0;i<radios.length;i++)
  27. {
  28. radios[i].onclick = afficheprix;
  29. }
  30. </script>

Reply

Marsh Posté le 06-10-2004 à 16:34:04    

Laurent_g a écrit :

Bonjour,
 
Je suis en train de faire un formulaire, et dans celui-ci, il y a :
 
<input type="radio" name="formule" value="1">Formule 1
 
<input type="radio" name="formule" value="2">Formule 2
 
<input type="radio" name="formule" value="3">Formule 3
 
 
J'aimerai qu'un script (j'imagine tout bête) affiche une valeur texte dépendant du choix de la formulaire.
 
i.e.
 
quand on clique sur aucune case, il s'affiche
Prix : "Faites votre choix",
 
quand on clique sur la formule 1, il s'affiche
Prix : "Prix 1",
 
et ainsi de suite jusqu'à la formule 3.
 
 
 
Merci beaucoup pour votre aide :jap:


 
Ici, on ne donne pas de script, par contre, on peut t'expliquer comment le faire, mais pas sans un début de boulot de ta part.
 
pour modifier dynamiquement un textbox (un champ quoi) :
 
On détecte si le bouton est cliqué : onclick="fonction_javascript(argument exemple la valeur du bouton)"
 
Dans le JS :
 
function fonction_javascript(argument)
{
ici le corps de la fonction qui va traiter la demande faite par le onclik.
 
 
}
 
document.getElementById('id_balise_html').value renvoie la valeur d'un champ.
 
document.getElementById('id_balise_html').value = valeur;
 
"valeur" est affectée au champ.
 
Voilà, tu en sais assez pour démarrer.


Message édité par Hermes le Messager le 06-10-2004 à 16:38:42
Reply

Marsh Posté le 06-10-2004 à 16:35:25    

Azzazel a écrit :

Un script vite fais qui te donne le résultat que tu veux ... tu peux facilement changer l'affichage du texte par un document.write ou avec une méthode plus propre (create,append ...).
 
...


 
Ici, ON NE DONNE PAS de scripts. On encourage les gens à les FAIRE, sinon, comment justifieras-tu ton refus pour tous les autres qui demanderont la même chose ?
De plus, nous aussi nous aurons alors du mal à justifier notre refus.
 
Relis les rêgles.


Message édité par Hermes le Messager le 06-10-2004 à 16:35:50
Reply

Marsh Posté le 06-10-2004 à 16:39:14    

<input type="radio" name="formule" value="1" onChange="javascript:afficherLePrix();">
 
mettre le onChange sur toutes les balises radio
 
puis créer  
 
<input type="text" name="prix" value="Faites votre choix" style="border:none;" disabled="disabled>
 
puis le js
 
<script>
 
function afficherLePrix(){
 
  var i=0;
  while(!document.nomDuFormulaire.formule[i].checked) i++;
  if(i==0){
  document.nomDuFormulaire.prix.value = "Prix1";
  }
  else
  if(i==1){
    etc...
  }
}
 
</script>


Message édité par bolllo le 06-10-2004 à 17:04:06
Reply

Marsh Posté le 06-10-2004 à 16:41:02    


 
Pareil, explique le principe, mais ne donne pas tout de suite la soluce.

Reply

Marsh Posté le 06-10-2004 à 16:45:16    

oui, je sais :
 
"Donne un poisson à un homme il mangera une journée, Apprends lui à pêcher, il mangera toute sa vie..."

Reply

Marsh Posté le 06-10-2004 à 16:45:37    

Azzazel et bolllo > un grand merci  :jap:  :jap:  :jap:    
 
 
Hermes le Messager > Je comprend ton opinion.
 
 
Si l'on ne veut pas donner un script tout fait (quelques lignes qui prennent pas bp de temps à qqn qui s'y connait parfaitement), c'est déjà intéressant qu'on me donne des pistes :jap:
 
 
En revanche, par rapport à vous, je suis une quiche en JS (je sais faire qqs trucs mais ça reste très limité).
 
 
Donc si ça coute pas grand chose à qqn de m'aider et en tout cas qu'elle a la sympathie de le faire, ba c'est quand même pas si mal :)
 
 
Merci A+

Reply

Marsh Posté le 06-10-2004 à 16:45:37   

Reply

Marsh Posté le 06-10-2004 à 16:46:38    

bolllo a écrit :

oui, je sais :
 
"Donne un poisson à un homme il mangera une journée, Apprends lui à pêcher, il mangera toute sa vie..."


 
Sur des trucs compliqués je veux bien.
 
Mais avec les infos que vous m'avez donné, now, je saurais m'en resservir à l'avenir et j'ai bp bp bp plus de bases qu'avant pour cette fonction.
 
Donc c'est pas que du copier coller, je cherche aussi à savoir comment ça marche :)

Reply

Marsh Posté le 06-10-2004 à 16:51:22    

Je m'suis emporté ...
Bon ben tout pareil que Bolllo alors ;)

Reply

Marsh Posté le 06-10-2004 à 16:54:56    

pour info le "getElementsByName" ne marche pas sur tous les navigateurs (surtout pas les vieux type ns4.75) donc si tu as des normes de dev ou alors que tu vises le grand public, ce serait normalement à éviter.
 
Mais tu fais ce que tu veux :)

Reply

Marsh Posté le 06-10-2004 à 16:59:32    

Vu que ce n'est pas une fonction primordiale, si ça marche pas sur 2 % des browsers, on y accordera pas d'importance :)

Reply

Marsh Posté le 06-10-2004 à 17:01:01    

Enfin faudrait voir par rapport à ça :
 
1 84.09% Microsoft Internet Explorer  
2 76.66% MSIE 6  
3 8.32% Netscape  
4 8.16% Mozilla/5  
5 7.40% MSIE 5  
6 2.86% LinkWalker  
7 2.49% msnbot/0.3 (+http://search.msn.com/msnbot.htm)  
8 1.46% Googlebot/2.1 (+http://www.google.com/bot.html)  
9 0.32% Googlebot-Image/1.0  
10 0.16% Yahoo! Slurp  
11 0.15% NG/2.0  
12 0.11% Mozilla/4.0 (compatible;)  
13 0.06% Netcraft Web Server Survey)"  
14 0.05% MSProxy/2.0  
15 0.05% Mozilla/3.01 (compatible;)


Message édité par Laurent_g le 06-10-2004 à 17:01:10
Reply

Marsh Posté le 06-10-2004 à 17:01:07    

Par contre je retiens le coup de virer les bordures du champs texte (qui ne marchent pas non plus sous ns4.75).
 
J'avais chercher à l'époque sans succès.

Reply

Marsh Posté le 06-10-2004 à 17:02:01    

bolllo a écrit :

Par contre je retiens le coup de virer les bordures du champs texte (qui ne marchent pas non plus sous ns4.75).
 
J'avais chercher à l'époque sans succès.


 
Sur les Netscape répendus aujourd'hui, ça marche ?
 
La 4.75 est encore bp utilisée ?
 
 
Globalement y'a quand meme 90% des gens qui le verront donc bon :D (je sais que c'est pas carré pour un webmaster mais bon j'assume :D)


Message édité par Laurent_g le 06-10-2004 à 17:02:25
Reply

Marsh Posté le 06-10-2004 à 17:03:30    

Stats issues du'n site dont je m'occupe :
 

Citation :

1 91.65% Microsoft Internet Explorer  
2 82.56% MSIE 6  
3 8.13% MSIE 5  
4 5.30% Netscape  
5 4.51% Mozilla/5

6 2.26% msnbot/0.11 (+http://search.msn.com/msnbot.htm)  
7 0.71% MSIE 4  
8 0.41% Mozilla/3.01 (compatible;)  
9 0.32% Mozilla/4.0 (compatible;)  
10 0.27% Konqueror/3  
11 0.24% MSIE  
12 0.15% Yahoo! Slurp  
13 0.06% LinkWalker  
14 0.05% Mozilla/4  
15 0.05% CFNetwork/1.1


 
 
IE est quand même aps mal installé :D


Message édité par Laurent_g le 06-10-2004 à 17:05:33
Reply

Marsh Posté le 06-10-2004 à 17:05:22    

bolllo a écrit :

pour info le "getElementsByName" ne marche pas sur tous les navigateurs (surtout pas les vieux type ns4.75) donc si tu as des normes de dev ou alors que tu vises le grand public, ce serait normalement à éviter.
 
Mais tu fais ce que tu veux :)


 
Etant donné qu'un JS ne doit JAMAIS être indispensable au bon fonctionnement d'un site, rien à battre de NS 4...
 
Ensuite, la compatibilité 100% avec tous les browsers existants n'existe pas, et il vaut mieux regarder devant soi que derrière...
 
Un compromis IE 5+ Mozilla 1+/netscape 6+ opera 6+ est déjà très bien...  
 
Penser à netscape 4 c'est bien souvent produire un code pourri à souhait avec des &nbsp; dans le code + du js pourri qui finalement vont conduire à avoir des bugs avec les navigateurs les plus récents...  
Donc, mauvaise démarche.


Message édité par Hermes le Messager le 06-10-2004 à 17:15:37
Reply

Marsh Posté le 06-10-2004 à 17:05:28    

bah tu fais ce que tu veux mais ma méthode marche sur tous les navigateurs...
 
;)

Reply

Marsh Posté le 06-10-2004 à 17:07:58    

Hermes le Messager a écrit :

Etant donné qu'un JS ne soit JAMAIS être indispensable au bon fonctionnement d'un site, rien à battre de NS 4...


 
Hein ? t'as déjà développer des contrôles de champs sans JS ? Comment tu fais ? avec du VBScript ?
 
;)
 

Reply

Marsh Posté le 06-10-2004 à 17:08:28    

Bon en attendant puisqu'aime me faire flageller, voici la page en question ;)
 
http://www.eternal-concept.com/prev/booking.html
 
 
Alors soyez pas trop méchants hein, je suis autodidacte, ça me coute rien par rapport à si je le faisais faire et j'ai pas le budget pour (sinon je me ferais pas chier). Tant que le résultat reste potable, ça me va :D

Reply

Marsh Posté le 06-10-2004 à 17:08:52    

bolllo a écrit :

bah tu fais ce que tu veux mais ma méthode marche sur tous les navigateurs...
 
;)


 
ta méthode est pourrie de chez pourrie et ne peux même pas être appliquée en XHTML 1.1 par exemple, vu que form ne peut plus avoir de "name".
 
Tant que tu y es, assure la compatibilité avec IE 1 aussi...

Reply

Marsh Posté le 06-10-2004 à 17:09:14    

Pour les dates je me demande si c'est pas mieux de mettre un champ texte plutot que c'est boites merdiques, qu'est ce que vous en pensez ?

Reply

Marsh Posté le 06-10-2004 à 17:09:46    

Hermes j'ai l'impression que tu es encore plus acerbe que sur Blabla (enfin Discu :o) ;)

Reply

Marsh Posté le 06-10-2004 à 17:09:50    

bolllo a écrit :

Hein ? t'as déjà développer des contrôles de champs sans JS ? Comment tu fais ? avec du VBScript ?
 
;)


 
Le JS est une "commodité" qui permet par exemple à l'utilisateur de voir son addition en temps réel. Si tu t'appuies sur du JS pour controler quoi que ce soit, ton site est mal barré...

Reply

Marsh Posté le 06-10-2004 à 17:10:22    

Prochaine étape faire une .css et pas la merde que je fais :D
 
mais bon sans .css ça marche aussi bien faut dire :D


Message édité par Laurent_g le 06-10-2004 à 17:10:39
Reply

Marsh Posté le 06-10-2004 à 17:10:47    

Citation :

Le JS est une "commodité" qui permet par exemple à l'utilisateur de voir son addition en temps réel. Si tu t'appuies sur du JS pour controler quoi que ce soit, ton site est mal barré...


 
 
 
lol je vais en parler à mon CP il va être mort de rire...
 
Allez finito pour aujourd'hui, je rentre à la maison
 
Bonne soirée


Message édité par bolllo le 06-10-2004 à 17:11:44
Reply

Marsh Posté le 06-10-2004 à 17:11:03    

A+

Reply

Marsh Posté le 06-10-2004 à 17:11:34    

bolllo a écrit :

lol je vais en parler à mon CP il va être mort de rire...
 
Allez finito pour aujourd'hui, je rentre à la maison
 
Bonne soirée


 
Dis lui de venir ici à ton CP de merde, on va lui faire sa fête...  :o

Reply

Marsh Posté le 06-10-2004 à 17:12:12    

on lui diras

Reply

Marsh Posté le 06-10-2004 à 17:14:19    

Les scripts il faut les mettre obligatoirement avant le [body] ou on s'en branle (i.e. ça change rien) ?


Message édité par Laurent_g le 06-10-2004 à 17:14:34
Reply

Marsh Posté le 06-10-2004 à 17:14:56    

Laurent_g a écrit :

Les scripts il faut les mettre obligatoirement avant le [body] ou on s'en branle (i.e. ça change rien) ?


 
Tu les mets entre <head> et </head>

Reply

Marsh Posté le 06-10-2004 à 17:16:15    

Hermes le Messager a écrit :

Tu les mets entre <head> et </head>


oui je sais (donc pas entre body et body) mais en pratique ça change quoi ? (sauf pour l'aspect pratique, la beauté et la convention :D)
 
non parce que là il y est pas encore et ça marche :D

Reply

Marsh Posté le 06-10-2004 à 17:18:22    

N'empeche qu'est ce que c chiant ces formulaires [:wam]
 
 
Là je fais la fonction qui vérifie que les champs obligatoires soient remplis quand on clique sur envoyer (je devrais y arriver)
( la page d'erreur de formmail est pourrie  :kaola: )
 
 
puis le script qui vérifie que l'e-mail est pas pourri (ça c'est du pompage intégral merci javascript.com, enfin on adapte tjs un peu :o)
 
 
 
tiens j'aimerai faire un script qui vérifie, pour le choix de la formule 2, que les deux DJs ne soient pas identiques, comment pourrais-je faire ?


Message édité par Laurent_g le 06-10-2004 à 17:19:23
Reply

Marsh Posté le 06-10-2004 à 17:20:11    

Pour le script qui vérifie les champs, je passe par un truc comme ça (ça en est un que j'ai fait pour un autre site) :
 
 

Code :
  1. <script language="javascript">
  2. function verif()
  3. {
  4. var realname=document.commande.realname.value;
  5. var Prenom=document.commande.Prenom.value;
  6. var email=document.commande.email.value;
  7. var References=document.commande.References.value;
  8. var Quantite=document.commande.Quantite.value;
  9. var Retrait=document.commande.Retrait.value;
  10. var Engagement=document.commande.Engagement.value;
  11. if(realname=="" ){alert('Veuillez entrer votre nom svp');
  12. document.commande.realname.focus();return (false);}
  13. if(Prenom=="" ){alert('Veuillez entrer votre prenom svp');
  14. document.commande.Prenom.focus();return (false);}
  15. if(email=="" ){alert('Veuillez indiquez votre adresse e-mail svp');
  16. document.commande.email.focus();return (false);}
  17. if ((email.indexOf('@',0)==-1) || (email.indexOf('.',0)==-1))  {alert("Adresse e-mail incorrecte" );
  18. document.commande.email.focus();return (false);}
  19. if(References=="" ){alert('Veuillez indiquez les références précises des photos que vous souhaitez commander svp');
  20. document.commande.References.focus();return (false);}
  21. if(Quantite=="" ){alert('Veuillez indiquez le nombre de photos commandées svp');
  22. document.commande.Quantite.focus();return (false);}
  23. if(Retrait=="choisir le lieu" ){alert('Veuillez choisir le lieu de réception des photos svp');
  24. document.commande.Retrait.focus();return (false);}
  25. if(commande.Engagement.checked == false ){alert("Conformément à la loi (Article 9 du Code Civil - Jurisprudence), vous devez respecter le droit à l'image et au respect de la vie privée." );
  26. document.commande.Engagement.focus();return (false);}
  27. return(true)
  28. };
  29. </script>


Message édité par Laurent_g le 06-10-2004 à 18:11:33
Reply

Marsh Posté le 06-10-2004 à 17:39:03    

bolllo a écrit :

Hein ? t'as déjà développer des contrôles de champs sans JS ? Comment tu fais ? avec du VBScript ?


Elle veut dire quoi cette phrase?
Tu parles du contrôle de la validité des saisies?
 
(PS: pense que le JS se désactive très facilement avec les navigateurs modernes (Moz/Fox/Opera/Surcouches IE) et que de plus en plus de gens utilisent cette possibilité histoire d'être débarassés des trucs lourds [:cupra] )
(sinon je suis tout d'accord avec Hermes, par le passé j'ai développé un site utilisant énormément le JS, je m'en mords les doigts)
(en fait sur ce site j'avais fait toutes les conneries possibles et imaginables je pense [:totoz] )
(sauf l'utilisation des ActiveX et le test de l'user agent [:cupra] )
 
edit: LG, utilise la balise [code] histoire de mettre tes trucs en forme parce que là c'est illisible [:totoz]


Message édité par masklinn le 06-10-2004 à 17:42:59

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 06-10-2004 à 17:49:31    

bolllo a écrit :


 
lol je vais en parler à mon CP il va être mort de rire...


 
Tant mieux, comme ça on ne sera pas les seuls à rire.
 
Des contrôles en JS, c'est suicidaire s'il n'y a rien de fait côté serveur. Les contrôles en JS ne sont là que pour le confort pour éviter le rechargement de la page après son refus par le serveur, mais comme dit précédemment ils ne doivent pas être indispensables.


---------------
mes programmes ·· les voitures dans les films ·· apprenez à écrire
Reply

Marsh Posté le 06-10-2004 à 17:49:34    

Tu peux essayer aussi de regrouper tes alertes dans un seul et de garder le focus pour la première ou la derniere erreur. ça permettra d'avoir une vision syntetique des erreurs plutôt que de revalider à chaque fois ...
Sinon pour les 2 DJ il suffit de comparer les valeurs sur le onchange non ?

Reply

Marsh Posté le 06-10-2004 à 18:13:43    

Masklinn a écrit :


edit: LG, utilise la balise [code] histoire de mettre tes trucs en forme parce que là c'est illisible [:totoz]


 
édité ;)
 
Mais pour ce que j'ai mis c'est juste pour donner une idée de comment c'est fait ;) à priori ça doit marcher (si ça a marché avant y'a pas de raison, par contre y'a ptet des trucs à améliorer sans tout changer).
 
 
Mon problème now c'est comment dans le script de vérification "on submit", je peux lui demander de vérifier que pour la formule 2 (c'est ici), le client n'ait pas choisi deux djs identique :jap:


Message édité par Laurent_g le 06-10-2004 à 18:16:49
Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed