How to associate two inputs in JavaScript?

Question

I have this code:

 $(document).ready(function(){ $('.container select').each(function(){ $(this).on('change', function(){ var selectedVal = $(this).val(); //console.log(selectedVal); }); }); $('input').on('change', function () { var sum = 0; $('input').each(function() { sum += Number($(this).val()); }); $('.total span').html(sum); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='container'> <div class='full'> <input type='number' value=''> <select name='select1'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='full'> <input type='number' value=''> <select name='select2'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='full'> <input type='number' value=''> <select name='select3'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='total'> Total nr: <span>5(2 A1, 3 A2)</span> </div> </div> 

Is it possible that on change of the select and the input of type number to modify the total number like in the code above using JavaScript/jQuery? Can anyone help me with this please.

On every change on the inputs or select fields I need to calculate total number of A1 and total number of A2. Hope this make sense. And display them beside the total number.

JSFiddle

Answer 1

We can't give you the full code but I tried to provide some logic for what you want.I think you want some thing like this:

 //create a json to collect the sum of numbers var number = { a1: 0, a2: 0, a1_count:0, a2_count:0 }; //check in select change $(".select").change(function() { //flush previous calculation before using again number.a1=0,number.a2=0,number.a1_count=0,number.a2_count=0; //check all the select value and get the corresponding input value $(".select").each(function() { var valueType = $(this).val(); if (valueType == "a1") { number[valueType+"_count"]=number[valueType+"_count"]+1; number[valueType] = number[valueType] + parseInt($(this).prev().val()||0); } else if (valueType == "a2") { number[valueType+"_count"]=number[valueType+"_count"]+1; number[valueType] = number[valueType] + parseInt($(this).prev().val()||0); } }); $("#total").html('Total:'+(number.a1+number.a2)+',A1:'+number.a1+'('+number.a1_count+'),A2:'+number.a1+'('+number.a2_count+')'); }) 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class='container'> <div class='full'> <input type='number' value=''> <select name='select1' class='select'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='full'> <input type='number' value=''> <select name='select2' class='select'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='full'> <input type='number' value=''> <select name='select3' class='select'> <option value='a1'>A1</option> <option value='a2'>A2</option> </select> </div> <div class='total' id="total"> </div> </div> 

Answer 2

This will work for any arbitrary list in the select.

function change() {
  var res = {}, fulls = $('.container .full');
  fulls.each(function(index){
    var selected = $(this).find('select > option:selected').text();
    if (! res[selected]) res[selected] = 0;
    res[selected] += 1*$(this).find('input[type="number"]').val();
  });
  var detail = "", total = 0;
  for(prop in res) {
    if (res.hasOwnProperty(prop)) {
      try {
        var val = 1*res[prop];
        detail += ", "+val+" "+prop;
        total += val;
      }catch(e){}
    }
  }
  $('.total > span').text(""+total+" ("+detail.substr(2)+")");
}

$().add('.container .full input[type="number"]')
   .add('.container .full select[name^="select"]')
   .on('change', change);