Comment obtenir la somme totale des valeurs de la zone de saisie en utilisant Javascript?
Je ne suis pas parfait en Javascript .. Je veux afficher la somme totale des valeurs entrées dans les zones de saisie de quantité dans la prochaine zone de saisie nommée total sans rafraîchir la page. Quelqu'un peut-il m'aider à le comprendre ..?
Voici javascript
<script type="text/javascript">
var howmanytoadd = 2;
var rows;
function calc() {
var tot = 0;
for (var i = 0; i < rows.length; i++) {
var linetot = 0;
rows[i].getElementsByTagName('input')[howmanytoadd].value = linetot;
tot += linetot;
}
document.getElementById('total').value = tot
}
onload = function () {
rows = document.getElementById('tab').getElementById('qty1');
for (var i = 0; i < rows.length; i++) {
rows.getElementsByTagName('input')[i].onkeyup = calc;
}
}
</script>
Voici mon code html:
Qty1 : <input type="text" name="qty1" id="qty"/><br>
Qty2 : <input type="text" name="qty2" id="qty"/><br>
Qty3 : <input type="text" name="qty3" id="qty"/><br>
Qty4 : <input type="text" name="qty4" id="qty"/><br>
Qty5 : <input type="text" name="qty5" id="qty"/><br>
Qty6 : <input type="text" name="qty6" id="qty"/><br>
Qty7 : <input type="text" name="qty7" id="qty"/><br>
Qty8 : <input type="text" name="qty8" id="qty"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>
voici une capture d'écran 
Essayer:
Qty1 : <input onblur="findTotal()" type="text" name="qty" id="qty1"/><br>
Qty2 : <input onblur="findTotal()" type="text" name="qty" id="qty2"/><br>
Qty3 : <input onblur="findTotal()" type="text" name="qty" id="qty3"/><br>
Qty4 : <input onblur="findTotal()" type="text" name="qty" id="qty4"/><br>
Qty5 : <input onblur="findTotal()" type="text" name="qty" id="qty5"/><br>
Qty6 : <input onblur="findTotal()" type="text" name="qty" id="qty6"/><br>
Qty7 : <input onblur="findTotal()" type="text" name="qty" id="qty7"/><br>
Qty8 : <input onblur="findTotal()" type="text" name="qty" id="qty8"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>
<script type="text/javascript">
function findTotal(){
var arr = document.getElementsByName('qty');
var tot=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].value))
tot += parseInt(arr[i].value);
}
document.getElementById('total').value = tot;
}
</script>
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color:#174C68;
}
.txt {
background-color: #FEFFB0;
font-weight: bold;
text-align: right;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>4</td>
<td>Milk</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>5</td>
<td>Bread</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr>
<td>6</td>
<td>Soap</td>
<td><input class="txt" type="text" name="txt"/></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>Javascript:
window.sumInputs = function() {
var inputs = document.getElementsByTagName('input'),
result = document.getElementById('total'),
sum = 0;
for(var i=0; i<inputs.length; i++) {
var ip = inputs[i];
if (ip.name && ip.name.indexOf("total") < 0) {
sum += parseInt(ip.value) || 0;
}
}
result.value = sum;
}
Html:
Qty1 : <input type="text" name="qty1" id="qty"/><br>
Qty2 : <input type="text" name="qty2" id="qty"/><br>
Qty3 : <input type="text" name="qty3" id="qty"/><br>
Qty4 : <input type="text" name="qty4" id="qty"/><br>
Qty5 : <input type="text" name="qty5" id="qty"/><br>
Qty6 : <input type="text" name="qty6" id="qty"/><br
Qty7 : <input type="text" name="qty7" id="qty"/><br>
Qty8 : <input type="text" name="qty8" id="qty"/><br>
<br><br>
Total : <input type="text" name="total" id="total"/>
<a href="javascript:sumInputs()">Sum</a>
Exemple: http://jsfiddle.net/fRd9N/1/
La
Essaye ça:
function add()
{
var sum = 0;
var inputs = document.getElementsByTagName("input");
for(i = 0; i <= inputs.length; i++)
{
if( inputs[i].name == 'qty'+i)
{
sum += parseInt(input[i].value);
}
}
console.log(sum)
}
Je dois additionner les éléments de portée, j'ai donc édité la réponse d'Akhil Sekharan ci-dessous.
var arr = document.querySelectorAll('span[id^="score"]');
var total=0;
for(var i=0;i<arr.length;i++){
if(parseInt(arr[i].innerHTML))
total+= parseInt(arr[i].innerHTML);
}
console.log(total)
Vous pouvez changer les éléments avec un autre lien d'éléments qui vous guidera dans l'édition.
Voici une solution plus simple utilisant ce qu'Akhil Sekharan a fourni mais avec un petit changement.
var inputs = document.getElementsByTagName('input');
for (var i = 0; i < inputs.length; i += 1) {
if(parseInt(inputs[i].value)){
inputs[i].value = '';
}
}
document.getElementById('total').value = total;