Boucle de calcul en Javascript

**andaman** · 19/08/2012, 08h11

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 :

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

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

**Auteur** · 20/08/2012, 02h31

bonsoir,

je n'ai pas compris o� �tait ton probl�me

**andaman** · 20/08/2012, 08h57

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 :

S�lectionner tout - Visualiser dans une fen�tre � part

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

**headmax** · 20/08/2012, 21h32

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

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

Boucle de calcul en Javascript

JavaScript

Discussions similaires

Partager

Partager