11548 sujets

JavaScript, DOM et API Web HTML5

Récupération de valeurs et calculs sur les formulaires

Bonjour à tous,

Je déteste le Javascript. Voilà, c'est dit. Je me suis toujours arraché les cheveux dessus et on ne s'entend pas bien lui et moi. Manque de bol, pour certains trucs, on ne peut pas s'en passer et c'est justement le cas en ce moment. Sauf que ça ne marche pas bien et j'ai donc besoin de vos lumières.

OBJECTIF :
Effectuer des calculs sur plusieurs champs de formulaire et au fur et à mesure de la saisie de l'utilisateur.

CE QUI A ETE FAIT :
Pour le moment, j'ai un script qui fonctionne très bien et voilà donc ce que j'ai fait :

Une partie de l'un de mes formulaires :


<tr>
<td><label>Produit 1</label></td>
<td><input type="text" id="champ1" name="champ1" value="1.55" readonly /></td>
<td><input type="text" id="champ2" name="champ2" value="" onChange="fonction1();" /></td>
<td><input type="text" id="total1" name="total1" value="" readonly /></td>
</tr>


La fonction JS associés :


function fonction1() { 
var variable1 = document.getElementById("champ1").value; 
var variable2 = document.getElementById("champ2").value; 
if(variable1 != "" && variable2 != "" ) { 
   var variable3 = parseFloat(variable1) * parseFloat(variable2);
   document.getElementById("total1").value = variable3.toFixed(2);
} else {
   document.getElementById("total1").value = "0";
}
}


Là, vous allez peut-être me demander pourquoi ces éléments sont dans un tableau et en fait c'est parce que ces champs ne sont pas tous seuls dans mon formulaire et que j'ai une trentaine de lignes identiques et qui respectent la même structure. Et on en vient donc à mon problème...

MON PROBLEME :
Le script cité plus haut fonctionne parfaitement. Sauf que voilà, des lignes comme celle-ci, j'en ai une trentaine dans mon tableau et j'ai donc créé tout autant de fonctions. Ce que je voudrais mettre en place, en fait, c'est genre une fonction "calcul()" qui soit réutilisable pour tous mes calculs histoire d'alléger et de simplifier au maximum mon code. Je pensais pendant un moment à essayer de récupérer les valeurs des champs de chaque ligne et à les balancer ensuite dans les arguments de la fonction mais j'avoue que j'ai vraiment beaucoup de mal.

Bref, si quelqu'un s'y connait mieux que moi en matière de Javascript (et ce n'est pas très dur), ce serait cool qu'il me vienne en aide. Par contre, j'suis vraiment un gros en la matière donc faudra bien prendre le temps de m'expliquer le machin Smiley langue
Bonjour,

utilise un paramètre ligne pour ta fonction.

Voici un code pour additionner les lignes dans la dernière colonne. Tu ne devrais pas avoir de mal à l’adapter à la multiplication.
Code html

<!DOCTYPE html>
<html lang="fr">
<head>
	<meta charset="UTF-8">
	<title>somme</title>
</head>
<body>
	<input type="text" id="ligne1_colonne1"/><input type="text" id="ligne1_colonne2"/><input type="text" id="somme1"/><br/>
	<input type="text" id="ligne2_colonne1"/><input type="text" id="ligne2_colonne2"/><input type="text" id="somme2"/><br/>
	<script type="text/javascript" src="somme.js"></script>
</body>
</html>


et le code du fichier somme.js placé dans le même répertoire

/**
 * Initialise le champ d’id sommei avec la somme des champs de la même ligne
 * @param ligne numéro de la ligne
 */
function somme(ligne) {
	"use strict";
	var sommeRes = 0, colonne, NB_COLONNES = 2;
	
	// On va calculer la somme de la ligne dans sommeRes
	for (colonne = 1; colonne <= NB_COLONNES; colonne += 1) {
		sommeRes += parseFloat(document.getElementById("ligne" + ligne + "_colonne" + colonne).value);
	}

	// Si la sommeRes n’est pas définie on ne l’affiche pas.
	if (isNaN(sommeRes)) {
		sommeRes = "";
	}
	document.getElementById("somme" + ligne).value = sommeRes;
}

window.onload = function () {
	"use strict";

	// Ici on est sur que toute la page est chargée. On peut travailler tranquille.

	// Ne pas faire de boucles pour définir les onchange. (On pourrait les définir dans le code html mais il vaut mieux séparer le javascript du contenu.
	document.getElementById("ligne1_colonne1").onchange = function () {
		somme(1);
	};
	document.getElementById("ligne1_colonne2").onchange = function () {
		somme(1);
	};
	document.getElementById("ligne2_colonne1").onchange = function () {
		somme(2);
	};
	document.getElementById("ligne2_colonne2").onchange = function () {
		somme(2);
	};
};

Modifié par adrien881 (24 Jan 2012 - 16:03)
Salut et merci pour ton aide !

Pour la somme, ça fonctionne, en revanche je n'arrive pas à mettre en place la multiplication. J'ai tenté ça pour la fonction somme, mais sans succès :


function somme(ligne) {
"use strict";

var sommeRes = 0, i, NB_COLONNES = 2;

// On va calculer la somme de la ligne dans sommeRes
// C'est ici que j'ai fait la modif, en utilisant l'opérateur "*=" à la place de l'opérateur "+="
for (i = 1; i <= NB_COLONNES; i += 1) {
	sommeRes *= parseFloat(document.getElementById("ligne" + ligne + "_colonne" + i).value, 10);
}
		
// Si la sommeRes n’est pas définie on ne l’affiche pas.
if (isNaN(sommeRes)) {
	sommeRes = "";
}

	document.getElementById("somme" + ligne).value = sommeRes;

}
Re,

Pour la multiplication, en fait c'était logique puisque SommeRes était égal à zéro. J'ai mis la valeur à "1" et ça marche du tonnerre. En revanche, c'est un méchant "Uncaught TypeError: Cannot set property 'onchange' of null window.onload" dans ma console Javascript, est-ce que tu sais d'où ça vient ?

Merci encore en tout cas Smiley smile
Bonsoir

J'arrive peut être un peu tard mais pourquoi ne pas avoir utilisé Jquery ???

J'ai pour ma part des calculs sur des champs inexistant dans ma page sauf lorsque je les ajoutes, justement en jquery...

voici ma ligne de calcul... simple addition de tout les champs voulus et affichage dans un dernier input..

function calcR(laclasse)
				{	var totalR=0; $("."+laclasse).each(function(){totalR+=($(this).val())*1;});$("#totalRec").val(totalR);	}


Voilà il s'agit donc d'une fonction qui reçoit un nom de class css... sur un événement, onload ou onchange ou peu importe quand...

il suffit de mettre une class avec un nom spécifique dans tes input que tu veux calculer ensemble...

un exemple peut être

<input type='text' name='valeur1' class='calc1' value='' onblur='calcR("calc1");'><br />
<input type='text' name='valeur1' class='calc1' value='' onblur='calcR("calc1");'><br />
<input type='text' name='valeur1' class='calc3' value=''><br />
<input type='text' name='valeur1' class='calc1' value='' onblur='calcR("calc1");'><br />
<input type='text' name='valeur1' class='calc1' value='' onblur='calcR("calc1");'><br />
<input type='text' name='valeur1' class='calc3' value=''><br />
<input type='text' id='totalR'><br />

Modifié par pchlj (24 Jan 2012 - 17:40)
Sujet clos
Aller à