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 -
jordane45 Messages postés 38483 Date d'inscription Statut Modérateur Dernière intervention -
A voir également:
- Html formulaire choix multiple
- Whatsapp formulaire opposition - Guide
- Excel cellule choix multiple - Guide
- Formulaire de réclamation facebook - Guide
- Editeur html - Télécharger - HTML
- Formulaire de reclamation instagram - Guide
4 réponses
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é ?
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é ?
Excusez moi, voici le code de ma page
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
<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
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.
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>
Voila ce que j'ai rajouté
Cependant je n'arrive pas a faire en sorte que le bouton fasse le calcul
<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
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 :
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>
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
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>
Déjà.. je vois une première erreur ici :
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
... 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;.
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;.
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>
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
2 - https://www.w3schools.com/jsref/jsref_tofixed.asp
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
Pourquoi deux colonnes ?
Il suffit de faire
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>