Adding a formula to calculate a price onkeyup from values via inputBox

Question

I've got a pricing page with two plans. On the first pricing plan, I'm adding a feature where a user can type in a value and a price for that value will return on the right-hand side (onkeyup). See how it works here. This is the code that has already been implemented:

var inputBox = document.getElementById('orderValue');

inputBox.onkeyup = function() {
  document.getElementById('deliveryPrice').innerHTML = inputBox.value;
}

I need to add a formula to the output value, (value * 0.025) + 4. Then I would need to format everything as a currency (£000,000.000) onkeyup too and output value. Can anyone help?

Break this down in to steps. The formula can be written exactly as you have it in the question. To format a value to 2 decimal places see [this answer](https://stackoverflow.com/a/6134070/519413), and to add the `,` to group the number in thousands, see [this answer](https://stackoverflow.com/a/2901298/519413) — Rory McCrossan, Jan 23 '19 at 10:35
Here you can see some [other answers](https://stackoverflow.com/a/21255239/4071759). — James Garcia, Jan 23 '19 at 10:53
I posted the answe. hope you will get what you are looking for. do give thums up — Amir shah, Jan 23 '19 at 10:55

score 0 · Answer 1 · answered Jan 23 '19 at 10:41

You can store the result of your formula in a new variable and then use toLocaleString() to convert your new number into a string which is comma separated. Lastly you can use the HTML entity £ as a prefix to your new value to add the pounds symbol.

See working example below:

var inputBox = document.getElementById('orderValue');
var outputElem = document.getElementById('deliveryPrice');
inputBox.onkeyup = function() {
  var newValue = this.value * 0.025 + 4;
  outputElem.innerHTML = "&pound;" + newValue.toLocaleString();;
}

<input type="number" id="orderValue" />
<span id="deliveryPrice"></span>

score 0 · Answer 2 · answered Jan 23 '19 at 10:44

You can use regex to add space after every 3 characters and add £ to add the currency symbol

var inputBox = document.getElementById('orderValue');
inputBox.onkeyup = function(){
  var val = (Number(inputBox.value)* 0.025) + 4;
  val = val.toFixed(3).replace(/\d(?=(\d{3})+\.)/g, ' ')
  document.getElementById('deliveryPrice').innerHTML = "&pound; "+val;
}

score 0 · Accepted Answer · answered Jan 23 '19 at 10:49

var elDeliveryPrice = document.getElementById('deliveryPrice');
var elOrderValue = document.getElementById('orderValue');
var formatter = new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' });

elOrderValue.addEventListener('keyup', _ => {
    let curVal = elOrderValue.value; 

    let curValFloat = parseFloat(curVal);
    if (isNaN(curValFloat)) {
        elDeliveryPrice.innerHTML = '';
        return;
    }

    elDeliveryPrice.innerHTML = formatter.format((curValFloat * 0.025) + 4);
});

Worked perfectly, I also need the inputBox to display the same currency formatting on keyup too - have an idea how to include it? — Chris Jordan, Jan 23 '19 at 11:48

score 0 · Answer 4 · answered Jan 23 '19 at 10:54

here is the complete working code. See Sacreenshot http://prntscr.com/mazqw1

var inputBox = document.getElementById('orderValue');
inputBox.onkeyup = function(){
var x=parseFloat(Math.round(((inputBox.value* 0.025) + 4) * 100) / 100).toFixed(3);
var x=x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
document.getElementById('deliveryPrice').innerHTML =x;
}

Adding a formula to calculate a price onkeyup from values via inputBox

4 Answers4