Mise à jour d'un prix en fonction des option choisie dans des liste déroulantes

**stefane321** · 20/07/2009, 04h15

Bonjour,

J'ai un client qui fait des chapeaux en fourrures il a différent modèle de chapeaux mais chaque modèle est disponible dans différent choix de fourrures, de tissus et de grandeur

Et le prix varie selon l'option choisie.

se que j'ai pensé faire est de mettre un prix de base avec option de base et dans ma liste déroulante a coté des option la différence de prix serait écrite (Ex.; Fourrures: Renard +50$ , loup marin +60$ ) (Ex.: Tissues: Molleton, +10$, cuir +25$) (Idem pour les grandeur)

Donc, faudrait que a chaque fois qu'il a sélectionné une option le prix du produit afficher soit modifié.

Je suis extrêtement débutant en javascipt/ajax alors svp pouvez vous me guider de façon précise voir même m'indiquer un bon tutoriel.

Merci!

**emmanuel.remy** · 20/07/2009, 10h54

Salut,

Voilà un exemple vite fait pour te donner une piste.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
  <script type="text/javascript" language="JavaScript">
    //juste pour la lisibilité de la suite
    function eid(id) {
      //renvoie l'élément de la page ayant l'id passé en paramètre
      return document.getElementById(id);
    }
    function recalcule() {
      //on récupère les différentes valeurs et options
      var prixBase = parseFloat(eid("prixBase").value);
      var optFourrure = parseFloat(eid("optionFourrure").value);
      var optTissus = parseFloat(eid("optionTissus").value);
      var optTaille = parseFloat(eid("optionTaille").value);
 
      //on affiche le total d'arès le calcul
      eid("total").innerHTML = prixBase +  optFourrure + optTissus + optTaille;
    }
  </script>
 
  </head>
  <body>
    <form>
      <div>Prix de base: <input type="text" name="prixBase" id="prixBase" value="300" onchange="recalcule();"/></div>
      <select name="optionFourrure" id="optionFourrure" onchange="recalcule();">
        <option value="0">Choisir une fourrure</option>
        <option value="50">Renard +50$</option>
        <option value="100">Castor + 100$</option>
        <option value="150">Pollux + 150$</option>
      </select> 
      <select name="optionTissus" id="optionTissus" onchange="recalcule();">
        <option value="0">Choisir un tissus</option>
        <option value="50">Cuir + 50$</option>
        <option value="100">Coton + 100$</option>
        <option value="150">laine + 150$</option>
      </select> 
      <select name="optionTaille" id="optionTaille" onchange="recalcule();">
        <option value="0">Choisir une taille</option>
        <option value="50">Normale + 50$</option>
        <option value="100">L + 100$</option>
        <option value="150">XL + 150$</option>
      </select> 
      <div> Le total: <span id="total"> 300 </span> €</div>
    </form>
  </body>
</html>

ERE

Mise à jour d'un prix en fonction des option choisie dans des liste déroulantes

JavaScript

Discussions similaires

Partager

Partager