toFixed not working on input keyup change

Question

I have this input form where I have price, buyer price, and discount. what I want to do is when buyer price has the value, discount automatically count and change value.

I have already done that, but what i want to do is the discount value only up to 2 decimals behind the comma. for now this is what my code looks like

input form:

 <div class="row">
                            <div class="col-md-3">
                                <div class="mb-6">
                                    <label class="form-label" for="price">Price <span class="text-danger">*</span></label>
                                    <div class="input-group">
                                        <div class="input-group-append">
                                            <span class="input-group-text">Rp</span>
                                        </div>
                                        <input type="number" min="0" name="price" class="form-control" id="price" value="{{ old('price') ?? $product?->price }}" required>
                                        <div class="valid-feedback">
                                            Looks good!
                                        </div>
                                    </div>
                                    <div class="text-danger">
                                        <small>{{ $errors->first('price') }}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label class="form-label" for="buyer_price">Buyer Price</label>
                                    <div class="input-group">
                                        <div class="input-group-append">
                                            <span class="input-group-text">Rp</span>
                                        </div>
                                        <input type="number" min="0" name="buyer_price" step="any" class="form-control" id="buyer_price" value="{{ old('buyer_price') ?? $product?->buyer_price }}" required>
                                    </div>
                                    <div class="text-danger">
                                        <small>{{ $errors->first('buyer_price') }}</small>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2">
                                <div class="mb-3">
                                    <label class="form-label" for="discount">Discount</label>
                                    <div class="input-group mb-3">
                                        <input type="number" min="0" max="100" step="0.01" name="discount" class="form-control w-75" id="discount" value="{{ old('discount') ?? $product?->discount ?? 0 }}">
                                        <div class="input-group-append">
                                          <span class="input-group-text">%</span>
                                        </div>
                                        <small class="text-secondary">you can leave it blank if 0</small>
                                    </div>
                                    <div class="text-danger">
                                        <small>{{ $errors->first('discount') }}</small>
                                    </div>
                                </div>
                            </div>
                        </div>

this is my js:

const discountInput = $('#discount')
const buyerPriceInput = $('#buyer_price')
const priceInput = $('#price')
 const countBuyerPrice = () => {
        let discountValue = discountInput.val()
        let discount = discountValue / 100

        let priceValue = priceInput.val()
        let result = priceValue - (priceValue * discount)

        if (discountInput.val() === 0) {
            buyerPriceInput.val(priceValue)
            return
        }

        buyerPriceInput.val(result)
    }

    const countDiscount = () => {
        let priceValue = priceInput.val()
        let buyerValue = buyerPriceInput.val()

        if (discountInput.val() === 0) {
            buyerPriceInput.val(priceValue)
            return
        }

        discountInput.val((priceValue - buyerValue) / priceValue * 100)
    }

        discountInput.on('keyup, change, input', function () {
            countBuyerPrice()
        })

        priceInput.on('keyup, change, input', function () {
            if (discountInput.val() === '') {
                countDiscount()
            } else {
                countBuyerPrice()
            }
        })

        buyerPriceInput.on('keyup, change, input', function () {
            countDiscount().toFixed(2)
        })

this is the result:

what I want to have is the value inside discount only have 2 decimals behind the comma.

The issue isn't that `.toFixed()` doesn't work - you just never use it in your code. — VLAZ, Aug 21 '23 at 08:15
`countDiscount().toFixed(2)` is completely wrong. 1. `countDiscount` does not return a number. 2. Even if it did return a number, the result isn't used at all, so transforming it in any way won't do anything. ; You need to use `toFixed()` on the number you set as a value. — VLAZ, Aug 21 '23 at 08:35

score 1 · Accepted Answer · answered Aug 21 '23 at 08:59

toFixed should be called in countDiscount() where you call discountInput.val, like this:

var discount = (priceValue - buyerValue) / priceValue * 100.0;
discountInput.val(discount.toFixed(2))

See runnable snippet below for a demonstration:

const discountInput = $('#discount')
const buyerPriceInput = $('#buyer_price')
const priceInput = $('#price')
const countBuyerPrice = () => {
    let discountValue = discountInput.val()
    let discount = discountValue / 100

    let priceValue = priceInput.val()
    let result = priceValue - (priceValue * discount)

    if (discountInput.val() === 0) {
        buyerPriceInput.val(priceValue)
        return
    }

    buyerPriceInput.val(result)
}

const countDiscount = () => {
    let priceValue = priceInput.val()
    let buyerValue = buyerPriceInput.val()

    if (discountInput.val() === 0) {
        buyerPriceInput.val(priceValue)
        return
    }

    var discount = (priceValue - buyerValue) / priceValue * 100.0;
    discountInput.val(discount.toFixed(2))
}

discountInput.on('keyup, change, input', function () {
    countBuyerPrice()
})

priceInput.on('keyup, change, input', function () {
    if (discountInput.val() === '') {
        countDiscount()
    } else {
        countBuyerPrice()
    }
})

buyerPriceInput.on('keyup, change, input', function () {
    countDiscount()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
  <label for="price">Price</label>
  <input type="number" min="0" step="0.01" name="price" class="form-control w-75" id="price" value="0">
</div>

<div>
  <label for="buyer_price">Buyer price</label>
  <input type="number" min="0" max="100" step="0.01" name="buyer_price" class="form-control w-75" id="buyer_price" value="0">
</div>

<div>
  <label for="discount">Discount %</label>
  <input type="number" min="0" max="100" step="0.01" name="discount" class="form-control w-75" id="discount" value="0">
</div>

Your backend code must round the value as well or run countDiscount() after the page has loaded.

toFixed not working on input keyup change

1 Answers1