Mike Haslam Mike Haslam - 5 months ago 9
jQuery Question

Total function for multiple input-steppers

I am trying to understand how write a total function to call on multiple input-steppers that I used from a library. I did read the documentation of the library on how to call things. Now I can increment & decrement 1 stepper and multiply by a variable, and display in total field. I can't figure out how to change the total function so it can be used on all steppers and displayed in 1 total field. Do I need

if else
or a loop? I'm not sure how to start. Also not sure how to add library here?



$(document).ready(function(){

$(function () {
// Document ready
$('.input-stepper').inputStepper();

});
});


var value1 = 0.95;
var value2 = 4.00;
var value3 = 2.00;

// These are to call inputs
$('#amount1').on('increase', function (e, amount, plugin) {
calculate();

});
$('#amount1').on('decrease', function (e, amount, plugin) {

});

$('#amount2').on('increase', function (e, amount, plugin) {

});
$('#amount2').on('decrease', function (e, amount, plugin) {

});

$('#amount3').on('increase', function (e, amount, plugin) {

});
$('#amount3').on('decrease', function (e, amount, plugin) {

});

// these are to call stepper buttons
$('[data-input-stepper-increase] ').click(function(){

});

$('[data-input-stepper-decrease]').click(function(){

});

function calculate(){
var total = 0;
var quantity = parseInt($('#amount1 ').val());
total = value1 * quantity;
console.log(total);
$('#TotalField').val(total.toFixed(2));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>$0.95 value</h3>
<button data-input-stepper-decrease>-</button>
<input id="amount1"type="text" value="0">
<button data-input-stepper-increase >+</button>

<h3>$4.00 value</h3>
<button data-input-stepper-decrease>-</button>
<input id="amount2"type="text" value="0">
<button data-input-stepper-increase>+</button>

<h3>$2.00 value</h3>
<button data-input-stepper-decrease>-</button>
<input id="amount3"type="text" value="0">
<button data-input-stepper-increase>+</button>

<label>Total</label><input type="text"
class="" id="TotalField" name="TotalField" />





Here is link to library https://github.com/AanZee/input-stepper

link to codpen I am working on

http://codepen.io/Ongomobile/pen/kXogvZ?editors=1111

Answer

I believe the below solution is what you're looking for, judging from your current code:

var value1 = 0.95;
var value2 = 4.00;
var value3 = 2.00;

// these are to call stepper buttons
$('[data-input-stepper-increase] ').click(function(){
     calculate();
  });

 $('[data-input-stepper-decrease]').click(function(){
     calculate();
  });   

function calculate(){
      var total = 0,
      quantity1 = parseInt($('#amount1 ').val()),
      quantity2 = parseInt($('#amount2').val()),
      quantity3 = parseInt($('#amount3 ').val());

    total =  (value1 * quantity1)+(value2 * quantity2)+(value3 * quantity3);

     $('#TotalField').val(total.toFixed(2));
  }