Finding the sum of select options times inputs fields using jQuery

Question

I am trying to calculate the average for a given subjects and to print the average directly whenever the user change a value.

I am using an input fields to input the marks and a corresponding select options for the hours to each subject. I can do it correctly for one subject but when I add the class 'subject' to other divs. I can't figure how to do the same thing without mixing the subject values.

Part of my HTML code :

<!-- Fourth Subject -->
      <div class="form-row text-center subject">
        <div class="col-4   ">
          <input type="text" name="mark4" class="form-control text-center mark" placeholder="العلامة">
        </div>
        <!--<div class="col-3">
          <input type="text" class="form-control text-center" placeholder="State">
        </div>-->
        <select id="select" name="option4" class="custom-select col-4 text-center hours" id="inlineFormCustomSelect">
          <option selected>عدد الساعات</option>
          <option value="1">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <div class="col-4">
          <input type="text" name='subject4' class="form-control text-center" placeholder="إسم المادة">
        </div>
      </div>
      <!-- End of Fourth Subject -->
      </br>
      <!-- Fifth Subject -->
      <div class="form-row text-center subject">
        <div class="col-4   ">
          <input type="text" name="mark5" class="form-control text-center mark" placeholder="العلامة">
        </div>
        <!--<div class="col-3">
          <input type="text" class="form-control text-center" placeholder="State">
        </div>-->
        <select id="select" name="option5" class="custom-select col-4 text-center hours" id="inlineFormCustomSelect">
          <option  selected>عدد الساعات</option>
          <option value="1">0</option>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>
        <div class="col-4">
          <input type="text" name='subject5' class="form-control text-center" placeholder="إسم المادة">
        </div>
      </div>
      <!-- End of Fifth Subject -->

And here is how I get the values for one subject using jQuery:

$('.subject').keyup(function () {

  var mark = 0;
  var hours = 0;
  $('.mark').change(function() {
    mark = Number($(this).val());
    console.log('mark is ' + mark);
    hours = $('select[name=option5]').val();
    $(".hours").change(function() {
      hours = $('select[name=option5]').val();
      console.log('hours are ' + hours);
    });
    $('#avg').val(mark*hours);
  });

  $(".hours").change(function() {
    hours = $('select[name=option5]').val();
    console.log('hours are ' + hours);

    $('.mark').each(function() {
      mark = Number($(this).val());
      console.log('mark is ' + mark);
      $('#avg').val(mark*hours);
    });
  });
});

the avg should be (mark1 * hours_for_mark1 + mark2 * hours_for_mark_2) / number_of_hours. Is there any way to do it using jQuery ? or even a better structure !?

Yavuz Tas · Accepted Answer · 2019-01-27 18:03:40Z

2

You have serious problems when adding event handlers on dom elements. For example you should not add new events inside keyup because it causes to be added another event listener every time you press a key and duplicate executions will be happen. Try this below it is quite self explanatory:

var handler = function() {
  var total = 0;
  var totalHours = 0;
  $('.subject').each(function(){
    var mark = Number($(this).find('.mark').val())
    var hours = Number($(this).find('.hours').val())
    total += mark * hours;
    totalHours += hours;
  })

  $('#avg').text(total/totalHours);

}
$('.subject .mark').keyup(handler)
$('.subject .hours').change(handler)

Also you can check the solution in jsbin: https://jsbin.com/timugivobi/edit?html,js,output Hope it helps!

answered Jan 27, 2019 at 18:03

Yavuz Tas

3544 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Mohammad Tbeishat Over a year ago

Thank you a lot Yavuz Tas. I had to set hours = 0 if the value was NaN. To calculate the value even if the number of the subjects entered by the user is less than all subjects and that's all. Thank you again.

Collectives™ on Stack Overflow

Finding the sum of select options times inputs fields using jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related