Boucle de calcul en Javascript

Version imprimable

Bonjour,

Je suis entrain de réaliser un formulaire de devis / facture pour une partie admin.

Ce formulaire a la particularité de générer des lignes supplémentaires.
Cependant je suis obligé d'utiliser du javascript pour l'addition des champs (Quantité * Prix). La formule que j'ai trouvé fonctionne mais je ne comprends pas comment je dois faire ma boucle (Javascript et moi; on est pas ami).

Je précise également que lors du traitement php; je revérifie tout.
Je poste mon code actuel ci-dessous.

Est ce que quelqu'un pourrait me donner un coup de pouce ?

Merci d'avance,
David

La partie Javascript

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
<script type="text/javascript">
        function addRow(tableID) {
 
            var table = document.getElementById(tableID);
 
            var rowCount = table.rows.length;
            var row = table.insertRow(rowCount);
 
            var colCount = table.rows[0].cells.length;
 
            for(var i=0; i<colCount; i++) {
 
                var newcell = row.insertCell(i);
 
                newcell.innerHTML = table.rows[0].cells[i].innerHTML;
                //alert(newcell.childNodes);
                switch(newcell.childNodes[0].type) {
                    case "text":
                            newcell.childNodes[0].value = "";
                            break;
                    case "checkbox":
                            newcell.childNodes[0].checked = false;
                            break;
                    case "select-one":
                            newcell.childNodes[0].selectedIndex = 0;
                            break;
                }
            }
        }
 
        function deleteRow(tableID) {
            try {
            var table = document.getElementById(tableID);
            var rowCount = table.rows.length;
 
            for(var i=0; i<rowCount; i++) {
                var row = table.rows[i];
                var chkbox = row.cells[0].childNodes[0];
                if(null != chkbox && true == chkbox.checked) {
                    if(rowCount <= 1) {
                        alert("Cannot delete all the rows.");
                        break;
                    }
                    table.deleteRow(i);
                    rowCount--;
                    i--;
                }
 
 
            }
            }catch(e) {
                alert(e);
            }
        }
function somme(){
        var input1 = isNaN(document.getElementById('amount1').value) ? 0 : document.getElementById('amount1').value;
        var input2 = isNaN(document.getElementById('amount2').value) ? 0 : document.getElementById('amount2').value;
 
        var total_amount = Number(input1) * Number(input2);
 
        //uniquement si suppression de la partie décimale
        //total_amount = parseInt(total_amount);
 
        document.getElementById('total_item').value = total_amount;
}
</script>

La partie Html

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
 
    <input type="button" value="Add Row" onclick="addRow('dataTable')" />
    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    <table width="910px" border="1">
        <td width="25">&nbsp;</td>
        <td width="385">Item</td>
        <td width="100">Quantity</td>
        <td width="120">Unit</td>
        <td width="120">Unit Price</td>
        <td width="120">Amount</td>
    </table>
    <form name="add_quote" action="<?php echo $_SERVER['PHP_SELF'];?>" method="post">
    <table id="dataTable" width="910px" border="1">
        <tr>
            <td width="25"><input type="checkbox" name="chk[]"/></td>
            <td width="385"><input style="width:385px; height:30px" type="text" name="item[]"/></td>
            <td width="100"><input style="width:100px; height:30px" type="text" name="quantity[]" id="amount1" onchange="somme()" onkeyup="somme()" /></td>
            <td width="120">
                <select style="width:120px; height:30px" name="unit[]">
                    <option value="0">-----</option>
                    <option value="1">Box</option>
                    <option value="2">Pcs</option>
                </select>
            </td>
            <td width="120"><input style="width:120px; height:30px" type="text" name="unit_price[]" id="amount2" onchange="somme()" onkeyup="somme()" /></td>
            <td width="120"><input style="width:120px; height:30px" type="text" name="amount[]" id="total_item"  /></td>
        </tr>
    </table>

20/08/2012, 02h31
Auteur

bonsoir,

je n'ai pas compris où était ton problème :koi:

C'est tout simplement que je ne sais comment faire ma boucle avec le code ci-dessous en sachant que j'ai déjà une boucle pour générer mes lignes supplémentaires.

Merci d'avance,
David

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
function somme(){
        var input1 = isNaN(document.getElementById('amount1').value) ? 0 : document.getElementById('amount1').value;
        var input2 = isNaN(document.getElementById('amount2').value) ? 0 : document.getElementById('amount2').value;
 
        var total_amount = Number(input1) * Number(input2);
 
        //uniquement si suppression de la partie décimale
        //total_amount = parseInt(total_amount);
 
        document.getElementById('total_item').value = total_amount;
}

Désolé d'avoir reprit certaine partie surtout la function somme(), il y en avait besoin :

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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
<html>
<head>
<style type="text/css">
.error{
	border: solid 2px red;
}
</style>
<script type="text/javascript">
function addRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	var row = table.insertRow(rowCount);
	var colCount = table.rows[0].cells.length;
	var y = 0;
	for(var i=0; i<colCount; i++) {
		var newcell = row.insertCell(i);
		newcell.innerHTML = table.rows[0].cells[i].innerHTML;
 
		switch(newcell.childNodes[0].type) {
	    	case "text":
	        	newcell.childNodes[0].value = "";
	            break;
	        case "checkbox":
	        	newcell.childNodes[0].checked = false;
	            break;
	        case "select-one":
	            newcell.childNodes[0].selectedIndex = 0;
	            break;
		}
	}
};
 
function deleteRow(tableID) {
	try {
    	var table = document.getElementById(tableID);
    	var rowCount = table.rows.length;
 
        for(var i=0; i<rowCount; i++) {
        	var row = table.rows[i];
        	var chkbox = row.cells[0].childNodes[0];
        	if(null != chkbox && true == chkbox.checked) {
            	if(rowCount <= 1) {
                	alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
	}catch(e) {
    	alert(e);
    }
};
 
function somme(id){
 
	var qtyObj = document.getElementsByName("quantity[]");
	var priceObj = document.getElementsByName("unit_price[]");
	var totalObj = document.getElementsByName("amount[]");
	var typeObj =document.getElementsByName("unit[]");
        var y =0;
 
	for(var i=0; i<qtyObj.length; i++){
		if(qtyObj[i].id == id || priceObj[i].id == id){
			if(qtyObj[i].value != "" && priceObj[i].value != ""){
				var qty   = qtyObj[i].value;
				var price = priceObj[i].value;
				var total = totalObj[i].value;
 
				if(typeObj[i].value != "0"){
					typeObj[i].className = "";
		  			totalObj[i].value = parseInt(qtyObj[i].value) * parseInt(priceObj[i].value);
				}else{
					alert("Veuillez sélectionnez le type d'achat...");
					typeObj[i].className = "error";
				}
			}
		//autre façon de gérer les événement onchange sur tes selects
                // un ti cadeau pour ta future gestion d'exception 'non selection'	
    		typeObj[i].onchange = function(){
			this.className = "";
			getObjectTotal((parseInt(qty) * parseInt(price)),y);
			};
		}
		y++;
	}
};
 
function getObjectTotal(val,i){
	var qtyObj = document.getElementsByName("quantity[]");
	var priceObj = document.getElementsByName("unit_price[]");
	var totalObj = document.getElementsByName("amount[]");
	if(qtyObj[parseInt(i-1)].value != "" && priceObj[parseInt(i-1)].value != ""){
	 totalObj[parseInt(i-1)].value = val;
	}
}
</script>
</head>	
<body>
 
    <input type="button" value="Add Row" onclick="addRow('dataTable')" />
    <input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />
    <table width="910px" border="1">
        <td width="25">&nbsp;</td>
        <td width="385">Item</td>
        <td width="100">Quantity</td>
        <td width="120">Unit</td>
        <td width="120">Unit Price</td>
        <td width="120">Amount</td>
    </table>
    <form name="add_quote" action="6.php" method="post">
    <table id="dataTable" width="910px" border="1">
        <tr>
            <td width="25"><input type="checkbox" name="chk[]"/></td>
            <td width="385"><input style="width:385px; height:30px" type="text" name="item[]"/></td>
            <td width="100"><input style="width:100px; height:30px" type="text" name="quantity[]" id="amount1" onchange="somme(this.id)" onkeyup="somme(this.id)" /></td>
            <td width="120">
                <select style="width:120px; height:30px" name="unit[]">
                    <option value="0">-----</option>
                    <option value="1">Box</option>
                    <option value="2">Pcs</option>
                </select>
            </td>
            <td width="120"><input style="width:120px; height:30px" type="text" name="unit_price[]" id="amount2" onchange="somme(this.id)" onkeyup="somme(this.id)" /></td>
            <td width="120"><input style="width:120px; height:30px" type="text" name="amount[]" id="total_item"  /></td>
        </tr>
    </table>
</body>
</html>

J'espère que ça te convient comme réponse, et si tu pouvais mettre en résolu, ça fait toujours plaisir, une note aussi ;), bonne soirée.