JQuery input calculation

Question

I try to make calculation on order page but there is a problem about radio input. If i remove radio inputs, the calculation works but with this condition, it show 0. Could you help me?

$('#typeof, #cars, #distance').on('keyup change', function() {
  var ser = $('#typeof').val();
  var dist = $('#distance').val();
  var car = $('#cars').val();
  var res = ser * dist * car;
  $('#result').val(res || 0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Enter Distance:
<input id="distance" />
<div class="form-group1">
  <label for="typeofservice">Type of Service:</label>
  <input type="radio" name="optionsRadios5" id="typeof" value="1">1
  <input type="radio" name="optionsRadios5" id="typeof" value="2">2
</div>

<div class="styled-select">
  <select name="dropdown" id="cars">
    <option value="1">Mercedes</option>
    <option value="2">Scania</option>
    <option value="3">Renault</option>
    <option value="4">MAN</option>
  </select>
</div>
<br>
<br>Result:
<input id="result" />

you can't use same id twice on different element

Garvit Mangal
– Garvit Mangal

2016-05-20 10:29:08 +00:00
Commented May 20, 2016 at 10:29 — Garvit Mangal
– Garvit Mangal, Commented May 20, 2016 at 10:29

Pranav C Balan · Accepted Answer · 2016-05-20 10:35:08Z

The id should be unique always use same class instead for group of elements and get checked radio by using :checked pseudo-selector. Also parse values to convert to number using Number() or parseFloat().

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

Enter Distance:
<input id="distance" />
<div class="form-group1">
  <label for="typeofservice">Type of Service:</label>
  <input type="radio" name="optionsRadios5" class="typeof" value="1">1
  <input type="radio" name="optionsRadios5" class="typeof" value="2">2
</div>

<div class="styled-select">
  <select name="dropdown" id="cars">
    <option value="1">Mercedes</option>
    <option value="2">Scania</option>
    <option value="3">Renault</option>
    <option value="4">MAN</option>
  </select>
</div>
<br>
<br>Result:
<input id="result" />

<script>
  $('.typeof, #cars, #distance').on('keyup change', function() {
    var ser = Number($('.typeof:checked').val());
    var dist = Number($('#distance').val());
    var car = Number($('#cars').val());
    var res = ser * dist * car;
    $('#result').val(res || 0);
  });
</script>

gaetanoM · Accepted Answer · 2016-05-20 10:44:08Z

The IDs must be unique. So id="typeof" for two different elements is wrong.

If you do not have the IDs of the radio buttons you may always select the checked one with:

$('.form-group1 :radio:checked')

My proposal is:

$(function () {
  $('.form-group1 :radio, #cars, #distance').on('keyup change', function() {
    var ser = +$('.form-group1 :radio:checked').val() || 0;
    var dist = +$('#distance').val() || 0;
    var car = +$('#cars').val() || 0;
    var res = ser * dist * car;
    $('#result').val(res || 0);
  });
});

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

Enter Distance:
<input id="distance" />
<div class="form-group1">
    <label for="typeofservice">Type of Service:</label>
    <input type="radio" name="optionsRadios5" id="typeof1" value="1">1
    <input type="radio" name="optionsRadios5" id="typeof2" value="2">2
</div>

<div class="styled-select">
    <select name="dropdown" id="cars">
        <option value="1">Mercedes</option>
        <option value="2">Scania</option>
        <option value="3">Renault</option>
        <option value="4">MAN</option>
    </select>
</div>
<br>
<br>Result:
<input id="result" />

mokiSRB · Accepted Answer · 2016-05-20 10:23:19Z

-1

Get value of radio button with:

$('input[name=optionsRadios5]:checked').val();

Then you can use Number() function before calculation.

answered May 20, 2016 at 10:23

mokiSRB

1,1728 silver badges18 bronze badges

Collectives™ on Stack Overflow

JQuery input calculation

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related