tara tara - 4 months ago 8
CSS Question

Can't Calculate Automatically Javascript with Dropdown not Typing the number

How to calculate A vertically and B vertically from dropdown combo box

Data
A B
----------------------------
1 | 1 | 0
2 | 0 | 1
3 | 0 | 1
----------------------------
Result | 1 | 2 (automatically calculate still can't working)


How to calculate A vertically and B vertically from dropdown combo box and appear on result..


but still can't working well :(

code :

HTML



<select id="k1" class="tes" name="kelayakan1" size="1">
<option value="">-- Pilih Salah Satu --</option>
<option value="1">Layak</option>
<option value="0">Tidak Layak</option>
</select>
<br>
<select id="k2" class="tesy" name="kelayakan2" size="1">
<option value="">-- Pilih Salah Satu --</option>
<option value="1">Layak</option>
<option value="0">Tidak Layak</option>
</select>
<br>
<select id="k3" class="tesl" name="kelayakan2" size="1">
<option value="">-- Pilih Salah Satu --</option>
<option value="1">Layak</option>
<option value="0">Tidak Layak</option>
</select>
<br>
<br>
<table style="width:30%;" border="1">
<thead>
<tr>
<th colspan="5">TES</th>
</tr>
<tr>
<th></th>
<th>A</th>
<th>B</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<div id="aa1" class="layak" style="text-align:center;"></div>
</td>
<td>
<div id="aa2" style="text-align:center;"></div>
</td>
</tr>
<tr>
<td>2</td>
<td>
<div id="bb1" class="layak" style="text-align:center;"></div>
</td>
<td>
<div id="bb2" style="text-align:center;"></div>
</td>
</tr>
<tr>
<td>3</td>
<td>
<div id="cc1" class="layak" style="text-align:center;"></div>
</td>
<td>
<div id="cc2" style="text-align:center;"></div>
</td>
</tr>
<tr>
<td>Result</td>
<td>
<div id="hasil1" style="text-align:center;"></div>
</td>
<td>
<div id="hasil2" style="text-align:center;"></div>
</td>
</tr>
</tbody>
</table>
<br>
<br> I want to calculate A and B vertically ..


Javascript



$(document).ready(function() {
//Iterate through each Textbox and add keyup event handler
$(".tes").each(function() {
$(this).change(function() {
//Initialize total to 0
var ap = document.getElementById('k1').value;
var satu = 1;
var nol = 0;
var aa1 = document.getElementById('aa1');
var aa2 = document.getElementById('aa2');
if (ap == "1") {
aa1.innerHTML = satu;
aa2.innerHTML = nol;
} else {
aa1.innerHTML = nol;
aa2.innerHTML = satu;
}

});
});

$(".tesy").each(function() {
$(this).change(function() {
//Initialize total to 0
var bp = document.getElementById('k2').value;
var satu = 1;
var nol = 0;

var bb1 = document.getElementById('bb1');
var bb2 = document.getElementById('bb2');
if (bp == "1") {
bb1.innerHTML = satu;
bb2.innerHTML = nol;

} else {
bb1.innerHTML = nol;
bb2.innerHTML = satu;
}
});
});

$(".tesl").each(function() {
$(this).change(function() {
//Initialize total to 0
var cp = document.getElementById('k3').value;
var satu = 1;
var nol = 0;

var cc1 = document.getElementById('cc1');
var cc2 = document.getElementById('cc2');
if (cp == "1") {
cc1.innerHTML = satu;
cc2.innerHTML = nol;
} else {
cc1.innerHTML = nol;
cc2.innerHTML = satu;
}
});
});

var total = 0;
$(".layak").each(function() {

if (!isNaN(this.value) && this.value.length != 0) {
total += parseFloat(this.value);
}
});

jml = total;
$("#hasil1").val(jml);


});


in JSFIDDLE : https://jsfiddle.net/taraym/zo5j7wn9/1/

Answer

Working and tested code:

function calculateSum(){

//Calculate Sum Of A
var A = [];  var sumOfA = 0;
$('#tbl_data tr:not(:has(th))').not(':last').each(function(){   
   A.push($(this).find("td:eq(1)").text().trim());
})

for (i = 0; i < A.length; ++i) {      
         if (A[i]!='') {sumOfA += parseInt(A[i]);}
}
$('#tbl_data tr:last').find('td:eq(1)').text(sumOfA);

//Calculate Sum Of B
var B = []; var sumOfB = 0;
$('#tbl_data tr:not(:has(th))').not(':last').each(function(){   
   B.push($(this).find("td:eq(2)").text().trim());
})

for (i = 0; i < B.length; ++i) {      
         if (B[i]!='') {sumOfB += parseInt(B[i]);}
}
$('#tbl_data tr:last').find('td:eq(2)').text(sumOfB);

}

Add calculateSum(); at the end of every dropdown change event.

Working Fiddle

Hope this helps!