Question 35993 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Get the average selected value of x number of separate select fields – Jquery

I have multiple select fields as star rating field for the users to select while giving a review like the below 2 select fields ( Though I have 5 in my code, adding only 2 here ). Now I am trying to get the values of each selections and attach the average of the selection in the hidden field with the name rating. How can I do it?

    <select name="multi_rating_item_service" id="multi_rating_item_service" class="star-rating" required="">
        <option value="">Rate…</option>
        <option value="5">Perfect</option>
        <option value="4">Good</option>
        <option value="3">Average</option>
        <option value="2">Not that bad</option>
        <option value="1">Very poor</option>
    </select>
    <select name="multi_rating_item_delivery" id="multi_rating_item_delivery" class="star-rating" required="">
        <option value="">Rate…</option>
        <option value="5">Perfect</option>
        <option value="4">Good</option>
        <option value="3">Average</option>
        <option value="2">Not that bad</option>
        <option value="1">Very poor</option>
    </select>
    <input type="hidden" name="rating" id="rating" value="here goes the average" />

I tried to use jquery but was not able to do it after multiple tries and was fed up with it. So, I removed all the jquery I did and instead calculated the average in PHP while submitting the form. Though it works but for some reason, there were some unintentional issues that came with it. So, I think we need to submit the value of the rating using the hidden field to eliminate those issues. If you can help, that will be very beneficial for me.

Update:
I think you may not have gotten enough information in the original post. So, here is an update. I have multiple Add Review forms on the same order page( that ask for reviews from customers for each product in that order ). So, this creates a level of complexity to work on all the forms.

Then, another complexity is that the admin can configure what ratings s/he wants to add( S/he also sets the ID of the type of rating in the admin panel ) that will be displayed to the customers as select fields. So, this adds another level of complexity where we don’t know the ID names of the select fields so that we can hard code the ID values in a variable.

Tags:

2

Answers


  1. 0

    You need to use the following inside script:

    • change() function to select the HTML select elements on any input change.
    • Calculate the average based on the number of elements. For example: since there are only two HTML select elements present average will be like: (val1 + val2) / 2 (2 elements)
    $(document).ready(function() {
  $('#multi_rating_item_service, #multi_rating_item_delivery').change(function() {
    var val1 = $('#multi_rating_item_service').val();
    var val2 = $('#multi_rating_item_delivery').val();
    var average = (parseInt(val1) + parseInt(val2)) / 2;
    $('#rating').val(average);
    console.log(average);
  });
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="multi_rating_item_service" id="multi_rating_item_service" class="star-rating" required="">
  <option value="">Rate…</option>
  <option value="5">Perfect</option>
  <option value="4">Good</option>
  <option value="3">Average</option>
  <option value="2">Not that bad</option>
  <option value="1">Very poor</option>
</select>
<select name="multi_rating_item_delivery" id="multi_rating_item_delivery" class="star-rating" required="">
  <option value="">Rate…</option>
  <option value="5">Perfect</option>
  <option value="4">Good</option>
  <option value="3">Average</option>
  <option value="2">Not that bad</option>
  <option value="1">Very poor</option>
</select>
<input type="hidden" name="rating" id="rating" value="here goes the average" />
    Login or Signup to reply.
  2. 0

    You can do this with JQuery using an onChange event handler:

    $('#id1, #id2, #id3, #idN').change((event) => {
  let first = Number.parseInt($('#id1').val());
  let second = Number.parseInt($('#id2').val());
  let nth = Number.parseInt($('#idN').val());

  const average = (first + second + nth) / n;

  $('#rating').val(average);
});

    The pseudocode attaches the onChange event handler to all the select elements, and when any of them are changed, it will recalculate the average.

    For what it’s worth, you can also do this using plain JS. Plain JS comes with a small (most times negligible) performance improvement, but a lot of 3rd party packages are starting to move away from JQuery back to plain JS. The querySelector function in JS works the same as the JQuery selector.

    Edit for update: If you don’t know the ID of the select elements, you can still use DOM traversal to get the same effect. Use the ID of the form, and then apply the onChange handler to all selects under it. In the event handler, you can then grab all the select elements into an array, loop over it using forEach or possibly map to get the sum of the select values, then divide by the length of the array.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search