Formulaire avec calcul automatique

Messages postés
4
Date d'inscription
dimanche 28 novembre 2010
Statut
Membre
Dernière intervention
2 décembre 2010
- - Dernière réponse : PetoleTeam
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
- 5 déc. 2010 à 09:40
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
<SELECT>
<OPTION VALUE= "rouge">ROUGE</OPTION>
<OPTION VALUE="vert">VERT</OPTION>
<OPTION VALUE="blanc">BLANC</OPTION>
</select>

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
Afficher la suite 

8 réponses

Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
1
0
Merci
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.
Commenter la réponse de ChasseurDeChimeres
Messages postés
4
Date d'inscription
dimanche 28 novembre 2010
Statut
Membre
Dernière intervention
2 décembre 2010
0
Merci
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
Commenter la réponse de Lucalivier
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
1
0
Merci
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 <select>:
<SELECT onchange="setColor()">

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 :
<script>
function setColor() {
 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";
}
}
</script>

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'
Commenter la réponse de ChasseurDeChimeres
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
1
0
Merci
oups petite autocorrection :
dans la balise <script> y faut préciser le type de language ( c'est plus propre) :
<script type="text/javascript">

et pour les div avec les messages ils faut les cacher avant de les faire apparaitre :


Voilà, voilà.
Commenter la réponse de ChasseurDeChimeres
Messages postés
4
Date d'inscription
dimanche 28 novembre 2010
Statut
Membre
Dernière intervention
2 décembre 2010
0
Merci
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 :

<SELECT onchange="setColor()">

<OPTION VALUE= "rouge">ROUGE</OPTION>
<OPTION VALUE="vert">VERT</OPTION>
<OPTION VALUE="blanc">BLANC</OPTION>
</select>

<script type="text/javascript">
function setColor() {
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";
}
}

</script>


rouge = 1000pts
Commenter la réponse de Lucalivier
Messages postés
292
Date d'inscription
mercredi 7 novembre 2007
Statut
Membre
Dernière intervention
15 janvier 2013
1
0
Merci
En effet pour pouvoir cibler un élément avec "getDocumentById()" il faut que tu est attribué un id à cet élément :
<select id="id_liste">

pareil pour ceux la :


Ce qui en gros te donne ça :
<SELECT id="id_liste" onchange="setColor()">
<OPTION VALUE= "rouge">ROUGE</OPTION>
<OPTION VALUE="vert">VERT</OPTION>
<OPTION VALUE="blanc">BLANC</OPTION>
</select>

<script type="text/javascript">
function setColor() {
switch(document.getElementById('id_liste').options[document.getElementById('id_liste').selectedIndex].value) {
case "vert" :
document.getElementById('div_verte').style.display = "block";
break;
case "rouge" :
document.getElementById('div_rouge').style.display = "block";
break;
case "blanc" :
document.getElementById('div_blanc').style.display = "block";
break;
}
}
</script>


rouge = 1000pts



 


vert = 1000pts



 


blanc = 1000pts



Commenter la réponse de ChasseurDeChimeres
Messages postés
4
Date d'inscription
dimanche 28 novembre 2010
Statut
Membre
Dernière intervention
2 décembre 2010
0
Merci
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 +
Commenter la réponse de Lucalivier
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
10
0
Merci
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
<select id = "S_COULEUR">
  <option value = "0">Choix Couleur</option>
  <option value = "1000">ROUGE</option>
  <option value = "2000">VERT</option>
  <option value = "3000">BLANC</option>
</select>
et
<select id = "S_FORME">
  <option value = "0">Choix Forme</option>
  <option value = "50">ROND</option>
  <option value = "60">TRIANGLE</option>
  <option value = "100">CARRE</option>
</select>

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)
Commenter la réponse de PetoleTeam