Formulaire a choix multiples [Résolu]

Signaler
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021
-
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021
-
Bonjour à tous, j'ai crée trois formulaires à choix multiples: dans le premier on doit sélectionner un légume, dans le deuxième un fruit et dans le troisième un type de viande
J'aimerais pouvoir associé un prix a chacun des produits et créer un bouton qui lorsque l'on appuie dessus donne le prix total du panier
Merci d'avance
Bonne journée

Voici le code html de mon formulaire

4 réponses

Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021
3 557
Bonjour,

Pour commencer, merci de poster ton code correctement sur le forum en utilisant les balises de code ( cela permet de faire des copier/coller si besoin )
Explications ( à lire entièrement !! ) disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

Ensuite, tu n'indiques pas dans quel langage tu veux faire ça...
En php ou en Javascript ?

Tu n'indiques pas non plus comment tu associe les produits à un prix ?

As tu besoin de conserver le "choix" fait dans les liste ? Si non, tu pourrais mettre le prix directement dans les "value" des options.
Si oui, il faut utiliser un array qui permettrait de faire le lien entre les prix et les produits..
Qu'as tu envisagé ?


Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021

Excusez moi, voici le code de ma page
<label for="pet-select">Choississez un légume</label>

        <select name="legume" id="legume-select">
            <option value="">--Choisissez--</option>
            <option value="carrote">Carotte</option>
            <option value="tomate">Tomate</option>
            <option value="salade">Salade</option>
            <option value="concombre">Concombre</option>
        </select>
        </br>
        </br> 
        </br>
        <label for="pet-select">Choississez un fruit</label>

        <select name="legume" id="legume-select">
            <option value="">--Choisissez--</option>
            <option value="pomme">Pomme</option>
            <option value="kiwi">Kiwi</option>
            <option value="poire">Poires</option>
            <option value="banane">Bananes</option>
        </select>
        </br>
        </br> 
        </br>
        <label for="pet-select">Choississez une viande</label>

        <select name="legume" id="legume-select">
            <option value="">--Choisissez--</option>
            <option value="carrote">Dinde</option>
            <option value="tomate">Poulet</option>
            <option value="salade">Boeuf</option>
        </select>


Ensuite je ne sais pas du tout dans quel langage je veux le faire, je suis preneur pour les deux, mais j'avais lu que le JavaScript serait plus adapté

Et pour les prix, j'aime bien l'idée du array sauf si cela est trop compliqué et dans ce cas là j'appliquerai directement les prix aux produits dans les value

Merci beaucoup pour votre réponse
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021
3 557
L'inconvenient du javascript, c'est que si tu changes de page... les données seront perdues...
Mais je suppose que ça n'a pas d'importance pour ce que tu veux réaliser.

    <label for="pet-select">Choississez un légume</label>

      <select name="legume" id="legume-select">
          <option value="">--Choisissez--</option>
          <option value="carrote">Carotte</option>
          <option value="tomate">Tomate</option>
          <option value="salade">Salade</option>
          <option value="concombre">Concombre</option>
      </select>
      </br>
      </br> 
      </br>
      <label for="pet-select">Choississez un fruit</label>

      <select name="legume" id="legume-select">
          <option value="">--Choisissez--</option>
          <option value="pomme">Pomme</option>
          <option value="kiwi">Kiwi</option>
          <option value="poire">Poires</option>
          <option value="banane">Bananes</option>
      </select>
      </br>
      

      <script>
      const legumes ={"carrote":0.90,"tomate":5.50,"salade":2.20,"concombre":1};
      
      var selLeg = document.querySelector("#legume-select");
      selLeg.addEventListener("change", prixLegume, false);
    
      function prixLegume(){
        var choix = selLeg.value;
        var prix = legumes[choix];
        console.log(prix);
      }
      </script>
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021
>
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021

Ce script me permet d'appliquer un prix a chaque produits mais comment puis-je faire un bouton qui lorsque l'on clique nous affiche une petit phrase avec le prix total?
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021
3 557 >
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021

Regarde du côté de l'attribut onclick
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021

Voila ce que j'ai rajouté

<label for="pet-select">Choississez un légume</label>

        <select name="legume" id="legume-select">
            <option value="">--Choisissez--</option>
            <option value="carrote">Carotte</option>
            <option value="tomate">Tomate</option>
            <option value="salade">Salade</option>
            <option value="concombre">Concombre</option>
        </select>
        </br>
        </br> 
        </br>
        <label for="pet-select">Choississez un fruit</label>

        <select name="legume" id="legume-select">
            <option value="">--Choisissez--</option>
            <option value="pomme">Pomme</option>
            <option value="kiwi">Kiwi</option>
            <option value="poire">Poires</option>
            <option value="banane">Bananes</option>
        </select>
        </br>
        </br> 
        </br>
        <label for="pet-select">Choississez une viande</label>

        <select name="legume" id="legume-select">
            <option value="">--Choisissez--</option>
            <option value="dinde">Dinde</option>
            <option value="poulet">Poulet</option>
            <option value="boeuf">Boeuf</option>
        </select>

        <script>
      const legumes ={"carrote":0.90,"tomate":5.50,"salade":2.20,"concombre":1, "pomme":1.20,"kiwi":2.36, "poires":1.95, "banane": 1.10, "dinde":10.25 , "poulet":5.60, "boeuf": 5.89};
      
      var selLeg = document.querySelector("#legume-select");
      selLeg.addEventListener("change", prixLegume, false);

      P.onclick = prixLegume;
    
      function prixLegume(){
        var choix = selLeg.value;
        var prix = legumes[choix];
        console.log(prix);
      }
      </script>

      <input type="button" value="Prix du panier">


Cependant je n'arrive pas a faire en sorte que le bouton fasse le calcul
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021
>
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021

J'ai essayé de modifier le code pour que tout corresponde mais cela ne fonctionne toujours pas

 <label for="pet-select">Choississez un légume</label>

      <select name="legumes" id="legume-select">
          <option value="">--Choisissez--</option>
          <option value="carrote">Carotte</option>
          <option value="tomate">Tomate</option>
          <option value="salade">Salade</option>
          <option value="concombre">Concombre</option>
      </select>
      </br>
      </br> 
      </br>
      <label for="pet-select">Choississez un fruit</label>

      <select name="fruits" id="fruit-select">
          <option value="">--Choisissez--</option>
          <option value="pomme">Pomme</option>
          <option value="kiwi">Kiwi</option>
          <option value="poire">Poires</option>
          <option value="banane">Bananes</option>
      </select>
      </br>
      </br> 
      </br>
      <label for="pet-select">Choississez une viande</label>

      <select name="viandes" id="viande-select">
          <option value="">--Choisissez--</option>
          <option value="dinde">Dinde</option>
          <option value="poulet">Poulet</option>
          <option value="boeuf">Boeuf</option>
      </select>

         
      <input type="button" value="Prix du panier" id="btn-valider">
      
      <input type="text" id="resultat" value=""/>
      
      <script>
      
        // Prix en fonction des produits
        const legumes ={"carrote":0.90,"tomate":5.50,"salade":2.20,"concombre":1, "pomme":1.20,"kiwi":2.36, "poires":1.95, "banane": 1.10, "dinde":10.25 , "poulet":5.60, "boeuf": 5.89};
        const fruits ={"pomme":0.90,"kiwi":5.50,"poire":2.20,"banane":1};
        const viandes ={"dinde":0.90,"poulet":5.50,"boeuf":2.20,};
        
        // Listes de choix :
        const selLeg = document.querySelector("#legume-select");
        const selFruit = document.querySelector("#fruit-select");
        const selViande = document.querySelector("#viande-select");
        
        // bouton pour valider
        var btnValider = document.querySelector("#btn-valider");
        
        // Input pour afficher le résultat
        var inputResultat = document.querySelector("#resultat");
        
        //On attache l'event CLICK sur le bouton
         btnValider.addEventListener("click", calculerPanier, false);
         
        
         //Fonction pour faire le calcul
         function calculerPanier(){
            var leg = prixSelect(selLeg);
            var fruit = prixSelect(selFruit);
            var viande = prixSelect(selViande);
            // a completer ici pour les viandes
          
            var prix = leg + fruit + viande;
           inputResultat.value=prix;
         }
         
         //Fonction utilisée pour récupérer les valeurs des select 
        function prixSelect(elmSel){
          var choix = elmSel.value;
          console.log(choix,prix);
          return prix;
        }
      </script>

  </body>
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021
3 557 >
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021

La variable prix a disparu de la fonction prixSelect

Il faut modifier la fonction comme ceci
        function prixSelect(elmSel){
          var choix = elmSel.value;
          // A corriger
          console.log(choix,prix);
          return prix;
        }


Edit: correction..
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021
>
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021

Cela me renvoi bien un prix mais pas le bon
J'ai deux questions:
1- Pourquoi dans la fonction prixSelect, ne met on que " var prix = legumes [choix] et pas deux autres lignes avec fruit et viande?

2- Comment pourrais-je faire pour insérer le prix dans une phrase, pour que quand on clique il y ai écrit "le prix total de votre panier est de" et que le prix s'affiche dans la phrase?

Merci beaucoup pour toutes vos réponses, cela m'aide beaucoup
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021
>
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021

Comme ceci?

function prixSelect(elmSel){
          var choix = elmSel.value;
          var prix = elmSel [choix];
          console.log(choix,prix);
          return prix;
        }
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021
3 557 >
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021

Désolé, j'avais oublié de prendre en compte les trois "types" de produit

Essaye avec ça
         //Fonction pour faire le calcul
         function calculerPanier(){
            var leg = prixSelect(selLeg,legumes);
            var fruit = prixSelect(selFruit,fruits);
            var viande = prixSelect(selViande,viandes);
            // a completer ici pour les viandes
          
            var prix = leg + fruit + viande;
            inputResultat.value=prix;
         }
         
         //Fonction utilisée pour récupérer les valeurs des select 
        function prixSelect(elmSel,produits){
          var choix = elmSel.value;
          var prix = produits[choix];
          console.log(choix,prix);
          return prix;
        }
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021

Cela fonctionne, merci beaucoup

J'ai maintenant deux questions

1- Comment pourrais-je inclure le prix dans une phrase?

2- Comment faire pour qu'il n'y ait que 2 chiffres après le point?


Merci d'avance
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021
3 557 >
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021

Pourquoi deux colonnes ?
Il suffit de faire
 <select name="legume" id="legume-select">
            <option value="">--Choisissez--</option>
            <option value="carrote">Carotte  1euros</option>
            <option value="tomate">Tomate  2.5 euros</option>
            <option value="salade">Salade  1.80 euros</option>
            <option value="concombre">Concombre 1.20 euros</option>
        </select>
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021
>
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021

Je voulais créer deux colonnes pour que les prix soit alignés et que ce soit plus propre
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021
3 557 >
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021

Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021
>
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021

Merci beaucoup pour votre réponse

J'ai une toute dernière question, y aurait-il un moyen que le prix s'actualise tout seul dès qu'on choisi un produit sans qu'on ai besoin de cliquer?
Messages postés
32947
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
13 juin 2021
3 557 >
Messages postés
14
Date d'inscription
lundi 24 mai 2021
Statut
Membre
Dernière intervention
12 juin 2021

Oui.
Il faut appeler la fonction sur l'EVENT CHANGE sur chaque liste déroulante
https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/change_event