Formulaire a choix multiples

Résolu
_Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   -
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

A voir également:

4 réponses

Réponse 1 / 4
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
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é ?


0
Réponse 2 / 4
_Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
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>
0
_Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention  
 
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?
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746 > _Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
Regarde du côté de l'attribut onclick
0
Réponse 3 / 4
_Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
Pour commencer, places toujours le Javascript à la fin de ton document html ( juste avant le </body> )

Ensuite, mets des ID à tes éléments HTML pour pouvoir les cibler en Javascript

Et enfin, ton code ( à compléter pour les viandes), ressemblera à ça : 


<!DOCTYPE html>
<html>  
  <head>
    <title>COULEUR</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <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="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="legume" 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};
        
        // Listes de choix :
        const selLeg = document.querySelector("#legume-select");
        const selFruit = document.querySelector("#fruit-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);
            
            // a completer ici pour les viandes
          
            var prix = leg + fruit;
           inputResultat.value=prix;
         }
         
         //Fonction utilisée pour récupérer les valeurs des select 
        function prixSelect(elmSel){
          var choix = elmSel.value;
             var prix = legumes[choix];
          console.log(choix,prix);
          return prix;
        }
      </script>

  </body>
</html>
0
_Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention  
 
Bonjour, j'ai bien copié le code et j'ai essayé de rajouter une ligne pour les viandes cependant lorsque je clique cela n'affiche rien
De plus je ne comprends pas pourquoi parfois il y a marqué "légume" et parfois "Leg" et pourquoi parfois fruit a une majuscule et parfois un S 

 <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 selViandes = document.querySelector("#fruit-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 viandes = prixSelect(selviandes);
            // a completer ici pour les viandes
          
            var prix = leg + fruit + viandes;
           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>
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746 > _Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
Déjà.. je vois une première erreur ici : 
 const selViandes = document.querySelector("#fruit-select");

Je ne pense pas que la liste contenant les choix de viande ait pour ID "fruit-select"

ensuite.. tu as une autre erreur sur le nom de la variables viandes... (tu as utilisé deux fois la même variable.... ce n'est pas possible.. )
et donc, pour répondre à ta question

je ne comprends pas pourquoi parfois il y a marqué "légume" et parfois "Leg" et pourquoi parfois fruit a une majuscule et parfois un S

... pour avoir des noms de variables différents....
J'aurais pu utiliser toto, titi, tata ... mais bon.. j'ai cherché à avoir des noms de variables qui se rapprochent à ce qu'elle représentes....

Leg .. pour légumes

selMachin ... sel pour SELECT ( l'élément html qui contient tes listes )

Avec ou sans S .. juste pour les différencier... différencier les objets qui contiennent les prix .. de la variable qui contient LE prix correspondant au produit sélectionné dans les listes;.
0
_Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention  
 
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>
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746 > _Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
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..
0
Réponse 4 / 4
_Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
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
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746
 
1 - Tu peux mettre le résultat dans n'importe quel "element" html.
Par exemple, au lieu de le mettre dans un INPUT tu peux très bien le mettre dans un SPAN
par contre, pour les éléments html qui ne sont pas de type INPUT, TEXTAREA, SELECT .. il ne faut pas utiliser le .value mais le .innerHTML 

<div> Le prix est de <span id='id_du_span'></span> Euros </div>


document.getElementById('id_du_span').innerHTML = prix;


2 - https://www.w3schools.com/jsref/jsref_tofixed.asp
0
Taijin Messages postés 48 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention  
 
Pour votre première réponse je ne comprends pas ou je dois placer la deuxième ligne 
document.getElementById('id_du_span').innerHTML = prix;
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746 > Taijin Messages postés 48 Date d'inscription   Statut Membre Dernière intervention  
 
Dans le code JavaScript là où actuellement on remplit l'input résultat
0
_Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention   > jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention  
 
Excusez moi de revenir vous déranger mais j'ai une autre question:
Serait-il possible que quand je clique pour dérouler les différents choix de légume ou de fruits par exemple, que deux colonnes 's'affichent, une avec le nom du produit et une avec le prix?
Merci par avance
0
jordane45 Messages postés 38483 Date d'inscription   Statut Modérateur Dernière intervention   4 746 > _Antonin_ Messages postés 14 Date d'inscription   Statut Membre Dernière intervention  
 
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>
0

Discussions similaires

Paris multiple : explications de 2/3, 3/4, 2/4, 2/5, etc.
florent.c -
Aide -

85 réponses
Pari multiple 2/5 explications
alicia 29 -
cha -

14 réponses
Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire
azixe -
cs_Le Pivert -

1 réponse
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses