11521 sujets

JavaScript, DOM et API Web HTML5

Calcul avec formulaire

Bonjour, je rencontre un problème avec un script qui semble banal, mais je ne trouve pas mon problème. Mon but est de calculer deux formules. Je n'ai pas mis de conditions mais par la suite je le mettrais sur abdomen, triceps et cuisse.
Pourriez-vous me dire quel est mon problème actuel.
Si vous avez besoin que je vous envoi l'url de ma page, je le ferai en MP car il y a peut-être autre chose qui fait que mon calcul ne se fait pas.

Un grand merci pour votre aide.

<form role="form" method="post" action="">
<div class="row">
										<div class="col-md-4">
											<div class="form-group">
												<label>Sous-scapulaire (mm)</label>
											<input class="form-control" name="subscapular" placeholder="" id="subscapular" value=""  type="number">
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label>Triceps (mm)</label>
												<input class="form-control" name="triceps" placeholder="" id="triceps" value="" type="number">
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label>Pectoraux (mm)</label>
												<input class="form-control" name="pecs" placeholder="" id="pecs" value="" type="number">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-md-4">
											<div class="form-group">
												<label>Intercostal mi-axillaire (mm)</label>
											<input class="form-control" name="axillaire" placeholder="" id="axillaire" value=""  type="number">
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label>Supra-iliaque (mm)</label>
												<input class="form-control" name="suprailiaque" placeholder="" id="suprailiaque" value="" type="number">
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label>Abdomen (en mm)</label>
												<input class="form-control" name="abdomen" placeholder="" id="abdomen" value="" type="number">
											</div>
										</div>
									</div>
									<div class="row">
										<div class="col-md-4">
											<div class="form-group">
												<label>Cuisse (en mm)</label>
											<input class="form-control" name="cuisse" placeholder="" id="cuisse" value=""  type="number">
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label>Votre sexe</label>
												<select id="sexe" name="sexe" class="form-control">
												<option value="0" selected="selected">Femme</option>
												<option value="1">Homme</option>
												</select>
											</div>
										</div>
										<div class="col-md-4">
											<div class="form-group">
												<label>Votre origine ethnique</label>
												<select id="origin" name="origin" class="form-control">
												<option value="1" selected="selected">Noir</option>
												<option value="0">Autre</option>
												</select>
											</div>
										</div>
										</div>
									<div class="text-center"><br>
							<button class="btn btn-primary btn-outline" name="calcul" id="calcul" onclick="javascript:calcul();">Calculer</button> 
							</div>
	</form>
</div>
</div>
<div class="row">
<!-- Post Section -->
<div class="col-md-9">
<div class="row">
<div class="col-md-12">
<a name="PMG"></a>
<h2>Votre estimation %MG: </h2>
<div id="resultat"></div>




function calcul(){
	var subscapular = parseInt(document.getElementById('subscapular').value);
	var triceps = parseInt(document.getElementById('triceps').value);
	var pecs = parseInt(document.getElementById('pecs').value);
	var axillaire = parseInt(document.getElementById('axillaire').value);
	var suprailiaque = parseInt(document.getElementById('suprailiaque').value);
	var abdomen = parseInt(document.getElementById('abdomen').value);
	var cuisse = parseInt(document.getElementById('cuisse').value);
	var sexe = document.getElementById('sexe').value;
	var origin = document.getElementById('origin').value;

	var pMGseptSKF = 10.566 + 0.12077 * (subscapular + triceps + pecs + axillaire + suprailiaque + abdomen + cuisse) - 8.057 * (sexe) - 2.545 * (origin);
	var pMGtroisSKF = 8.997 + 0.24658 * (triceps + abdomen + cuisse) - 6.343 * (sexe) - 1.998 * (origin);
		
		window.location = '#PMG';
	
		document.getElementById('resultat').innerHTML = '<p><b>'+ pMGseptSKF +' avec les 7 variables</b></p>';
		document.getElementById('resultat1').innerHTML = '<p><b>'+ pMGtroisSKF +' avec les 3 variables</b></p>';
}

Modifié par dafid5 (03 Nov 2017 - 23:11)
Bonjour, je reviens vers vous, car je n'ai toujours pas trouvé de solution à mon problème.

Auriez-vous remarqué un problème ou oubli dans mon script ou dans ma page html ?

merci pour l'aide que vous pourrez m'apporter
bzh a écrit :
Hum, et qu'est ce qui ne fonctionne pas exactement ?


Je n'obtiens aucuns résultat quand je clique sur mon bouton "calculer"

lien
Modérateur
Bonjour, plusieurs problèmes:

1) Le bouton soumet le formulaire (et donc recharge la page).
Plusieurs solutions: a) supprimer les balises <form> qui ne servent apparemment à rien le but n'étant pas d'envoyer ces valeurs au serveur.
b) Désactiver la soumission avec javascript

2) Il y a déjà une erreur js sur la page: Cannot read property 'offsetLeft' of null in astonish.js

3) La fonction calcul() n'existe pas. Apparemment le javascript présenté ici est absent de la page…
kustolovic a écrit :
1) Le bouton soumet le formulaire (et donc recharge la page).
Plusieurs solutions: a) supprimer les balises &lt;form&gt; qui ne servent apparemment à rien le but n'étant pas d'envoyer ces valeurs au serveur.
b) Désactiver la soumission avec javascript

je viens de retirer les form et les calculs fonctionnent, cependant, j'ai au moins 10 chiffres après la virgule

kustolovic a écrit :
2) Il y a déjà une erreur js sur la page: Cannot read property 'offsetLeft' of null in astonish.js
je ne connais pas cette propriété

kustolovic a écrit :
3) La fonction calcul() n'existe pas. Apparemment le javascript présenté ici est absent de la page…

le javascript est bien présent et le lien est correct
kustolovic a écrit :
Bonjour, plusieurs problèmes:

1) Le bouton soumet le formulaire (et donc recharge la page).
Plusieurs solutions: a) supprimer les balises &lt;form&gt; qui ne servent apparemment à rien le but n'étant pas d'envoyer ces valeurs au serveur.
b) Désactiver la soumission avec javascript


Suite aux précédents conseils de kustolovic, mon petit script fonctionne bien, j'ai donc commencé à l'étayer pour l'améliorer, or pour le coup, je n'obtiens plus aucuns résultats en cliquant sur mon bouton calculer.


function calcul(){
	var subscapular = parseInt(document.getElementById('subscapular').value);
	var triceps = parseInt(document.getElementById('triceps').value);
	var pecs = parseInt(document.getElementById('pecs').value);
	var axillaire = parseInt(document.getElementById('axillaire').value);
	var suprailiaque = parseInt(document.getElementById('suprailiaque').value);
	var abdomen = parseInt(document.getElementById('abdomen').value);
	var cuisse = parseInt(document.getElementById('cuisse').value);
	var sexe = document.getElementById('sexe').value;
	var origin = document.getElementById('origin').value;
	var conseil = false;
	var conseilnormal = false;
	var resultatarrondi = 0;
	var resultatarrondi1 = 0;
	var stringResult = '';
	var calc = false;
	else {
	calc = true;	
	var pMGseptSKF = 10.566 + 0.12077 * (subscapular + triceps + pecs + axillaire + suprailiaque + abdomen + cuisse) - 8.057 * (sexe) - 2.545 * (origin);
	var pMGtroisSKF = 8.997 + 0.24658 * (triceps + abdomen + cuisse) - 6.343 * (sexe) - 1.998 * (origin);
	
	resultatarrondi = Math.round(pMGseptSKF*100)/100;	
	resultatarrondi1 = Math.round(pMGtroisSKF*100)/100;
	
	stringResult = '<p>Votre pourcentage de masse graisseuse est de <strong>' + resultatarrondi + '</strong>% avec 7 variables et ' + resultatarrondi1 + '</strong>% avec 3 variables</p>';
	stringResult += '<p>texte ';
	if (sexe==0) {
			if (resultat<25) {
				stringResult += 'Pas assez de graisse';
			} else if (resultat>=25 && resultat<30) {
				stringResult += 'Graisse normale';
				conseilnormal = true;
			} else if (resultat>=30) {
				stringResult += 'Trop de graisse';
				conseil = true;
			} 
		} else {
			if (resultat<15) {
				stringResult += 'Pas assez de graisse';
			} else if (resultat>=15 && resultat<20) {
				stringResult += 'Graisse normale';
				conseilnormal = true;
			} else if (resultat>=20) {
				stringResult += 'Trop de graisse';
				conseil = true;
			} 
		}
		stringResult += '</p>';
	}
		if (calc==true) {
	
		if (conseil == true) {
			stringResult += '<p><strong>Recommandation</strong> :</p>';
			stringResult += '<p>texte</p>';
		}
		if (conseilnormal == true) {
			stringResult += '<p><strong>Recommandation</strong> :</p>';
			stringResult += '<p>texte</p>';
		}
		document.getElementById('resultat').innerHTML = '<p>' + stringResult + ' </p>';

		catch (e) {
		}
		window.location = '#PMG';
		
	} 	
}
Les boutons HTML sont par défaut de type "submit". Une bonne pratique consiste à toujours ajouter un attribut type=button pour les boutons dont le rôle est d'effectuer une action autre que celle d'envoyer un formulaire.
Zelalsan a écrit :
Les boutons HTML sont par défaut de type "submit". Une bonne pratique consiste à toujours ajouter un attribut type=button pour les boutons dont le rôle est d'effectuer une action autre que celle d'envoyer un formulaire.


MERCI Zlalsan, malheureusement, cela n'a pas solutionner le problème.
Sujet clos
Aller à