Addition de sous-totaux

Version imprimable

Bonjour à tous,

Le Javascript ne me réussis vraiment pas, je me suis arraché ce qui restait sur le caillou -)

J'essaye de faire le total de 2 inputs, qui sont eux-mêmes des sous-totaux de checkbox et radiobuttons.

Code:

1
2
3
4
5
6
7
8
	$('input:checkbox').change(function ()
	{
		  var total = 0;
		  $('input:checkbox:checked').each(function(){
		   total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
		  });   
		  $("#total").val(total);
	});

Code:

1
2
3
4
5
6
7
8
	$('input[name=pole_compet]:radio').change(function ()
	{
		  var total2 = 0;		  
		  $('input[name=pole_compet]:radio:checked').each(function(){
		   total2 += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
		  });   
		  $("#total2").val(total2);
	});

Les deux, total et total2 fonctionnent correctement.

Mais je n'arrive pas à en faire le total dans un troisième input:

Code:

1
2
3
4
5
6
7
$('total3').change(function ()
	{
		var total=new Number(total.value);
		var total2=new Number(total2.value);
		var total3=Number(total+total2);
		$("#total3").val(total3);
	});

Bien sûr, le plus simple aurait été de ne faire qu'une seule opération, mais je n'y suis jamais arrivé ...:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('input:checkbox').change(function ()
	{
		  var total = 0;
		  var total2 = 0;
		  var total3 = 0;
		  $('input:checkbox:checked').each(function(){
		   total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
		  });
		  $("#total").val(total);
		  $('input[name=pole_compet]:radio:checked').each(function(){
		   total2 += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
		  });
 
		  $("#total2").val(total2);
		  var total3=Number(total+total2);
		  $("#total3").val(total3);
	});

Quelle est la meilleure voie à suivre, selon vous ?

Vous l'aurez deviné, je suis novice, et une QUICHE en javascript,
Merci d'avance, avec mes salutations.

18/04/2018, 23h17
danielhagnoul
:salut:
1. C'est du jQuery, pas le bon forum
2. Il n'y a pas les codes HTML correspondant aux manipulations JS

Oups, sorry pour le mauvais choix de forum, et Merci d'avoir réparé mon erreur.

Les codes HTML:

Code:

1
2
3
4
5
<h4><label for="total">Total : </label><input id="total"  name="subtotal" style="text-align:center;font-weight: bold;" size="10" value=<?php  echo $enreg["subtotal"];  ?>> €</h4><br><br>
 
<h4><label for="total2">Total2 : </label><input id="total2"  name="subtotal2" style="text-align:center;font-weight: bold;" size="10" value=<?php  echo $enreg["subtotal2"];  ?>> €</h4><br><br>
 
<h4><label for="total3">Total3 : </label><input id="total3" name="subtotal3" style="text-align:center;font-weight: bold;" size="10" value=<?php  echo $enreg["subtotal3"];  ?>> €</h4><br><br>

Comme il faut que ca marche, je continue de chercher à additionner les champs total et total2 pour afficher le résultat dans un champ total3 :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
$( "input[name='subtotal3']" ).change(function ()
	{
	  //Déclaration des variables
	  var total = document.f.total.value;
	  var total2 = document.f.total2.value;
	  // Opération
	  result =  parseInt(total)  + parseInt(total2);
	  // Test
	  console.log(result);
	  //Envoyer le résultat dans le champ('#total3')
	  document.f.total3.value=result;
	});

Ne fonctionne pas

J'ai essayé d'ajouter un nom de classe "sous_total" à mes 2 inputs à additionner:

Code:

1
2
3
4
5
6
7
8
$( ".sous_total" ).change(function ()
	{
		var total3 = 0;
		  $( ".sous_total" ).each(function(){
		  total3 += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val());
		  });   
		  $("#total3").val(total3);
	});

Ne fonctionne pas non-plus....

19/04/2018, 14h21
All76

En fait, je m’aperçois que le dernier code fonctionne "à moitié" (en ajoutant un nom de classe "sous_total" à mes 2 inputs à additionner),...

En effet, une modification "manuelle" des 2 champs total et total2 interagit correctement avec total3 ....
Mais pas de calcul "automatique" induit par une modification des checkbox, ARGHHH !

Ne dois plus être très loin, non ? -)

Bon...,
Finalement...,

Ai découvert le sélecteur ['nom*="valeur"'] (--->Éléments qui possèdent un attribut nom qui contient (partiellement ou totalement) la valeur spécifiée) ....

...Qui m'a permis ne faire qu'un seul calcul, sur un seul champ, en ajoutant simplement un attribut commun aux noms des champs concernés:
Code:

1 2 3 4 5 6 7 8 $('input[name*="choix_"]',).change(function () { var total = 0; $('input[name*="choix_"]:checked').each(function(){ total += isNaN(parseInt($(this).val())) ? 0 : parseInt($(this).val()); }); $("#total").val(total); });
Impec !

Désolé donc de l'intrusion sur le Forum, et du monologue -)

Bien Cordiales Salutations -)