nackolysis nackolysis - 5 months ago 86
Javascript Question

how to multiply and sum form values in real time using jquery/javascript

Hello Stackoverflow Coders. I downloaded this code online and now wish to add quantity to each product.
what I want is to be able to multiple each product price by the quantity that is whenever a user selects
quantity of products, it will be multiply by the price and displays results each and then sum all the calculations if
depending on the number of product item selected. thanks

source: http://viralpatel.net/blogs/sum-html-textbox-values-using-jquery-javascript/

<html>
<head>
<title>Sum Html Textbox Values using jQuery/JavaScript</title>
<style>
body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color:#174C68;
}
.txt {
background-color: #FEFFB0;
font-weight: bold;
text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">

<th>no</th>
<th>product</th>
<th>price</th>
<th>quantity</th>

<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" type="text" name="txt" value="500" /></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>

<tr>


<td>2</td>
<td>Cheese</td>
<td><input class="txt" type="text" name="txt" value="250"/></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input class="txt" type="text" name="txt" value="400"/></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>

<tr id="summation">
<td>&nbsp;</td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>

</tr>
</table>

<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));
}
</script>
</body>
</html>

Answer

This requires some minor changes in your html and js like below

<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
   <th>no</th>
   <th>product</th>
   <th>price</th>
   <th>quantity</th>
   <tr>
      <td width="40px">1</td>
      <td>Butter</td>
      <td><input class="txt" type="text" name="txt" value="500" /></td>
      <td>
         <select name="qty" class="qty-txt" />
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>2</td>
      <td>Cheese</td>
      <td><input class="txt"  type="text" name="txt" value="250"/></td>
      <td>
         <select name="qty" class="qty-txt" />
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
         </select>
      </td>
   </tr>
   <tr>
      <td>3</td>
      <td>Eggs</td>
      <td><input class="txt"  type="text" name="txt" value="400"/></td>
      <td>
         <select name="qty" class="qty-txt" />
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
         </select>
      </td>
   </tr>
   <tr id="summation">
      <td>&nbsp;</td>
      <td align="right">Sum :</td>
      <td align="center"><span id="sum">0</span></td>
   </tr>
</table>

JS Code:

 $(document).ready(function() {

     $(".txt").keyup(function() {
         calculateSum();
     });

     $('.qty-txt').on('change', 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) {
             //check cooresponding quantity
             var qty = $(this).parents('tr').find('.qty-txt').val();
             sum += (parseFloat(this.value) * parseInt(qty, 10));
         }

     });
     //.toFixed() method will roundoff the final sum to 2 decimal places
     $("#sum").html(sum.toFixed(2));
 }

Link to fiddle.