Formulaire avec calcul automatique

Question

Bonjour je suis un petit nouveau et j'utilise joomla. J'essaie d'aider un pot à créer un formulaire du type select avec calcul automatique d'un systéme de points. exemple : plusieurs choix de couleur : rouge, vert,blanc etc J'aimerais que lorsque l'internaute choisi une couleur il y ait une case à coté avec une valeur correspondante exemple : Rouge 1000pts ou vert 2000pts deuxieme IDEM avec plusieurs choix de forme : rond,triangle, carré avec rond= 1000pts, triangle= 2000pts, carré=3000pts Au final j'aimerais avoir un calcul automatique de la premiere et de la deuxiéme valeur exemple final la personne choisi rouge ----> 1000 pts la personne choisi triangle--> 2000 pts calcul automatique = le résultat est : 3000 pts En espérant que quelqu un pourra m'aider ! cordialement lucalive

ChasseurDeChimeres · Answer

Salut;
Le mieux serait de jouer sur l'attribut css "display" (block/none) de divs contenant les messages que tu souhaites faire apparaitre.
Pour ça il faut récupérer la valeur du champs sélectionné en lançant une fonction sur l'événement "onchange" de ta liste puis choisir, à l'aide d'un switch, quelle div tu vas faire apparaitre : 
switch(document.getElementById('id_liste').options[document.getElementById('id_liste').selectedIndex].value) {
  case "vert" :
   document.getElementById('div_verte').style.display = "block";
  case "rouge" :
   document.getElementById('div_rouge').style.display = "block";
}
Après tu pourras faire ton addition toujours en récupérant la valeur de ces champs et en la verifiant toujours dans un switch:
var total = 0;
switch(document.getElementById('id_liste').options[document.getElementById('id_liste').selectedIndex].value) {
  case "vert" :
   total += 2000;
  case "rouge" :
   total += 1000;
}
switch(document.getElementById('id_liste2').options[document.getElementById('id_liste2').selectedIndex].value) {
  case "triangle" :
   total += 2000;
  case "carre" :
   total += 1000;
}

N'hésite pas à demander plus de précisions.

Lucalivier · Answer

Tout d'abord merci pour votre réponse rapide ChasseurDeChimeres.

Cependant g pas tout compris......J'ai essayé de rentrer le code que vous m'avez donné en html dans un article joomla et sa affiche le code tel quel.

Donc en fait je ne sais pas quoi faire de ce code ! Dois je le modifier, coment?, ou dois je faire plusieurs pages ?

Si vous pouviez me donner plus de précisions quand à ce que je dois faire avec, ça ne serais pas de refus.

Merci de votre aide, lucalivier

ChasseurDeChimeres · Answer

Re; Alors petite introduction à Javascript : Javascript te permets d'éxecuter des "fonctions" (ensembles d'instructions) lors d'événements déclenché par l'utilisateur. Dans ton cas l'événement sera la sélection d'une option de ta liste, pour ça tu vas rajouter un attribut à ta balise html ainsi lors de chaque changement de l'option sélectionnée le navigateur éxecutera la fonction "setColor", il te faut donc quelque part dans ta page définir cette fonction : Il ne te reste ensuite plus qu'a créer les div "div_verte" et "div_rouge" contenant les messages que tu veux afficher ex : Rouge = 1000pts Essaie déja ça et si ça marche on verra pour comptabilier les points. bon dev'

ChasseurDeChimeres · Answer

oups petite autocorrection : dans la balise

Lucalivier · Answer

Bonjour, j'ai essayé plein de truc mais au bout g rien ! juste une liste vide. En ajoutant les "options value" j'ai un défilant simple : voila mon dernier code : rouge = 1000pts

ChasseurDeChimeres · Answer

En effet pour pouvoir cibler un élément avec "getDocumentById()" il faut que tu est attribué un id à cet élément : rouge = 1000pts vert = 1000pts blanc = 1000pts

Lucalivier · Answer

c'est chaud !
c'est mieux mais c pas toujours ça !
la quand je passe dans ledéfilent de Blanc à rouge puis à vert j'obtiens :

rouge = 1000pts

vert = 1000pts

blanc = 1000pts

les 3 s'affichent alors que j'aimerais qu'il s'affichent uniquement dans une seule boite !

ex: si je suis dans mon défilent sur rouge dans ma boite il devrait y avoir écrit 1000 pts!

de plus j'aimerais que si je combine deux défilents il y ait une somme de faite (par exxemple 

défilent 1(balise select1) rouge=1000,vert=2000
défilent 2(balise select2): triangle=50, rond=60, carré=100

exemple :

dans mon défilent je choisi "rouge "
dans mon défilent je choisi "triangle"

dans ma boite : total = "1050"points

autre exemple 
dans mon défilent je choisi "vert"
dans mon défilent je choisi "carré"

total = 2100 points

En fait je c pas si c clair ce que je recherche ! ou si c pas facile !
en tout cas merci de votre aide
bonne nuit ! a +

PetoleTeam · Answer

Bonjour à tous, Pour mettre une fonction sur le onchange d'un SELECT il faut que le choix par défaut ne soit pas pertinent, donc il faut ajouter une OPTION de démarrage. De plus il faut utiliser la value de tes OPTIONs pour stocker la valeur de ces choix. Au final tu devrais avoir des SELECTs qui ressemble à cela et Voila pour le minimum au niveau de tes SELECTs les 3 s'affichent alors que j'aimerais qu'il s'affichent uniquement dans une seule boite ! Pourquoi dans ce cas ne pas utiliser un INPUT dans lequel tu afficherais la value du SELECT quand celui ci change, avec un INPUT pour chaque SELECT, exemple pour la couleur... pour la forme... et tant que l'on y est pour le total... Voila le décor est planté... Il te reste à faire une fonction qui sur le onchange des SELECTs remplira ces INPUTs et enchainera sur le calcul et affichage du total Voici un lien qui est à lire IMPERATIVEMENT, Listes de choix, pour presque tout savoir ;O)

Formulaire avec calcul automatique

8 réponses

Votre réponse

Discussions similaires