Calculate Values OnSelect & Update

Question

I have a dropdown selection field and other fields. It goes like this,

<div class="form-group"><label class="sr-only" for="id_max_size">Max 
   Size</label><select name="max_size" title="" required class="form-control" id="id_max_size">
       <option value="" disabled selected>Size ↓</option>
       <option value="10">AAA</option>
       <option value="20">BBB</option>
       <option value="30">CCC</option>
       <option value="40">DDD</option>
    </select>
  </div>

 <input type="number" name="no_needed" title="" required id="id_no_needed" step="0.01" />
 <input type="number" name="total_price" title="" required id="id_total_price" step="0.01" />

Let's say a user selects AAA, I want to get the value of 'AAA' which is 10 and multiply by 'no_needed' field value inserted by the user and make the result insert in total_price field. Even if the user selects CCC it should follow the same process.

$(document).ready(function () {
   $('select').on('change', function() {
   $('.sr-only').text($('select[name=max_size]').val() * 
   ($('select[name=no_needed]').val()));
  });

 });

It's not working. I really don't know javascript. How do I accomplish this?

You should ask a separate question rather than editing this one. — Nisarg Shah, Apr 03 '18 at 03:06

Nisarg Shah · Accepted Answer · 2017-11-04T12:53:25.617

4

The element with name no_needed is an input, not select.

<input type="number" name="no_needed" title="" required id="id_no_needed" step="0.01" />

So your selector for it should be input[name=no_needed] instead of select[name=no_needed].

Similarly, to select the input with name total_price, the selector would be input[name=total_price]. Also, since you intend to set value of it, instead of settings its .text(), you need to set .val().

See the updated snippet:

$(document).ready(function() {
  $('select').on('change', function() {
    $('input[name=total_price]').val($('select[name=max_size]').val() *
      ($('input[name=no_needed]').val()));
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group"><label class="sr-only" for="id_max_size">Max 
   Size</label><select name="max_size" title="" required class="form-control" id="id_max_size">
       <option value="" disabled selected>Size ↓</option>
       <option value="10">AAA</option>
       <option value="20">BBB</option>
       <option value="30">CCC</option>
       <option value="40">DDD</option>
    </select>
</div>

<input type="number" name="no_needed" title="" required id="id_no_needed" step="0.01" />
<input type="number" name="total_price" title="" required id="id_total_price" step="0.01" />

Also, you could set a change event handler on no_needed input to update the total price even if the size doesn't change:

function recalculatePrice() {
  $('input[name=total_price]').val(
    ($('select[name=max_size]').val() *
    $('input[name=no_needed]').val()).toFixed(2)
  );
}

$(document).ready(function() {
  $('select').on('change', function() {
    recalculatePrice();
  });
  
  $('input[name=no_needed]').on('input', function() {
    if($(this).val()) {
      if(!isNaN($(this).val())) {
        recalculatePrice();  
      } else {
        $(this).val(""); 
      }
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-group"><label class="sr-only" for="id_max_size">Max 
   Size</label><select name="max_size" title="" required class="form-control" id="id_max_size">
       <option value="" disabled selected>Size ↓</option>
       <option value="10">AAA</option>
       <option value="20">BBB</option>
       <option value="30">CCC</option>
       <option value="40">DDD</option>
    </select>
</div>

<input type="number" name="no_needed" title="" required id="id_no_needed" step="0.01" />
<input type="number" name="total_price" title="" required id="id_total_price" step="0.01" />

edited Nov 04 '17 at 12:53

answered Nov 04 '17 at 12:31

Nisarg Shah

14,151
6
34
55

It seems it doesn't show the result in the total price field. No line of code on total_price field. Kindly check it again. – smack Nov 04 '17 at 12:33
@YoYo I missed that in the question. I've updated the answer. – Nisarg Shah Nov 04 '17 at 12:36
How do I enforce the no_needed value to float like this 10.0 or 255.0, and the total_price to have 2 digits decimal like this 780.00 or 1000.00? – smack Nov 04 '17 at 12:41
There are already some good answers about those points. For first, [see this](https://stackoverflow.com/questions/30287531/input-number-validation-restrict-to-enter-only-numbers-or-digits-int-float#30287532) – Nisarg Shah Nov 04 '17 at 12:43
For second, you can use `.toFixed(2)` - to ensure that there are only two decimal points after the number. Try something like `var x=2;console.log(x.toFixed(2));` – Nisarg Shah Nov 04 '17 at 12:44
Can you kindly update the answer in case other people might want the same. – smack Nov 04 '17 at 12:45
@YoYo Sure, I've updated the second snippet in my answer. You can add `$(this).val(parseFloat($(this).val()).toFixed(1));` after recalculatePrice in the `input` event handler to ensure that there is only one digit after decimal point for `no_needed`, but that got annoying to use, so I didn't add it to the answer. – Nisarg Shah Nov 04 '17 at 12:54
Thanks. But I'm just getting straight up value. like 2400 instead of 2400.00. I've added the .toFixed(2). This was added to the total_price. – smack Nov 04 '17 at 12:59
1

@YoYo Weird. Let me check that. – Nisarg Shah Nov 04 '17 at 13:02
Looks like removing the `type=number` fixes that problem. But I am not sure why that is. Since it works fine on Chrome, it could be a bug. – Nisarg Shah Nov 04 '17 at 13:08
Okay. let me change it to text and see. – smack Nov 04 '17 at 13:11
Another question, how do I show the value of the option selected in a read-only field? Lets call the field value_me input type="number" name="value_me" title="" required id="id_value_me" /> So if a user select AAA it will show the value of AAA in the field value_me. – smack Nov 04 '17 at 13:31
It could be something like `$('#id_value_me').val(INTENDED_VALUE)` or `$('input[name=value_me]').val(INTENDED_VALUE)`. You already know how to get the value of `select` there. – Nisarg Shah Nov 04 '17 at 13:34
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/158218/discussion-between-yoyo-and-nisarg-shah). – smack Nov 04 '17 at 13:36
Hello @Nisarg kindly take a look at my updated question again. – smack Apr 02 '18 at 10:03
1

@YoYo if you have a new question, then you should create a new question. StackOverflow is not a forum. Each individual question should be separated so that it is useful to others as well. – David Walschots Apr 02 '18 at 10:53

score 2 · Answer 2 · answered Nov 04 '17 at 12:33

You can get the selected option's value with .val() on the select. Then you need to convert the values of the select and the "no needed" input to integers or floats in order to multiply them.

I also added a fallback to 0 when no value is set.

$(document).ready(function () {
   $('#id_max_size').on('change', function() {
       var selectedValue = parseFloat($(this).val()) || 0,
           noNeededValue = parseFloat($('#id_no_needed').val()) || 0;
       $('#id_total_price').val(selectedValue * noNeededValue);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group"><label class="sr-only" for="id_max_size">Max 
   Size</label><select name="max_size" title="" required class="form-control" id="id_max_size">
       <option value="" disabled selected>Size ↓</option>
       <option value="10">AAA</option>
       <option value="20">BBB</option>
       <option value="30">CCC</option>
       <option value="40">DDD</option>
    </select>
  </div>

 <input type="number" name="no_needed" title="" required id="id_no_needed" step="0.01" />
 <input type="number" name="total_price" title="" required id="id_total_price" step="0.01" />

How do I enforce the no_needed value to float like this 10.0 or 255.0, and the total_price to have 2 digits decimal like this 780.00 or 1000.00? — smack, Nov 04 '17 at 12:41
@YoYo: You could use `.toFixed(1)` for "no_needed" and `.toFixed(2)` for "total_price" - but that doesn't work with input `type="number"`, so you'd have to use a normal text input field and rely on a JS solution to only allow to insert numbers. — Constantin Groß, Nov 04 '17 at 12:48

score 0 · Answer 3 · 2017-11-04T12:36:42.217

You have a few mistakes:

You are using select to select an input--use $('input') instead.
You can use this to refer to the relevant select element inside the event listener callback.

Try this:

$(document).ready(function () {
   $('select').on('change', function() {
   $('input[name=total_price]').text($(this).val() * 
   ($('input[name=no_needed]').val()));
  });
});

score 0 · Answer 4 · answered Nov 04 '17 at 12:41

Here is another solution. Using some common code.

Here is a link to fiddle. https://jsbin.com/cemafiqapi/edit?js,output

$(document).ready(function () {
     $('select').on('change', process);

     $('#id_no_needed').on('change', process);

    function process (e) {
      var factor = $('#id_no_needed').val() || 0;
      var selected = Number($('#id_max_size').val()) || 0;
      $('#id_total_price').val(factor * selected)
     }

});

Calculate Values OnSelect & Update

4 Answers4