Somme de champs inputs automatique

Version imprimable

Bonjour,

J’explique le script que j'ai :

J'ai un champ Quantité / Prix / Total en dessous, j'ai des champs Dynamiques en jquery (+ et -)
Le total de tous ce petit monde se calcul automatiquement via ces JS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type='text/javascript'>
function multiply(id){
                var quantite=(!isNaN(document.getElementById('quant'+id).value))?Number(document.getElementById('quant'+id).value):"x";
                var prix=(!isNaN(document.getElementById('pu'+id).value))?Number(document.getElementById('pu'+id).value):"x";
               document.getElementById('total'+id).value=(quantite!="x" && prix!="x")?quantite*prix:'???';
}
</script>
 
<script type='text/javascript'>
function multiply2(){
                var quantite=(!isNaN(document.getElementById('quant1').value))?Number(document.getElementById('quant1').value):"x";
                var prix=(!isNaN(document.getElementById('pu1').value))?Number(document.getElementById('pu1').value):"x";
               document.getElementById('total1').value=(quantite!="x" && prix!="x")?quantite*prix:'???';
                }  
 
</script>

Après de multiples essais je demande votre aide pour faire la même choses mais avec Total1 + 'total'+id.

J'ai plus ou moins réussi avec ce code mais celui-ci n'est pas automatique obligé de ressaisir le champ total

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
function calculer(id) {
	var inputA = parseFloat(document.getElementById('total1').value);	
	var inputB = parseFloat(document.getElementById('total'+id).value);	
	var res='?';
	if (!isNaN(inputA) && !isNaN(inputB)) {
	    res = parseFloat(inputA + inputB); 
		document.getElementById('resultat').innerHTML = res;
	} else res = '?';
}
window.onload = function() { calculer(id); };
</script>

Merci à vous et pour votre aide. :)

24/06/2016, 23h03
01001111

Petite note au préalable : il n'est pas nécessaire d'appliquer parseFloat à inputA+inputB vu que c'est déjà fait sur les deux valeurs.

Je ne comprends pas bien ta question : quel est le champ total que tu dois ressaisir ? total1 ou 'total'+id ?
Dans un cas comme dans l'autre, il suffit que tu mettes un écouteur onchange sur les deux champs avec un appel de calculer, mais nous n'avons pas de vue sur ton html donc il est difficile de voir comment tu procèdes de manière globale.
24/06/2016, 23h14
c3dric49000

Merci 01001111,

En faite il faut que je fasse total1 + totalID
Le total 1 est un champs statique qui est en permance dans mon script les ensuite le totalID prend le relai et commence à + 2 et indéfiniment.
Merci pour les conseils je vais regarder cela :)
25/06/2016, 09h24
NoSmoking

Bonjour,
peut être que cette discussion pourra t'aider : Calcul et mise à jour automatique des champs
25/06/2016, 11h09
c3dric49000

Merci à toi NoSmoking, je regarde cela :)
Ps: super le script
Ps2: je me prend méchamment la tête avec mes texte dynamique en faite :(
http://nsa37.casimages.com/img/2016/...5356529462.png

Re moi

J'ai oublié de mettre un qui fonctionne presque :
Code:

1 2 3 4 5 6 7 8 <script type="text/javascript"> function computeResult(id) { var value1 = document.getElementById('total1').value; var value2 = document.getElementById('total'+id).value; result.value = parseFloat (value1) + parseFloat (value2); } </script>
La partie Result ne se met pas à jour si il y a seulement un champ de rempli, de plus l’addition fonctionne mais il ajoute le total1 et la dernière ligne créée dynamiquement (Si 3 + 2 + 3 = il écrit 6). Je vois cela ce soir (voir cette nuit :( ) sur ce script via l'aide de NoSmoking

@++

25/06/2016, 18h49
NoSmoking

Pour commencer un truc qui n'est pas terrible est ton window.onload = function() { calculer(id); };, que vaut id au chargement ?

Peut être devrais tu nous fournir le HTML d'une ligne, perso je ne suis pas fan du tout de l'utilisation des ID dans ce cas.

Merci de ta réponse, les id's sont générés pour mon formulaire dynamique pour l'envoi à la bdd

Voici le js qui gère les inputs dynamiques (les ID's) :

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
 <script>  
 $(document).ready(function(){  
      var i=1;  
      $('#add').click(function(){  
           i++;  
           $('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="designation[]" placeholder="Designation" class="form-control name_list" /></td><td><select name="conditionnement[]" id="conditionnement'+i+'" value="Conditionnement" class="form-control"><option value="Palette(s)">Palette(s)</option><option value="Demi Palette(s)">Demi Palette(s)</option><option value="Caisse(s)">Caisse(s</option></select></td><td><input type="text" id="quant'+i+'" name="quant[]" placeholder="Quantité" class="form-control name_list" onkeyup="multiply('+i+')"/></td><td><input type="text" id="pu'+i+'" name="pu[]" placeholder="Prix Unitaire"  class="form-control name_list" onkeyup="multiply('+i+')"/></td><td><input type="text" id="total'+i+'" name="total'+i+'" placeholder="Total" class="form-control2" onkeyup="computeResult('+i+');" value="0"></td><td><a name="remove" id="'+i+'" class="btn btn-danger btn_remove"><i class="icon-trash icon-white"></i></a></td></tr>');  
      });  
      $(document).on('click', '.btn_remove', function(){  
           var button_id = $(this).attr("id");   
           $('#row'+button_id+'').remove();  
      });  
      $('#submit').click(function(){            
           $.ajax({  
                url:"ajout_livraison_pro_validation.php",  
                method:"POST",  
                data:$('#add_name').serialize(),  
                success:function(data)  
                {  
                     alert(data);  
                     $('#add_name')[0].reset();  
                }  
           });  
      });  
 });  
 </script>

Le HTML qui gere le TOTAL1:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="table-responsive">
    <table width="100%" class="table table-striped" id="dynamic_field">
        <tr>
            <td><em>Désignation</em></td>
            <td><em>Conditionnement</em></td>
            <td><em>Quantité</em></td>
            <td><em>Prix Unitaire</em></td>
            <td><em>Total</em></td>
            <td align="center" valign="middle" bgcolor="#FFD4D4"><strong>TOTAUX</strong><input type="text" id="result" name="result" class="form-control2" autocomplete="off" placeholder="Total" </td>
        </tr>
        <tr>
            <td><input type="text" id="designation1" name="designation[]" placeholder="Designation" class="form-control name_list" /></td>
            <td><select name="conditionnement[]" id="conditionnement1" value="Conditionnement" class="form-control"><option value="Palette(s)">Palette(s)</option><option value="Demi Palette(s)">Demi Palette(s)</option><option value="Caisse(s)">Caisse(s</option></select></td>
            <td><input type="text" id="quant1" name="quant[]" placeholder="Quantité" class="form-control" autocomplete="off" onkeyup="multiply2()" /></td>
            <td><input type="text" id="pu1" name="pu[]" placeholder="Prix Unitaire" class="form-control" autocomplete="off" onkeyup="multiply2()" /></td>
            <td><input type="text" id="total1" name="total[]" class="form-control2" autocomplete="off" placeholder="Total" onChange="computeResult();" value="0"></td>
            <td><button type="button" name="add" id="add" class="btn btn-info">Ajouter</button></td>
        </tr>
    </table>
    <input type="button" name="submit" id="submit" class="btn btn-success" value="Enregistrer la livraison" />
</div>
</form>

25/06/2016, 23h55
NoSmoking

Tu n'a donc pas besoin d'ID et tu es dans la même, très proche en tout cas, de l'exemple qui se trouve dans le lien que je t'ai fourni.

Qu'est ce qui te bloque !?! l'utilisation de jQuery :D
26/06/2016, 07h50
c3dric49000

Merci à toi de tes réponses.

Des le matin je suis perdu, sans ID unique comment envoyé mes champs dans la base de donnée ?? tu me dérpimes lol tous le reste est basé la dessus et pas spécialement envie de refaire tous a 0
J'ai uploader vite fait ce matin la partie de ma page (sans envoi php) pour que tu vois ce que j'ai.

Je suis bloqué avec le JS pour calculé mes champs dynamiques.

http://papl.esy.es/

Merci à toi

EDIT : J'ai trouvé cela http://demo.smarttutorials.net/invoi...-autocomplete/ je vais regarder le code, je pense devenir dingue d'ici ce soir si je doit tous refaire pour un champ
EDIT2: J'ai réussi partiellement avec l'aide du code ci dessus qui fonctionne tous comme le mien (id)

C'est une mauvaise habitude que de vouloir tout gérer via des ID d'autant que lorsqu'il y a soumission ce sont les NAME qui comptent à l'envoi.

Dans ton code la ligne rajoutée devrait ressembler au final à

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
<tr>
  <td>
    <input name="designation[]" placeholder="Designation" class="form-control name_list" type="text">
  </td>
  <td>
    <select name="conditionnement[]" value="Conditionnement" class="form-control">
      <option value="Palette(s)">Palette(s)</option>
      <option value="Demi Palette(s)">Demi Palette(s)</option>
      <option value="Caisse(s)">Caisse(s</option>
    </select>
  </td>
  <td>
    <input name="quant[]" placeholder="Quantité" class="form-control name_list" type="text">
  </td>
  <td>
    <input name="pu[]" placeholder="Prix Unitaire" class="form-control name_list" type="text">
  </td>
  <td>
    <input name="total[]" placeholder="Total" class="form-control2" value="0" type="text">
  </td>
  <td>
    <button type="button" class="btn btn-danger btn_remove">X</button>
  </td>
</tr>

pas d'ID en vue ;)
A noter que même le total par ligne ne devrait même pas faire l'objet de l'envoi car à gérer coté serveur mais bon !

Comme tu utilises jQuery le code sera moins verbeux et donc oublie tes fonctions « multiply »

• Concernant le calcul d'une ligne tu pourrais, comme dans l'exemple du lien fourni, affecter l'événement de la sorte

Code:

1
2
3
4
5
6
$(document).on('keyup', '[name ^=quant], [name ^=pu]', function () {
    // get le parent TR
    var $parent = $(this).closest('tr');
    // force le recalcul de la ligne    
    calculLigne($parent);
});

avec comme fonction calculLigne :

Code:

1
2
3
4
5
6
7
8
9
function calculLigne(parent) {
    // récup. valeurs des champs de contrôle
    var quantite = parseFloat(parent.find('[name ^=quant]').val()) || 0;
    var prix = parseFloat(parent.find('[name ^=pu]').val()) || 0;
    // calcul et affectation
    parent.find('[name ^=total]').val(quantite * prix);
    // demande mise à jour total
    calculTotal();
}

et comme fonction calculTotal :

Code:

1
2
3
4
5
6
7
8
9
10
function calculTotal() {
    var total = 0;
    // get Element total
    $total = $('[name ^=total]');
    $total.each(function (ind, elem) {
        total += parseFloat($(elem).val())
    });
    // mise à jour du champ
    $('[name=result]').val(total);
}

• Concernant le <button> suppression, la fonction à appliquer est la suivante

Code:

1
2
3
4
5
6
7
$(document).on('click', '.btn_remove', function () {
    var $parent = $(this).closest('tr');
    // supprime la ligne
    $parent.remove();
    // demande mise à jour total
    calculTotal();
});

Je ne vois donc pas d'utilisation d'ID pour les différents éléments à manipuler et tu retrouves exactement le même schéma que celui que je t'avais indiqué.

Il n'y a jamais qu'une façon de faire !

26/06/2016, 11h53
c3dric49000

Merci à toi je vais bien regarder tous codes pour refaire au propre :)

En cherchant les solutions pour remplir ma BDD via des champs dynamique je n'ai trouvé que cette solution qui etait pour moi de plus logique mais apparemment non :p

Maintenant tous fonctionne je vais pouvoir peaufiné tous cela avec ton code entre autre :)

Merci à toi