Discussion :

[Zarkoffe]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Merci!

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

donc un string ...

[Zarkoffe]

Autant pour moi, mais le pb persiste :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
var first = $(this).parent().next().find('.article_unite');

[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.

[Zarkoffe]

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

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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.

[Invité]

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> ?
SINON, au moins, lui mettre un readonly="readonly".

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Zarkoffe]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[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().

[Zarkoffe]

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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!

[Invité]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>
}