CODEWITHSUNDEEP
jqueryhtml
Can1
Can1

Reputation: 87

JQuery input calculation

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" />

Upvotes: 0

Views: 80

Answers (3)

gaetanoM
gaetanoM

Reputation: 42044

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" />

Upvotes: 1

Pranav C Balan
Pranav C Balan

Reputation: 115202

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>

Upvotes: 1

mokiSRB
mokiSRB

Reputation: 1162

Get value of radio button with: 

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

Then you can use Number() function before calculation.

Upvotes: -1

Related Questions