erickcouto erickcouto - 1 year ago 61
Javascript Question

Multiply input value by data-value and then sum the results

I have nine inputs text and I need to multiply the input value by data-value of each input and then sum the results and display ir on the div.

Input value-1 x data-value-1

+

Input value-2 x data-value-2

+

Input value-3 x data-value-3


... until 9

My code and how far I've gotten:

DEMO



$(function() {
$('.insert').on('keydown', '.quantity-input', function(e){-1!==$.inArray(e.keyCode,[46,8,9,27,13,110,190])||/65|67|86|88/.test(e.keyCode)&&(!0===e.ctrlKey||!0===e.metaKey)||35<=e.keyCode&&40>=e.keyCode||(e.shiftKey||48>e.keyCode||57<e.keyCode)&&(96>e.keyCode||105<e.keyCode)&&e.preventDefault()});
})


$(".quantity-input").change(function(){
if($(this).val()=="") $(this).val(0);
var total = 0;
$(".quantity-input").each(function(index,element){
if ($(element).val()) {
total+= parseInt($(element).val());
}
});
$(".subtotal strong").text(total);
});

$('.quantity-input').keyup(function(event) {
var b = $(this).val();
var c = $(this).data('value');
var d = b * c
alert(d)
});

table
{
width: 100%;
}
table th
{
text-align: center;
}
table td
{
padding: 10px;
width: 10%;
}
table td input
{
width: 100%;
text-align: center;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
<th>8</th>
<th>9</th>
</tr>
</thead>
<tbody>
<tr>
<td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
<td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
<td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
<td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
<td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
<td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
<td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
<td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
<td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
</tr>
<tr>
<td class="subtotal" colspan="9">subtotal: <strong>00</strong></td>
</tr>
<tr>
<td class="total" colspan="9">Total: <strong>00</strong></td>
</tr>
</tbody>
</table>




Answer Source

To make it simple I used input event for the input

$(document).ready(function() {
  $(".quantity-input").on('input',function(){
    var subtotal = 0;
    var total = 0;
    $(".quantity-input").each(function(index,element){
      if ($(element).val()) {
        subtotal += parseInt($(element).val());
        total += parseInt($(element).val()) * parseInt($(element).data('value'));
      }

    });
    $(".subtotal strong").text(subtotal);
      $(".total strong").text(total);
  });
});
table
{
  width: 100%;
}
table th
{
  text-align: center;
}
table td
{
  padding: 10px;
  width: 10%;
}
table td input
{
  width: 100%;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
      <th>9</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
      <td class="insert"><input type="text" class="quantity-input" data-value="5" value="0"></td>
    </tr>
    <tr>
      <td class="subtotal" colspan="9">subtotal: <strong>00</strong></td>
    </tr>
    <tr>
      <td class="total" colspan="9">Total: <strong>00</strong></td>
    </tr>
  </tbody>
</table>

Additional Information you can combine event functions input ,change ... etc

like $(".quantity-input").on('input change',function(){

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download