Mettre le produit de 2 INPUTs dans un autre INPUT

Version imprimable

Bonjour à tous,
J'ai 2 inputs. J'aimerai que lorsque je rentre 2 entiers dans chacuns d'entre eux, le produit des 2 apparaissent dans un 3ème input.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
        <table> 
          <tbody>
            <tr>
              <td><input type="text" class="form-control article_unite"></td>
              <td><input type="text" class="form-control article_quantite"></td>
              <td><input type="text" class="form-control article_total"></td>
            </tr>
          </tbody>
        </table>
 
<script>
$(function(){
        $('#table_article').on('change', '.article_pu', function(){
    var first = $(this).val();
    var second = $(this).parent().next().find('.article_quantite');
    var result = $(this).parent().next().find('.article_total');
 
    first.addEventListener("input", sum);
    second.addEventListener("input", sum);
 
    function sum() {
      
    var one = parseFloat(first.value) || 0;
    var two = parseFloat(second.value) || 0;
      
    var add = one+two;
 
    result.getElementByClassName('article_total').value = add;
    }
 
  });
});
</script>

Difficulté 1 : J'ai l'erreur suivante dans ma console :

Citation:

TypeError: first.addEventListener is not a function

Difficulté 2: j'ai créé un bouton qui me créé une nouvelle ligne de tableau à chaque fois. Donc j'ai besoin de viser la bonne ligne pour avoir le bon total qui lui corresponds.
Peut-être faut-il que j'utilise quelque chose comme ceci?

Code:

var article_refarticle = $(this).parent().next().find('.article_refarticle');

Merci!

02/08/2019, 15h42
SpaceFrog

Code:

var first = $(this).val();

donc un string ...
02/08/2019, 15h43
Zarkoffe
Autant pour moi, mais le pb persiste :
Code:

1 2 var first = $(this).parent().next().find('.article_unite');
02/08/2019, 18h07
Invité
Bonjour,

Ton code est truffé d'erreurs :
- de syntaxe
- de logique
- de mélange (jQuery + JS pur)
- d'inattention
A revoir de A jusqu'à Z.

Merci pour ta réponse.
J'ai tenté de corriger quelques incohérences, peux-tu m'aider à partir de ce code ? merci

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
        <table> 
          <tbody>
            <tr>
              <td><input type="text" class="form-control article_unite"></td>
              <td><input type="text" class="form-control article_quantite"></td>
              <td><input type="text" class="form-control article_total"></td>
            </tr>
          </tbody>
        </table>
 
<script>
$(function(){
        $('#table_article').on('change', '.article_pu', function(){
    var first = getElementsByClassName(('article_unite');
    var second = getElementsByClassName(('article_quantite');
    var result = $(this).parent().next().find('.article_total');
 
    first.addEventListener("input", sum);
    second.addEventListener("input", sum);
 
    function sum() {
      
    var one = parseFloat(first.value) || 0;
    var two = parseFloat(second.value) || 0;
      
    var add = one+two;
 
    result.getElementByClassName('article_total').value = add;
    }
 
  });
});
</script>

03/08/2019, 10h50
Invité

Bonjour,

Déjà, on ne voit aucun élément de classe "article_pu".

Ensuite, mets des console.log, pour voir si tu récupères les bonnes valeurs.

Et ajoute "use strict";au début du script JS.

Bon...

1- Le HTML n'est pas bon.
Si ce sont des valeurs numériques ou décimales, on peut utiliser des <input type="number" />.

MAIS CA, JE TE L'AI DÉJÀ DIT.

N.B. A priori, le total NE doit PAS être modifiable...
alors pourquoi le mettre dans un <input> ? :koi:
SINON, au moins, lui mettre un readonly="readonly".

Code:

1
2
3
4
5
            <tr>
              <td><input type="number" step="0.01" class="form-control article_unite" /></td>
              <td><input type="number" step="1" class="form-control article_quantite" /></td>
              <td><input type="number" step="0.01" class="form-control article_total" readonly="readonly" /></td>
            </tr>

2- Inutile d'aller chercher midi à 14h :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
"use strict";
$(function(){
  $('#table_article').on('input', '.article_unite, .article_quantite', function(){
    var p_u = $(this).closest('tr').find('.article_unite');
    var qty = $(this).closest('tr').find('.article_quantite');
    var tot = $(this).closest('tr').find('.article_total');
    if( p_u.val() != '' && qty.val() != '' )
    {
      tot.val( parseFloat(p_u.val()) * parseFloat(qty.val()) );
    } else {
      tot.val( '' );
    }
  });
});

CETTE SYNTAXE AUSSI (.closest('tr').find(...)), ON TE L'A DEJA DONNEE.

Merci ça fonctionne à merveille! Je comprends un peu mieux comment tu as procédé :)

Dernière question : et si à présent je veux récupérer la somme de tous ces totos dans une div? J'ai essayé ébauche de ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
 
            </tr>
          </tbody>
        </table>
        <div id="sumtotal"></h2> 
 
<script>
"use strict";
$(function(){
  $('#table_article').on('input', '.article_total', function(){
    var total = document.getElementByClass('article_total').value;
    var sumtotal = document.getElementById('#sumtotal');
    
    /*
    var totalPoints = 0;
    $(this).find('input').each(function(){
      totalPoints += $(this).val();
    });
    */
 
    if( total.val() != '')
    {
      sumtotal.val( parseFloat(total.val()) );
    } else {
      sumtotal.val( '' );
    }
  });
});
 
</script>

PS : je ne me sers pas de "(.closest('tr').find(...))" car je veux viser chaque total de mes inputs de chaque ligne (pour faire la somme).

Merci d'avance

05/08/2019, 10h25
Invité

Bonjour,

Encore une fois, tu ne réfléchis pas avant d'écrire ton code...

Et tu continues a mélanger les syntaxes jQuery et js pur.

Ici, il suffit d'une fonction calculsumtotal(), et de l'utilisation de .each().

D'accord merci pour tes conseils, je n'ai pas fais de fonction sum mais j'ai fais ceci, qui j'espère n'est pas trop loin du résultat attendu:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
            </tr>
          </tbody>
        </table>
        <div id="sumtotal"></h2> 
 
<script>
"use strict";
$(function(){
   $('.article_total').each(function(){
     var totalPoints = 0;
     $(this).find('#sumtotal').each(function(){
       totalPoints += $(this).val();
     });
    document.getElementById('#sumtotal') = totalPoints;
});
</script>

Merci d'avance!

C'est n'importe quoi...
Et en plus tu ne tiens aucun compte des conseils... :roll:

Code:

<div id="sumtotal"></div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
"use strict";
$(function(){
  $('#table_article').on('input', '.article_unite, .article_quantite', function(){
    var p_u = $(this).closest('tr').find('.article_unite');
    var qty = $(this).closest('tr').find('.article_quantite');
    var tot = $(this).closest('tr').find('.article_total');
    if( p_u.val() != '' && qty.val() != '' )
    {
      tot.val( parseFloat(p_u.val()) * parseFloat(qty.val()) );
    } else {
      tot.val( '' );
    }
	// Calcul du total général
	calculsumtotal();
 
  });
});
 
function calculsumtotal()
{
	var total = 0;
	$('#table_article .article_total').each( function(){
		var tot = $(this).val();
		if( tot != '' )
		{
			total += parseFloat( tot );
		}
	});
	$('#sumtotal').html( total ); // html(), car <div>
}