Récupérer les valeurs de menus déroulants dans un champ (Total) [Résolu/Fermé]

Signaler
Messages postés
558
Date d'inscription
mercredi 11 septembre 2013
Statut
Membre
Dernière intervention
8 août 2018
-
Messages postés
21123
Date d'inscription
mardi 27 juin 2006
Statut
Contributeur sécurité
Dernière intervention
22 juin 2016
-
Bonjour,

j'aurai souhaité obtenir le total de plusieurs champs à choix multiples.

Voici un exemple :

Premier Menu déroulant = [Liste de choix] Casquette à 12,00 €, Casquette à 15,00 €

Seconde Menu déroulant = [Liste de choix] Chemise à 10,00 €, Chemise à 20,00 €

Champ [Total] = (Afficherait le montant total par rapport aux choix sélectionnés).

Y aurait-il une âme charitable pour me faire un tout petit bout de code (HTML5), afin que je puisse avoir une première base ?
Que par la suite, je peaufinerais afin de me faire la main.

D'avance merci :)

Très belle journée à tous.

3 réponses

Messages postés
21123
Date d'inscription
mardi 27 juin 2006
Statut
Contributeur sécurité
Dernière intervention
22 juin 2016
1 290
Salut,

Tu fais le "formulaire" en HTML avec 2 combobox, puis tu fais le calcul en Javascript.

Tu sais faire le HTML?
Messages postés
558
Date d'inscription
mercredi 11 septembre 2013
Statut
Membre
Dernière intervention
8 août 2018
43
Salut,
oui, les formulaires aucun souci.
J'ai quelques notions en HTML, mais c'est au niveau du Javascript que ça coince...

EDIT : C'est surtout pour cela que je cherchais avant tout un code d'exemple, afin de comprendre le fonctionnement.

Merci
Messages postés
21123
Date d'inscription
mardi 27 juin 2006
Statut
Contributeur sécurité
Dernière intervention
22 juin 2016
1 290
OK.

Copie colle ton code HTML.

A+
Messages postés
558
Date d'inscription
mercredi 11 septembre 2013
Statut
Membre
Dernière intervention
8 août 2018
43
Quelque chose du genre...
Ici, je ne l'ai pas fait en choix multiples, mais en cases à cocher.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>

<body>

<form method="post" action="ton_action">
   <p>Faites votre Choix :<br>
       <input type="checkbox" name="casq_10" />Casquette à 10,00 €<br>
       <input type="checkbox" name="casq_20" />Casquette à 20,00 €<br>
       <br>
       <input type="checkbox" name="chem_15" />Chemise à 15,00 €<br>
       <input type="checkbox" name="chem_25" />Chemise à 25,00 €<br>
       <br>
       Total de vos Choix : 
   </p>
</form>

</body>
</html>
Messages postés
21123
Date d'inscription
mardi 27 juin 2006
Statut
Contributeur sécurité
Dernière intervention
22 juin 2016
1 290
Au fait, tu veux le faire en Javascript ou en PHP?

Alors je n'ai pas tout fais, mais une petite base pour voir si tu comprends le principe déjà et si tu veux tester avant de l'avoir tout cuit :-P

En JS, la base est la:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script>
function calcul()
{
// Ici tester si la valeur est cochée et si elle l'est récupérer la valeur et l'additionner. Enfin, l'afficher dans le input.
}
</script>
</head>

<body>

<form method="post" action="ton_action">
<p>Faites votre Choix :<br>
<input type="checkbox" id="un" name="casq_10" value="10" onclick="calcul()" />Casquette à 10,00 €<br>
<input type="checkbox" id="deux" name="casq_20" value="20" onclick="calcul()"/>Casquette à 20,00 €<br>
<br>
<input type="checkbox" id="trois" name="chem_15" value="15" onclick="calcul()"/>Chemise à 15,00 €<br>
<input type="checkbox" id="quatre" name="chem_25" value="25" onclick="calcul()"/>Chemise à 25,00 €<br>
<br>
Total de vos Choix : <input type="text" name="total" readonly />
</p>
</form>

</body>
</html>

Messages postés
558
Date d'inscription
mercredi 11 septembre 2013
Statut
Membre
Dernière intervention
8 août 2018
43
En javascript,

par contre, j'ai beau cocher dans ton exemple, rien ne s'additionne. :/

merci quand même :)
Messages postés
21123
Date d'inscription
mardi 27 juin 2006
Statut
Contributeur sécurité
Dernière intervention
22 juin 2016
1 290
Je pensais que t'allais chercher un peu lol

Essai ce code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
<script>
function calcul()
{
var somme = 0;
var checks = document.forms["Form"].getElementsByTagName("input");
for (var i = 0, iMax = checks.length; i < iMax; ++i) {
if ((checks[i].type == "checkbox") && checks[i].checked) {
somme += parseInt(checks[i].value);
}
}
document.getElementsByName("total")[0].value = somme;
}
</script>
</head>

<body>

<form method="post" action="ton_action" name="Form">
<p>Faites votre Choix :<br>
<input type="checkbox" id="un" name="casq_10" value="10" onclick="calcul()" />Casquette à 10,00 €<br>
<input type="checkbox" id="deux" name="casq_20" value="20" onclick="calcul()"/>Casquette à 20,00 €<br>
<br>
<input type="checkbox" id="trois" name="chem_15" value="15" onclick="calcul()"/>Chemise à 15,00 €<br>
<input type="checkbox" id="quatre" name="chem_25" value="25" onclick="calcul()"/>Chemise à 25,00 €<br>
<br>
Total de vos Choix : <input type="text" id="total" name="total" readonly />
</p>
</form>

</body>
</html>


"Impossible is nothing"
Messages postés
558
Date d'inscription
mercredi 11 septembre 2013
Statut
Membre
Dernière intervention
8 août 2018
43
Yeah !
C'est exactement ce que je recherchai comme base.
Un tout grand merci ;)
Messages postés
21123
Date d'inscription
mardi 27 juin 2006
Statut
Contributeur sécurité
Dernière intervention
22 juin 2016
1 290
Cool :-)

++