Sujet Précédent Sujet Suivant

Calcul javascript dans un formulaire

Fermé
fredericbdr - 3 févr. 2011 à 11:27
 fredericbdr - 4 févr. 2011 à 11:09
Bonjour,
Je ne suis pas très fort en Javascript mais j'essaye de faire une petite application pour faire des calculs assez simples sur des nombres rentrés par un utilisateur dans des balises input type=text...
L'utilisateur doit rentrer 20 valeurs dans un tableau, puis à l'aide d'une fonction, ça calcul certaines valeurs et les affiche dans un tableau.
J'ai un soucis avec mon code, le calcul ne se fait pas, ça me met "NaN" dans les cellules.
Pour comprendre, j'ai un tableau avec les 20 valeurs que doit rentrer un utilisateur. Les lettres à l'intérieur déterminent le nom de chacuns des name="" de mes input dans mon formulaire. Ex : input type="text" name="q1"...
Je dois donc calculer et afficher les valeurs de p1 à p10 à l'aide des données rentrées (q1 à q20). (Je ne m'occupe pas pour le moment de la variable nta et des valeurs de p11 à p14).

Voici mon code : 
<SCRIPT LANGUAGE="JavaScript">
  
    function calcul_form() {
      // le with ci-dessous permet d'abréger "document.forms.form1.p1.value" en "p1.value"
      with (document.forms.form1) {
       var total=0;
       var nta=0;
	   
       total = q1.value * q11.value *1 + q2.value * q12.value *1 + q3.value * q13.value *1 + q4.value * q14.value *1 + q5.value * q15.value *1 + q6.value * q16.value *1 + q7.value * q17.value *1 + q8.value * q18.value *1 + q9.value * q19.value *1 + q10.value * q20.value *1 ;
           // (total=MBT) Ai mis les *1 ci-dessus afin que les + fassent une somme arithmétique et non pas une concaténation de chaînes de caractères 
		   
		nta = q1.value *1 + q2.value *1 + q3.value *1 + q4.value *1 + q5.value *1 + q6.value *1 + q7.value *1 + q8.value *1 + q9.value *1 + q10.value ; 
		
		p1.value = (q1.value * q11.value)/(total.value) ;
		p2.value = (q2.value * q12.value)/(total.value) ;
		p3.value = (q3.value * q13.value)/(total.value) ;
		p4.value = (q4.value * q14.value)/(total.value) ;
		p5.value = (q5.value * q15.value)/(total.value) ;
		p6.value = (q6.value * q16.value)/(total.value) ;
		p7.value = (q7.value * q17.value)/(total.value) ;
		p8.value = (q8.value * q18.value)/(total.value) ;
		p9.value = (q9.value * q19.value)/(total.value) ;
		p10.value = (q10.value * q20.value)/(total.value) ;
		
		p11.value = total.value * 12 ;
		p12.value = total.value * 12 * 0.21 ;
		p13.value = nta.value * 12 ;
		p14.value = nta.value * 12 * 0.21 ;
      }
    }
</SCRIPT>
 
</head>
 
<body onLoad="calcul_form()">
<FORM NAME="form1">
 
	  <table width="776" height="92" border="0" cellpadding="0">
	    <tr align="center" valign="middle">
	      <th scope="col" width="77px;"><INPUT TYPE="text" NAME="q1" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col" width="77px;"><INPUT TYPE="text" NAME="q2" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col" width="77px;"><INPUT TYPE="text" NAME="q3" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q4" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q5" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q6" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q7" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q8" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q9" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" NAME="q10" SIZE=3 MAXLENGTH=3 onBlur="test_champ(this)"></th>
 
        </tr>
	    <tr align="center" valign="middle">
	      <th scope="row"><INPUT TYPE="text" NAME="q11" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></th>
	      <td><INPUT TYPE="text" NAME="q12" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q13" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q14" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q15" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q16" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q17" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
 
	      <td><INPUT TYPE="text" NAME="q18" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q19" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
	      <td><INPUT TYPE="text" NAME="q20" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
        </tr>
      </table>
	
      </div>
	<!-- middle -->
	<div class="middle-sr">
    
 
	<!-- content -->     
        <div class="wrapper">
 
          <div class="content">
            <div class="simulrenta2">
              <table width="259" height="175" border="0" cellpadding="5">
                <tr>
                  <th width="113" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p1" SIZE=5></th>
                  <th width="120" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p2" SIZE=3></th>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p3" SIZE=3 MAXLENGTH=2></th>
 
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p4" SIZE=3 MAXLENGTH=2></td>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p5" SIZE=3 MAXLENGTH=2></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p6" SIZE=3 MAXLENGTH=2></td>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p7" SIZE=3 MAXLENGTH=2></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p8" SIZE=3 MAXLENGTH=2></td>
 
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p9" SIZE=3 MAXLENGTH=2></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p10" SIZE=3 MAXLENGTH=2></td>
                </tr>
              </table>
            </div>
            
            <div class="simulrenta3">
              <table width="260" height="211" border="0" cellpadding="5">
 
                <tr>
                  <th width="113" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p11" SIZE=3 MAXLENGTH=2></th>
                  <th width="120" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p12" SIZE=3 MAXLENGTH=2></th>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p13" SIZE=3 MAXLENGTH=2></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p14" SIZE=3 MAXLENGTH=2></td>
                </tr>
                <tr>
 
                  <th align="center" valign="middle" scope="row">&nbsp;</th>
                  <td align="center" valign="middle">&nbsp;</td>
                </tr>
              </table>
            </div>
            
            <div class="simulrenta4">
              <table width="400" height="228" border="0" cellpadding="5">
                <tr>
                  <th colspan="2" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p15" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></th>
 
                  <th width="186" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p16" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></th>
                </tr>
                <tr>
                  <th colspan="2" align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p17" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p18" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></td>
                </tr>
                <tr>
                  <th height="36" colspan="3" align="center" valign="middle" scope="row">&nbsp;</th>
                </tr>
 
                <tr>
                  <th width="126" height="46" align="center" valign="middle" scope="row">&nbsp;</th>
                  <th height="46" colspan="2" align="left" valign="middle" scope="row"><INPUT TYPE="text" NAME="p19" SIZE=3 MAXLENGTH=2 onBlur="test_champ(this)"></th>
                </tr>
              </table>
             	<INPUT TYPE="SUBMIT" VALUE="Calculer" onClick="calcul_form()">
				<INPUT TYPE="RESET" VALUE="Effacer" > 
 
              </FORM>


Merci pour votre aide.



A voir également:

3 réponses

Réponse 1 / 3
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
3 févr. 2011 à 17:33
Seule indication : utiliser des points pour les virgules, les commentaires de mon code devraient être assez clais (j'espère), sinon, regarde ici : https://openclassrooms.com/fr/courses/5543061-ecrivez-du-javascript-pour-le-web?archived-source=1916641 

<!doctype html>
<head>
	<!-- Voir d'abord la partie html sous ton body. Eviter les noms de balise en majuscule, c'est pas conforme à la norme (compatibilité navigateurs et dans le futur)... //-->
	<script>
		var total=0; // on initialise la valeur de total à 0. la valeur de total est externe à la fonction, sinon à chaque fois qu'on appelle la fonction, elle 
		
		function testValeur(valeur) { // La fonction qui contrôle les valeurs saisies.
			var valeur=parseFloat(valeur,10); // On transforme le chiffre en valeur entière (pas en décimale, attention !). Le parmaètre 10 après valeur, c'est pour forcer le nombre en base 10 (sinon tu pourrais avoir des surprises)
			if (isNaN(valeur)) alert("Veuillez saisir un nombre entier..."); // Si la valeur n'est pas un nombre (isNaN = isNotaNumber) on envoi un message d'alert à l'utilisateur
			else { // Sinon
				total += valeur; // La valeur de total augmente de la propre valeur saisie...
			}	

			// somme de la première ligne de valeurs.
			var nba=parseFloat(document.getElementById('q1').value) + parseFloat(document.getElementById('q2').value)+parseFloat(document.getElementById('q3').value)+parseFloat(document.getElementById('q4').value)+parseFloat(document.getElementById('q5').value)+parseFloat(document.getElementById('q6').value)+parseFloat(document.getElementById('q7').value)+parseFloat(document.getElementById('q8').value)+parseFloat(document.getElementById('q9').value)+parseFloat(document.getElementById('q10').value);
			
			// On met les valeurs dans des objets (sorte de tableaux de valeurs) / ligne1=1re ligne de valeurs, ligne3 = les réponses attendues
			var ligne1 = { q1: document.getElementById("q1"), q2: document.getElementById("q2"), q3: document.getElementById("q3"), q4: document.getElementById("q4"), q5: document.getElementById("q5"), q6: document.getElementById("q6"), q7: document.getElementById("q7"), q8: document.getElementById("q8"), q9: document.getElementById("q9"), q10: document.getElementById("q10") };
			var ligne2 = { q1: document.getElementById("q11"), q2: document.getElementById("q12"), q3: document.getElementById("q13"), q4: document.getElementById("q14"), q5: document.getElementById("q15"), q6: document.getElementById("q16"), q7: document.getElementById("q17"), q8: document.getElementById("q18"), q9: document.getElementById("q19"), q10: document.getElementById("q20") }; 
			var ligne3 = { q1: document.getElementById("p1"), q2: document.getElementById("p2"), q3: document.getElementById("p3"), q4: document.getElementById("p4"), q5: document.getElementById("p5"), q6: document.getElementById("p6"), q7: document.getElementById("p7"), q8: document.getElementById("p8"), q9: document.getElementById("p9"), q10: document.getElementById("p10") };
			
			// On affiche le total au fur et à mesure...
			document.getElementById('total').value=total;
			// Si les valeurs le permettent, on fait le total de NBA (?) -> je sais pas ce que c'est. 
			if (!isNaN(nba)) document.getElementById('nba').value=nba; else document.getElementById('nba').value="...";
			
			// On fait les formules...
			// Ex: si la première valeur de la ligne 1 ligne1.q1 fait référence à la valeur de q1 déclarée plus haut dans l'objet ligne1 (soit = document.getElementById("q1"))
			if (ligne1.q1.value != "" && ligne2.q1.value != "") ligne3.q1.value = (parseFloat(ligne1.q1.value) * parseFloat(ligne2.q1.value))/total;
			if (ligne1.q2.value != "" && ligne2.q2.value != "") ligne3.q2.value = (parseFloat(ligne1.q2.value) * parseFloat(ligne2.q2.value))/total;
			if (ligne1.q3.value != "" && ligne2.q3.value != "") ligne3.q3.value = (parseFloat(ligne1.q3.value) * parseFloat(ligne2.q3.value))/total;
			if (ligne1.q4.value != "" && ligne2.q4.value != "") ligne3.q4.value = (parseFloat(ligne1.q4.value) * parseFloat(ligne2.q4.value))/total;
			if (ligne1.q5.value != "" && ligne2.q5.value != "") ligne3.q5.value = (parseFloat(ligne1.q5.value) * parseFloat(ligne2.q5.value))/total;
			if (ligne1.q6.value != "" && ligne2.q6.value != "") ligne3.q6.value = (parseFloat(ligne1.q6.value) * parseFloat(ligne2.q6.value))/total;
			if (ligne1.q7.value != "" && ligne2.q7.value != "") ligne3.q7.value = (parseFloat(ligne1.q7.value) * parseFloat(ligne2.q7.value))/total;
			if (ligne1.q8.value != "" && ligne2.q8.value != "") ligne3.q8.value = (parseFloat(ligne1.q8.value) * parseFloat(ligne2.q8.value))/total;
			if (ligne1.q9.value != "" && ligne2.q9.value != "") ligne3.q9.value = (parseFloat(ligne1.q9.value) * parseFloat(ligne2.q9.value))/total;
			if (ligne1.q10.value != "" && ligne2.q10.value != "") ligne3.q10.value = (parseFloat(ligne1.q10.value) * parseFloat(ligne2.q10.value))/total;
			
			// Les calculs complémentaires
			if (ligne3.q1.value != "" && ligne3.q2.value != "") document.getElementById('p11').value=total*12;
			if (ligne3.q3.value != "" && ligne3.q4.value != "") document.getElementById('p12').value=total*12*0.21;
			if (ligne3.q5.value != "" && ligne3.q6.value != "") document.getElementById('p13').value=nba*12;
			if (ligne3.q7.value != "" && ligne3.q8.value != "") document.getElementById('p14').value=nba*12*0.21;
		}
	</script>
	<style type="text/css">
		table.saisies { background: #f90; }
		table.saisies td { border: colid 1px; red; }
	</style>
 </head>
 <body>
	<!-- Travailler avec des formulaire et du JavaScript ça n'a pas trop de sens (sauf pour l'ajax). Puisque lorsqu'un formulaire est validé, la page d'action, (par défaut la page en cours) se (re)charge (=> perte des informations saisies). J'ai ajouté un boutton "Calculer" en dessus pour valider le formulaire. //-->
	<!-- Deuxième remarque : evite d'accéder aux valeurs des éléments comme tu l'as fais : document.form.form1. Je le faisais au début, mais tu perds du temps et c'est pas tellement efficace et limité, accès à son id qu'il faudra lui donné. //-->
	<table class="saisies">
		<!-- Je ne sais pas si le référencement préfère les <th>, mais je n'en vois pas souvent, j'utilise du css (class='saisies') vois enhaut l'accès aux propriétés de styles dans les balises style...  //-->
		<tr>
			<td><input type="text" size="3" maxlength="3" id="q1" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q2" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q3" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q4" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q5" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q6" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q7" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q8" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q9" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q10" onblur="testValeur(this.value);" /></td>
		</tr>
		<tr>
			<td><input type="text" size="3" maxlength="3" id="q11" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q12" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q13" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q14" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q15" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q16" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q17" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q18" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q19" onblur="testValeur(this.value);" /></td>
			<td><input type="text" size="3" maxlength="3" id="q20" onblur="testValeur(this.value);" /></td>
		</tr>
	</table>
	<table class="reponses">
		<tr>
			<td><input type="text" size="3" id="p1" disabled="disabled" /></td>
			<td><input type="text" size="3" id="p2" disabled="disabled" /></td>
		</tr>
		<tr>
			<td><input type="text" size="3" id="p3" disabled="disabled" /></td>
			<td><input type="text" size="3" id="p4" disabled="disabled" /></td>
		</tr>
		<tr>
			<td><input type="text" size="3" id="p5" disabled="disabled" /></td>
			<td><input type="text" size="3" id="p6" disabled="disabled" /></td>
		</tr>
		<tr>
			<td><input type="text" size="3" id="p7" disabled="disabled" /></td>
			<td><input type="text" size="3" id="p8" disabled="disabled" /></td>
		</tr>
		<tr>
			<td><input type="text" size="3" id="p9" disabled="disabled" /></td>
			<td><input type="text" size="3" id="p10" disabled="disabled" /></td>
		</tr>
	</table>
	
	<br />
	Total : <input type="text" size="10" id="total" disabled="disabled" /><br />
	NBA : <input type="text" size="10" id="nba" disabled="disabled" /><br />
	<br />
	
	<input type="text" size="5" id="p11" disabled="disabled" />
	<input type="text" size="5" id="p12" disabled="disabled" />
	<input type="text" size="5" id="p13" disabled="disabled" />
	<input type="text" size="5" id="p14" disabled="disabled" />
</body>
1
fredericbdr
4 févr. 2011 à 11:09
Merci beaucoup, c'est super sympa, je commence à comprendre quelque chose (oui enfin)...
C'est dans des <th> je ne peux pas le changer, c'est imposé...

Cependant, je n'ai jamais utilisé d'objets, ça correspond à quoi, les variables ligne 1, 2 et 3?

Puis où se trouve le calcul de total ? En fait total c'est simplement q1*q11 + q2*q12 + q3*q13 ....+ q10*q20.
Ce total je m'en sers pour calculer et afficher les cellules de p1 à p10, puisque p1 par exemple c'est (q1*q11) / total.

nba c'est une variable dont je me sers plus tard qui est en fait la somme des valeurs de la 1ere ligne du tableau (c'est à dire de q1 à q10).

J'ai copié ton code, j'essaye de le comprendre, tu dis que tu as ajouté un bouton calculer, mais je ne l'ai pas du coup ça ne fait rien là, les résultats ne s'affichent pas dans mes cellules.

Sinon tu dis qu'il vaut mieux utiliser Ajax ? je vais m'y pencher, existe t-il des scripts tout fait avec exemples pour ce genre de choses, car si c'est trop complexe, je n'ai pas le temps là...

Je remets mon code complet : 
<head>
<script>
		var total=0; // on initialise la valeur de total à 0. la valeur de total est externe à la fonction, sinon à chaque fois qu'on appelle la fonction, elle 
		
		function testValeur(valeur) { // La fonction qui contrôle les valeurs saisies.
			var valeur=parseFloat(valeur,10); // On transforme le chiffre en valeur entière (pas en décimale, attention !). Le parmaètre 10 après valeur, c'est pour forcer le nombre en base 10 (sinon tu pourrais avoir des surprises)
			if (isNaN(valeur)) alert("Veuillez saisir un nombre entier..."); // Si la valeur n'est pas un nombre (isNaN = isNotaNumber) on envoi un message d'alert à l'utilisateur
			else { // Sinon
				total += valeur; // La valeur de total augmente de la propre valeur saisie...
			}	

			// somme de la première ligne de valeurs.
			var nba=parseFloat(document.getElementById('q1').value) + parseFloat(document.getElementById('q2').value)+parseFloat(document.getElementById('q3').value)+parseFloat(document.getElementById('q4').value)+parseFloat(document.getElementById('q5').value)+parseFloat(document.getElementById('q6').value)+parseFloat(document.getElementById('q7').value)+parseFloat(document.getElementById('q8').value)+parseFloat(document.getElementById('q9').value)+parseFloat(document.getElementById('q10').value);
			
			// On met les valeurs dans des objets (sorte de tableaux de valeurs) / ligne1=1re ligne de valeurs, ligne3 = les réponses attendues
			var ligne1 = { q1: document.getElementById("q1"), q2: document.getElementById("q2"), q3: document.getElementById("q3"), q4: document.getElementById("q4"), q5: document.getElementById("q5"), q6: document.getElementById("q6"), q7: document.getElementById("q7"), q8: document.getElementById("q8"), q9: document.getElementById("q9"), q10: document.getElementById("q10") };
			var ligne2 = { q1: document.getElementById("q11"), q2: document.getElementById("q12"), q3: document.getElementById("q13"), q4: document.getElementById("q14"), q5: document.getElementById("q15"), q6: document.getElementById("q16"), q7: document.getElementById("q17"), q8: document.getElementById("q18"), q9: document.getElementById("q19"), q10: document.getElementById("q20") }; 
			var ligne3 = { q1: document.getElementById("p1"), q2: document.getElementById("p2"), q3: document.getElementById("p3"), q4: document.getElementById("p4"), q5: document.getElementById("p5"), q6: document.getElementById("p6"), q7: document.getElementById("p7"), q8: document.getElementById("p8"), q9: document.getElementById("p9"), q10: document.getElementById("p10") };
			
			// On affiche le total au fur et à mesure...
			document.getElementById('total').value=total;
			// Si les valeurs le permettent, on fait le total de NBA (?) -> je sais pas ce que c'est. 
			if (!isNaN(nba)) document.getElementById('nba').value=nba; else document.getElementById('nba').value="...";
			
			// On fait les formules...
			// Ex: si la première valeur de la ligne 1 ligne1.q1 fait référence à la valeur de q1 déclarée plus haut dans l'objet ligne1 (soit = document.getElementById("q1"))
			if (ligne1.q1.value != "" && ligne2.q1.value != "") ligne3.q1.value = (parseFloat(ligne1.q1.value) * parseFloat(ligne2.q1.value))/total;
			if (ligne1.q2.value != "" && ligne2.q2.value != "") ligne3.q2.value = (parseFloat(ligne1.q2.value) * parseFloat(ligne2.q2.value))/total;
			if (ligne1.q3.value != "" && ligne2.q3.value != "") ligne3.q3.value = (parseFloat(ligne1.q3.value) * parseFloat(ligne2.q3.value))/total;
			if (ligne1.q4.value != "" && ligne2.q4.value != "") ligne3.q4.value = (parseFloat(ligne1.q4.value) * parseFloat(ligne2.q4.value))/total;
			if (ligne1.q5.value != "" && ligne2.q5.value != "") ligne3.q5.value = (parseFloat(ligne1.q5.value) * parseFloat(ligne2.q5.value))/total;
			if (ligne1.q6.value != "" && ligne2.q6.value != "") ligne3.q6.value = (parseFloat(ligne1.q6.value) * parseFloat(ligne2.q6.value))/total;
			if (ligne1.q7.value != "" && ligne2.q7.value != "") ligne3.q7.value = (parseFloat(ligne1.q7.value) * parseFloat(ligne2.q7.value))/total;
			if (ligne1.q8.value != "" && ligne2.q8.value != "") ligne3.q8.value = (parseFloat(ligne1.q8.value) * parseFloat(ligne2.q8.value))/total;
			if (ligne1.q9.value != "" && ligne2.q9.value != "") ligne3.q9.value = (parseFloat(ligne1.q9.value) * parseFloat(ligne2.q9.value))/total;
			if (ligne1.q10.value != "" && ligne2.q10.value != "") ligne3.q10.value = (parseFloat(ligne1.q10.value) * parseFloat(ligne2.q10.value))/total;
			
			// Les calculs complémentaires
			if (ligne3.q1.value != "" && ligne3.q2.value != "") document.getElementById('p11').value=total*12;
			if (ligne3.q3.value != "" && ligne3.q4.value != "") document.getElementById('p12').value=total*12*0.21;
			if (ligne3.q5.value != "" && ligne3.q6.value != "") document.getElementById('p13').value=nba*12;
			if (ligne3.q7.value != "" && ligne3.q8.value != "") document.getElementById('p14').value=nba*12*0.21;
		}
	</script>
	<style type="text/css">
		table.saisies { background:#36C; }
		table.saisies td { border: solid 1px; red; }
	</style>
 </head>


<body>
<form name="form1">

	  <table width="776" height="92" border="0" cellpadding="0" class="saisies">
	    <tr align="center" valign="middle">
	      <th scope="col" width="77px;"><INPUT TYPE="text" id="q1" SIZE=3 MAXLENGTH=3 onblur="testValeur(this.value);"></th>
	      <th scope="col" width="77px;"><INPUT TYPE="text" id="q2" SIZE=3 MAXLENGTH=3 onblur="testValeur(this.value);"></th>
	      <th scope="col" width="77px;"><INPUT TYPE="text" id="q3" SIZE=3 MAXLENGTH=3 onblur="testValeur(this.value);"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" id="q4" SIZE=3 MAXLENGTH=3 onblur="testValeur(this.value);"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" id="q5" SIZE=3 MAXLENGTH=3 onblur="testValeur(this.value);"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" id="q6" SIZE=3 MAXLENGTH=3 onblur="testValeur(this.value);"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" id="q7" SIZE=3 MAXLENGTH=3 onblur="testValeur(this.value);"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" id="q8" SIZE=3 MAXLENGTH=3 onblur="testValeur(this.value);"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" id="q9" SIZE=3 MAXLENGTH=3 onblur="testValeur(this.value);"></th>
	      <th scope="col"width="77px;"><INPUT TYPE="text" id="q10" SIZE=3 MAXLENGTH=3 onblur="testValeur(this.value);"></th>

        </tr>
	    <tr align="center" valign="middle">
	      <th scope="row"><INPUT TYPE="text" id="q11" SIZE=3 MAXLENGTH=2 onblur="testValeur(this.value);"></th>
	      <td><INPUT TYPE="text" id="q12" SIZE=3 MAXLENGTH=2 onblur="testValeur(this.value);"></td>
	      <td><INPUT TYPE="text" id="q13" SIZE=3 MAXLENGTH=2 onblur="testValeur(this.value);"></td>
	      <td><INPUT TYPE="text" id="q14" SIZE=3 MAXLENGTH=2 onblur="testValeur(this.value);"></td>
	      <td><INPUT TYPE="text" id="q15" SIZE=3 MAXLENGTH=2 onblur="testValeur(this.value);"></td>
	      <td><INPUT TYPE="text" id="q16" SIZE=3 MAXLENGTH=2 onblur="testValeur(this.value);"></td>
	      <td><INPUT TYPE="text" id="q17" SIZE=3 MAXLENGTH=2 onblur="testValeur(this.value);"></td>
	      <td><INPUT TYPE="text" id="q18" SIZE=3 MAXLENGTH=2 onblur="testValeur(this.value);"></td>
	      <td><INPUT TYPE="text" id="q19" SIZE=3 MAXLENGTH=2 onblur="testValeur(this.value);"></td>
	      <td><INPUT TYPE="text" id="q20" SIZE=3 MAXLENGTH=2 onblur="testValeur(this.value);"></td>
        </tr>
      </table>
	
      </div>
	<!-- middle -->
	<div class="middle-sr">
    

	<!-- content -->     
        <div class="wrapper">

          <div class="content">
            <div class="simulrenta2">
              <table width="259" height="175" border="0" cellpadding="5" class="reponses">
                <tr>
                  <th width="113" align="center" valign="middle" scope="col"><INPUT TYPE="text" id="p1" SIZE=5 disabled="disabled"></th>
                  <th width="120" align="center" valign="middle" scope="col"><INPUT TYPE="text" id="p2" SIZE=3 disabled="disabled"></th>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" id="p3" SIZE=3 MAXLENGTH=2 disabled="disabled"></th>

                  <td align="center" valign="middle"><INPUT TYPE="text" id="p4" SIZE=3 MAXLENGTH=2 disabled="disabled"></td>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" id="p5" SIZE=3 MAXLENGTH=2 disabled="disabled"></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" id="p6" SIZE=3 MAXLENGTH=2 disabled="disabled"></td>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" id="p7" SIZE=3 MAXLENGTH=2 disabled="disabled"></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" id="p8" SIZE=3 MAXLENGTH=2 disabled="disabled"></td>

                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" id="p9" SIZE=3 MAXLENGTH=2 disabled="disabled"></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" id="p10" SIZE=3 MAXLENGTH=2 disabled="disabled"></td>
                </tr>
              </table>
            </div>
            
            <div class="simulrenta3">
              <table width="260" height="211" border="0" cellpadding="5">

                <tr>
                  <th width="113" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p11" SIZE=3 MAXLENGTH=2></th>
                  <th width="120" align="center" valign="middle" scope="col"><INPUT TYPE="text" NAME="p12" SIZE=3 MAXLENGTH=2></th>
                </tr>
                <tr>
                  <th align="center" valign="middle" scope="row"><INPUT TYPE="text" NAME="p13" SIZE=3 MAXLENGTH=2></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" NAME="p14" SIZE=3 MAXLENGTH=2></td>
                </tr>
                <tr>

                  <th align="center" valign="middle" scope="row">&nbsp;</th>
                  <td align="center" valign="middle">&nbsp;</td>
                </tr>
              </table>
            </div>
            
            <div class="simulrenta4">
              <table width="400" height="228" border="0" cellpadding="5">
                <tr>
                  <th colspan="2" align="center" valign="middle" scope="col"><INPUT TYPE="text" id="p15" SIZE=3 MAXLENGTH=2></th>

                  <th width="186" align="center" valign="middle" scope="col"><INPUT TYPE="text" id="p16" SIZE=3 MAXLENGTH=2></th>
                </tr>
                <tr>
                  <th colspan="2" align="center" valign="middle" scope="row"><INPUT TYPE="text" id="p17" SIZE=3 MAXLENGTH=2></th>
                  <td align="center" valign="middle"><INPUT TYPE="text" id="p18" SIZE=3 MAXLENGTH=2></td>
                </tr>
                <tr>
                  <th height="36" colspan="3" align="center" valign="middle" scope="row">&nbsp;</th>
                </tr>

                <tr>
                  <th width="126" height="46" align="center" valign="middle" scope="row">&nbsp;</th>
                  <th height="46" colspan="2" align="left" valign="middle" scope="row"><INPUT TYPE="text" id="p19" SIZE=3 MAXLENGTH=2></th>
                </tr>
              </table>
                <input type="text" size="10" id="total" disabled="disabled" />
		<inputTYPE="RESET" VALUE="Effacer" > 

              <form>
0
Réponse 2 / 3
Fetide68 Messages postés 746 Date d'inscription dimanche 4 janvier 2009 Statut Membre Dernière intervention 16 septembre 2024 32
3 févr. 2011 à 11:40
Les nombres saisis dans les formulaires sont des chaines de caractères, pour forcer la machine à faire les calcule, il faut transformer la donnée saisie par l'utilisateur en entier ou en décimal :

parseInt(p1.value); // s'il s'agit d'un nombre entier
parseFloat(p1.value); // si tu compte autoriser les décimales

Mais petits conseils, utilise des boucles, tu gagneras du temps et pense à vérifier que l'utilisateur ne rentre pas n'importe quoi... (je reviens vers toi avec des explications sur ton code).
0
Réponse 3 / 3
fredericbdr
3 févr. 2011 à 16:14
Ok merci mais même si je rajoute parseFloat devant mes variables, ça me met toujours "NaN" dans mes cellules.
Je suis un peu perdu là...
0

Discussions similaires

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

1 réponse
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Google Chrome : "Nouvel envoi du formulaire"
beredezebe -
beredezebe -

3 réponses