Javascript : calculs dans un formulaire
jordane45 Messages postés 40050 Statut Modérateur -
Bonjour à tous,
J'ai entrepris de créer un formulaire permettant de calculer son métabolisme de base, sa dépense énergétique et ses besoins caloriques pour l'intégrer à mon site web car il n'existe pas grand chose sur le net qui répondent à tous ces critères.
PROBLEME n°1 : Je suis novice en codage
POBLEME n°2 : Les calculs ne tiennent pas compte des options que l'utilisateur choisit avec les boutons radios avant de soumettre le formulaire
ci-après, le script
// Retourne les valeurs cochées sur boutons radios
function f_GetRadioValue()
{
var radios = document.getElementsByName(id);
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
return radios[i].value * 1;
}
}
return 0;
}
// Fonction de calcul de la page
function Calculer() {
var poids = document.form.poids.value * 1;
var taille = document.form.taille.value / 100;
var age = document.form.age.value * 1;
// Calcul du métabolisme
if(document.getElementById('homme').checked)
document.form.metabolisme.value = Math.round((13.707 * poids) + (492.3 * taille) - (6.673 * age) + 77.607);
else(document.getElementById('femme').checked)
document.form.metabolisme.value = Math.round((9.740 * poids) + (172.9 * taille) - (4.737 * age) + 667.051);
// Calcul de la dépense énergétique
if(document.getElementById('nap1').checked)
document.form.depense.value = Math.round(document.form.metabolisme.value * 1.375);
else if(document.getElementById('nap2').checked)
document.form.depense.value = Math.round(document.form.metabolisme.value * 1.56);
else if(document.getElementById('nap3').checked)
document.form.depense.value = Math.round(document.form.metabolisme.value * 1.64);
else(document.getElementById('nap4').checked)
document.form.depense.value = Math.round(document.form.metabolisme.value * 1.82);
// Calcul du besoin énergétique journalier selon objectif
if(document.getElementById('perte').checked)
document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) - (0.1 * parseFloat(document.form.depense.value)));
else if(document.getElementById('stable').checked)
document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) * 1);
else(document.getElementById('gain').checked)
document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) + (0.1 * parseFloat(document.form.depense.value)));
}
voici le code html du formulaire :
<form name="form" id="form" action="" method="post">
<table>
<tr>
<td align="right"><label for="poids">Poids :</label></td>
<td align="left"><input name="poids" id="poids" value="70" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> kg</td>
</tr>
<tr>
<td align="right"><label for="taille">Taille :</label></td>
<td align="left"><input name="taille" id="taille" value="170" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> cm</td>
</tr>
<tr>
<td align="right"><label for="age">Age :</label></td>
<td align="left"><input name="age" id="age" value="33" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> ans</td>
</tr>
</table>
<table>
<tr>
<td align="left" colspan="2"><strong>Genre :</strong></td>
</tr>
<tr>
<td align="left" colspan="3"><input name="sexe" id="homme" value="homme" onclick="Calculer()" type="radio" checked>
<label for="homme"> Homme</label><br>
<input name="sexe" id="femme" value="femme" onclick="Calculer()" type="radio">
<label for="femme"> Femme</label></td>
</tr>
<tr>
<td align="left" colspan="4"><strong>Niveau d'activité physique (NAP) :</strong></td>
</tr>
<tr>
<td align="left" colspan="4"><input name="nap" id="nap1" value="nap1" onclick="Calculer()" type="radio">
<label for="sedentaire">Sédentaire</label><br>
<input name="nap" id="nap2" value="nap2" onclick="Calculer()" type="radio">
<label for="legere">Activité physique légère</label><br>
<input name="nap" id="nap3" value="nap3" onclick="Calculer()" type="radio" checked>
<label for="moderee">Activité physique modérée</label><br>
<input name="nap" id="nap4" value="nap4" onclick="Calculer()" type="radio">
<label for="intense">Activité physique intense</label></td>
</tr>
<tr>
<td align="left" colspan="4"><strong>Objectif :</strong></td>
</tr>
<tr>
<td align="left" colspan="4"><input name="objectif" id="perte" value="perte" onclick="Calculer()" type="radio" checked>
<label for="perte">Perte de poids</label><br>
<input name="objectif" id="stable" value="stable" onclick="Calculer()" type="radio">
<label for="stable">Stabiliser son poids</label><br>
<input name="objectif" id="gain" value="gain" onclick="Calculer()" type="radio">
<label for="gain">Prendre de la masse musculaire</label></td>
</tr>
<table>
<br />
<tr>
<td><input name="bouton" id="bouton" type="button" onclick="Calculer()" value="Calculer mes besoins énergétiques"></td>
</tr>
<br />
<table>
<tr>
<td align="left" colspan="4"><strong>Résultats :</strong></td>
</tr>
<tr>
<td class="score_result" align="left"> Ton Métabolisme de base (MB) :</td>
<td align="left"><input name="metabolisme" id="metabolisme" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>
<tr>
<td class="score_result" align="left"> Ta Dépense énergétique (DEJ) : </td>
<td align="left"><input name="depense" id="depense" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>
<tr>
<td class="score_result" align="left">Tes besoins caloriques journalier pour atteindre ton objectif : </td>
<td align="left"><input name="besoins" id="besoins" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>
</table>
</form>
Par avance merci pour vos retours ????????
- Javascript : calculs dans un formulaire
- Telecharger javascript - Télécharger - Langages
- A javascript error occurred in the main process - Forum Handicap / Accessibilté
- Afficher un tableau javascript en html ✓ - Forum Javascript
- Javascript arrondi - Forum Javascript
- Javascript arrondi après la virgule ✓ - Forum Windows
2 réponses
Bonjour, il y a une erreur de syntaxe dans la ligne 27, elle ne devrait pas inclure le mot clé else. Tu peux remplacer cette ligne par :
else if (document.getElementById('femme').checked)
Pour ton 2ème problème, la fonction f_GetRadioValue() n'est pas appelée dans ton code. Un exemple de comment tu pourrais le modifier :
// Fonction de calcul de la page
function Calculer() {
var poids = document.form.poids.value * 1;
var taille = document.form.taille.value / 100;
var age = document.form.age.value * 1;
var sexe = f_GetRadioValue("sexe");
var nap = f_GetRadioValue("nap");
// Calcul du métabolisme
if(sexe === "homme")
document.form.metabolisme.value = Math.round((13.707 * poids) + (492.3 * taille) - (6.673 * age) + 77.607);
else if(sexe === "femme")
document.form.metabolisme.value = Math.round((9.740 * poids) + (172.9 * taille) - (4.737 * age) + 667.051);
// Calcul de la dépense énergétique
if(nap === "nap1")
document.form.depense.value = Math.round(document.form.metabolisme.value * 1.375);
else if(nap === "nap2")
document.form.depense.value = Math.round(document.form.metabolisme.value * 1.56);
else if(nap === "nap3")
document.form.depense.value = Math.round(document.form.metabolisme.value * 1.64);
else if(nap === "nap4")
document.form.depense.value = Math.round(document.form.metabolisme.value * 1.82);
// Calcul du besoin énergétique journalier selon objectif
if(document.getElementById('perte').checked)
document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) - (0.1 * parseFloat(document.form.depense.value)));
else if(document.getElementById('stable').checked)
document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) * 1);
else if(document.getElementById('gain').checked)
document.form.besoins.value = Math.round(parseFloat(document.form.depense.value) + (0.1 * parseFloat(document.form.depense.value)));
}
Bonjour,
Voici une version optimisée de ton code
<form name="form" id="form" action="" method="post">
<table>
<tr>
<td align="right"><label for="poids">Poids :</label></td>
<td align="left"><input name="poids" id="poids" value="70" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> kg</td>
</tr>
<tr>
<td align="right"><label for="taille">Taille :</label></td>
<td align="left"><input name="taille" id="taille" value="170" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> cm</td>
</tr>
<tr>
<td align="right"><label for="age">Age :</label></td>
<td align="left"><input name="age" id="age" value="33" onFocus="This.value='';" onchange="Calculer()" style="width:4em" type="number" lang="fr"> ans</td>
</tr>
</table>
<table>
<tr>
<td align="left" colspan="2"><strong>Genre :</strong></td>
</tr>
<tr>
<td align="left" colspan="3"><input name="sexe" id="homme" value="homme" type="radio" checked>
<label for="homme"> Homme</label><br>
<input name="sexe" id="femme" value="femme" type="radio">
<label for="femme"> Femme</label></td>
</tr>
<tr>
<td align="left" colspan="4"><strong>Niveau d'activité physique (NAP) :</strong></td>
</tr>
<tr>
<td align="left" colspan="4"><input name="nap" id="nap1" value="nap1" type="radio">
<label for="sedentaire">Sédentaire</label><br>
<input name="nap" id="nap2" value="nap2" type="radio">
<label for="legere">Activité physique légère</label><br>
<input name="nap" id="nap3" value="nap3" type="radio" checked>
<label for="moderee">Activité physique modérée</label><br>
<input name="nap" id="nap4" value="nap4" type="radio">
<label for="intense">Activité physique intense</label></td>
</tr>
<tr>
<td align="left" colspan="4"><strong>Objectif :</strong></td>
</tr>
<tr>
<td align="left" colspan="4"><input name="objectif" id="perte" value="perte" type="radio" checked>
<label for="perte">Perte de poids</label><br>
<input name="objectif" id="stable" value="stable" type="radio">
<label for="stable">Stabiliser son poids</label><br>
<input name="objectif" id="gain" value="gain" type="radio">
<label for="gain">Prendre de la masse musculaire</label></td>
</tr>
<table>
<br />
<tr>
<td><input name="bouton" id="bouton" type="button" value="Calculer mes besoins énergétiques"></td>
</tr>
<br />
<table>
<tr>
<td align="left" colspan="4"><strong>Résultats :</strong></td>
</tr>
<tr>
<td class="score_result" align="left"> Ton Métabolisme de base (MB) :</td>
<td align="left"><input name="metabolisme" id="metabolisme" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>
<tr>
<td class="score_result" align="left"> Ta Dépense énergétique (DEJ) : </td>
<td align="left"><input name="depense" id="depense" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>
<tr>
<td class="score_result" align="left">Tes besoins caloriques journalier pour atteindre ton objectif : </td>
<td align="left"><input name="besoins" id="besoins" style="width:5em" readonly="readonly" type="text"> kCal</td>
</tr>
</table>
</form>
<script>
//on attache l'event "click" à chaque input
var inputs = document.querySelectorAll('input');
inputs.forEach(elm => {
elm.addEventListener('click', () =>Calculer());
});
// Fonction de calcul de la page
function Calculer() {
var poids = document.querySelector('#poids').value * 1;
var taille = document.querySelector('#taille').value / 100;
var age = document.querySelector('#age').value * 1;
var inp_metabolisme = document.querySelector('#metabolisme');
var inp_depense = document.querySelector('#depense');
var inp_besoins = document.querySelector('#besoins');
// Calcul du métabolisme
var sexe = document.querySelector("[name='sexe']:checked").value;
if(sexe == 'homme'){
inp_metabolisme.value = Math.round((13.707 * poids) + (492.3 * taille) - (6.673 * age) + 77.607);
} else {
inp_metabolisme.value = Math.round((9.740 * poids) + (172.9 * taille) - (4.737 * age) + 667.051);
}
// Calcul de la dépense énergétique
var nap = document.querySelector("[name='nap']:checked").value;
switch(nap){
case 'nap1':
inp_depense.value = Math.round(inp_metabolisme.value * 1.375);
break;
case 'nap2':
inp_depense.value = Math.round(inp_metabolisme.value * 1.56);
break;
case 'nap3':
inp_depense.value = Math.round(inp_metabolisme.value * 1.64);
break;
case 'nap4':
inp_depense.value = Math.round(inp_metabolisme.value * 1.82);
break;
}
// Calcul du besoin énergétique journalier selon objectif
var objectif = document.querySelector("[name='objectif']:checked").value;
switch(objectif){
case 'perte':
inp_besoins.value = Math.round(parseFloat(inp_depense.value) - (0.1 * parseFloat(inp_depense.value)));
break;
case 'stable':
inp_besoins.value = Math.round(parseFloat(inp_depense.value) * 1);
break;
case 'gain':
inp_besoins.value = Math.round(parseFloat(inp_depense.value) + (0.1 * parseFloat(inp_depense.value)));
break;
}
}
</script>