How to convert a number input so the first two numbers become decimals with oninput

user_10025129 0
Viewed 641

This may have been answered already, but I can't find it. I am making a form with a number input that will be used to submit an item price (with two decimal places). I want this to be done without having to manually enter the decimal. ideally with some oninput inline javascript. I was playing with the math function but am still new to javascript and am having no luck.

If you enter 1 it should automatically become 0.01

... or 12 becomes 0.12

... 123 becomes 1.23 etc.

Thanks for any help!

<input type=number min=0.00 max=100.00 step=0.01 class='detailsInput' id='priceEntry' name='priceEntry' placeholder='Enter Price' oninput='(Math.round(priceEntry*100)/100)(this)'>
forms input html javascript
4 Answers

Just take the "actual value" of the input. Make sure to remove any decimal dot.... Parse it as an integer and divide by 100. Return. ;)

document.querySelector(".detailsInput").addEventListener("input", function(e){
  let actualValue = e.target.value.replace(".","")
  e.target.value=parseInt(actualValue)/100
})
<input type=number min=0.00 max=100.00 step=0.01 class='detailsInput' id='priceEntry' name='priceEntry' placeholder='Enter Price'>

=== Ho! If you insist on an inline version:

<input type=number min=0.00 max=100.00 step=0.01 class='detailsInput' id='priceEntry' name='priceEntry' placeholder='Enter Price' oninput="this.value=parseInt(this.value.replace('.',''))/100">

user_21595280

first of all, congrats on your first contribution.
secondly, you can achieve that using dataset because you need to save the user input in some place first then executing any kind of filter on it ...
here : i executed the filter on the dataset .. but there might be alot of better ways for UX -if you don't mind using a script tag.
see the example on Codepen 

function explainerHandler(){
  const inputVal = document.querySelector('input').dataset.value

document.querySelector('.input_val').textContent = inputVal
}
<input onkeyup="explainerHandler()" type="number" oninput="let val =this.value;this.dataset.value=val/100;" data-value="0"  />
<p class="input_val"></p>

user_120265450

You specifically asked for an in-line JavaScript solution. ("ideally with some oninput inline javascript.")

You were very close. Using oninput means your code will fire every time the input field is modified. So note the change to onchange instead. This will wait until you are finished editing the field (your can also use onblur).

So the simple algorithm is:

this.value /= 100

That needs to be placed inside an executable function expression:

()=>this.value /= 100

And as you clearly understand, that must be passed with a function wrapper (or IIFE as you used):

(()=>this.value /=100)()

NOTE: You probably realize that using in-line JavaScript is discouraged for many reasons. That is why you will find answers here that encourage you to use JavaScript in other ways. 

<input type=number min=0.00 max=100.00 step=0.01 class='detailsInput' id='priceEntry' name='priceEntry' placeholder='Enter Price' onchange='(()=>this.value /= 100)()'>

user_90783410

This is not using an oninput tag option, but a JS option within a script. Perhaps it will help you or others with a similar issue...

You could use Intl.NumberFormat with an eventlistener. See MOZILLA for more information.

let price = document.getElementById('priceEntry');
let display = document.getElementById('display');
let format = document.getElementById('format');

var currency = new Intl.NumberFormat('en-US', {
  style: 'currency',
  currency: 'USD',
});

format.addEventListener('click', function() {
  // check to see if value is decimal, if not, divide by 100 to make a decimal else format using formatter
  price.value.indexOf(".") == -1 ? display.textContent = currency.format(price.value / 100) : display.textContent = currency.format(price.value);
})
<input type='number' min=0.00 max=100.00 step=0.01 class='detailsInput' id='priceEntry' name='priceEntry' placeholder='Enter Price'><button id="format">format</button>

<div id="display"></div>

user_15335920
Related