CODEWITHSUNDEEP
javascripthtmljquery
tariqul anik
tariqul anik

Reputation: 324

Jquery Calculation returns NaN when I want to get percentage value

Here I want to get Main price and get discount percentage which should be calculated the final price after discount should placed in 3rd field. by on keyUp. but it returns NaN. I used parse Int also in jquery . but didn't work

$(document).on('keyup', '#price', function() {
  if ($('#price').val().length > 0 && $('#discount').val().length > 0) {
    var x = $('price').val() - ($('#price').val() * ($('#discount').val() / 100));
    console.log(x); // here it return NaN. 
    $('#discounted_price').val(x); //and there make no changes
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<div class="form-group">
  <label for="price">Price <sup class="text-danger">*</sup></label>
  <input type="number" class="form-control" id="price" placeholder="Enter product Price" name="price" value="{{ old('price') }}">
</div>
<div class="form-group">
  <label for="discount">Discount</label>
  <div class="input-group">
    <input type="number" class="form-control" id="discount" placeholder="Enter product discount Percentage" name="discount" value="{{ old('discount') }}">
    <div class="input-group-prepend">
      <span class="input-group-text" id="inputGroupPrepend">%</span>
    </div>
  </div>
</div>
<div class="form-group">
  <label for="discounted_price">Discounted Price</label>
  <input type="number" class="form-control disabled" id="discounted_price" name="discounted_price" value="{{ old('discounted_price') }}" disabled>
</div>

what should I do now? please help

Upvotes: 1

Views: 887

Answers (1)

Majed Badawi
Majed Badawi

Reputation: 28424

You need to parse the values from string to number. Also, you had a small typo ($('#price') instead of $('price')):

$(document).on('keyup', '#price', function () {
    if ($('#price').val().length > 0 && $('#discount').val().length > 0) {
        var x = parseInt($('#price').val()) - (parseInt($('#price').val()) * (parseInt($('#discount').val()) / 100));
        console.log(x); // here it return NaN. 
        $('#discounted_price').val(x); //and there make no changes
    }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label for="price">Price <sup class="text-danger">*</sup></label>
    <input type="number" class="form-control" id="price"
           placeholder="Enter product Price"
           name="price" value="{{ old('price') }}">
</div>
<div class="form-group">
    <label for="discount">Discount</label>
    <div class="input-group">
        <input type="number" class="form-control" id="discount"
               placeholder="Enter product discount Percentage"
               name="discount" value="{{ old('discount') }}">
        <div class="input-group-prepend">
            <span class="input-group-text" id="inputGroupPrepend">%</span>
        </div>
    </div>
</div>
<div class="form-group">
    <label for="discounted_price">Discounted Price</label>
    <input type="number" class="form-control disabled" id="discounted_price"
           name="discounted_price" value="{{ old('discounted_price') }}" disabled>
</div>

Upvotes: 2

Related Questions