Using jquery sum field input values

Question

Simple problem: I want to sum the values appearing in field inputs and displayed as a cumulative score. I am using jquery to capture the selections and using dictionary traversal to find the score value and place the score in corresponding score input fields.

Example contained in the codepen link below:

Codepen example

HTML:

<div class="row">
        <div class="col">
          <div class="form-group">
          <label>Example select</label>
          <select class="form-control" id="risk_loc_name">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
          </div>
        </div>

<div class="col">
<label for="risk_loc_val">Score</label>
          <input type="text" name="risk_loc_val" id="risk_loc_val" class="form-control risk_score" placeholder=" "> 

        </div>
</div>


<div class="row">
        <div class="col">
          <label>Example select</label>
          <select class="form-control" id="risk_loc_fam">
            <option>Option 1</option>
            <option>Option 2</option>
            <option>Option 3</option>
          </select>
         </div>

 <div class="col">
          <label for="risk_loc_fam_val">Score</label>
          <input type="text" name="risk_loc_fam_val" id="risk_loc_fam_val" class="form-control risk_score" placeholder=" "> 


</div>
  </div>
<br>
<div class="row">
  <div class="col">
    <input type="text" id="risk_sum" name="risk_sum" placeholder="Total risk score">
  </div>
</div>

I want the score to update as options are selected:

const risk_loc_choices = {
 "Option 1": "1", "Option 2": "3", "Option 3": "5"
};

const risk_loc_famil = {
  "Option 1": "1", "Option 2": "3", "Option 3": "5"
};

$(function() {
  //Capture fields
  var risk_loc_name =  $('#risk_loc_name');
  var risk_loc_value = $('#risk_loc_val');
  var risk_loc_fam =  $('#risk_loc_fam');
  var risk_loc_faml_val = $('#risk_loc_fam_val');

  // call to update on load
  updateRisk();
  updateRiskLocFam();

  function updateRisk() {
    var data = risk_loc_name.val();
    var r_val = risk_loc_choices[data];

    risk_loc_value.attr('disabled', 'disabled');
    //for normal input
    risk_loc_value.val('');

    // Append selected value to field
    // for normal input
    risk_loc_value.val( risk_loc_value.val() + r_val );

   };

 function updateRiskLocFam() {
  var data = risk_loc_fam.val();
  var r_val = risk_loc_famil[data];

  risk_loc_faml_val.attr('disabled', 'disabled');
  //for normal input
  risk_loc_faml_val.val('');

  // Append selected value to field
  // for normal input
  risk_loc_faml_val.val( risk_loc_faml_val.val() + r_val );


  };


  // event listener to state dropdown change
  risk_loc_name.on('change', function() {
  updateRisk();
  });

  risk_loc_fam.on('change', function() {
  updateRiskLocFam();
  });
});



$(function(){
  var sels = $('.risk_score');
  var sum = 0;
  sels.each(function() {
    sum+=parseInt($(this).val());
  });
  $('#risk_sum').val(sum);
});

// This doesn't work:

$('.risk_score').on('input', function() {
  var total = 0;
  $('.risk_score').each(function() {
    total += parseInt($(this).val());
  });
  $('#risk_sum').val(total);
});

Everything is in the pen linked above.

Answer 1

Here is the codepen on which I achieved what you want. Use trigger to say that value in your disabled fields has been updated.

const risk_loc_choices = {
  "Option 1": "1", "Option 2": "3", "Option 3": "5"
};

const risk_loc_famil = {
  "Option 1": "1", "Option 2": "3", "Option 3": "5"
};

$(function() {
  //Capture fields
  var risk_loc_name =  $('#risk_loc_name');
  var risk_loc_value = $('#risk_loc_val');
  var risk_loc_fam =  $('#risk_loc_fam');
  var risk_loc_faml_val = $('#risk_loc_fam_val');

  // call to update on load
  updateRisk();
  updateRiskLocFam();

  function updateRisk() {
    var data = risk_loc_name.val();
    var r_val = risk_loc_choices[data];

    risk_loc_value.attr('disabled', 'disabled');
    //for normal input
    risk_loc_value.val('');

    // Append selected value to field
    // for normal input
    risk_loc_value.val( risk_loc_value.val() + r_val );
    risk_loc_value.trigger('change');
  };

function updateRiskLocFam() {
  var data = risk_loc_fam.val();
  var r_val = risk_loc_famil[data];

  risk_loc_faml_val.attr('disabled', 'disabled');
  //for normal input
  risk_loc_faml_val.val('');

  // Append selected value to field
  // for normal input
  risk_loc_faml_val.val( risk_loc_faml_val.val() + r_val );
  risk_loc_faml_val.trigger('change');
};


// event listener to state dropdown change
risk_loc_name.on('change', function() {
    updateRisk();
});

risk_loc_fam.on('change', function() {
    updateRiskLocFam();
});
});

$(function(){
  var sels = $('.risk_score');
  var sum = 0;
  sels.each(function() {
    sum+=parseInt($(this).val());
  });
  $('#risk_sum').val(sum);
});


$('.risk_score').on('change', function() {
  var total = 0;
  $('.risk_score').each(function() {
    total += parseInt($(this).val());
  });
  $('#risk_sum').val(total);
});