Why does entering decimal numbers in the input fields result in zero?

June 26, 2024

I have a form tag in HTML that has three inputes fields. Basically I want the oninput function to do a simple multiplication for me, but when I enter a decimal number, it gives me zero. For all other numbers it works.

Here is my code

 <form oninput="x.value=parseInt(a.value)*parseInt(b.value)*parseInt(c.value) + '&nbsp Cubic feet'">
  <label for="a">Width (ft)</label> &nbsp
  <input type="number" id="a" value="any"><br><br>
  <label for="b">Length (ft)</label>
  <input type="number" id="b" value="any"><br><br>
  <label for="c">Height (ft)</label>
  <input type="number" id="c" value="any"><br><br>
  <label for="total"> The total valume of your concrete area is : </label>
  <output name="x" for="a b c"></output>
</form>`

>Solution :

Probably you parsed to the wrong data type. If you want to work with decimals, use parseFloat. Else use a ceil before parsing to get 1.

With floats

<form oninput="x.value=parseFloat(a.value)*parseFloat(b.value)*parseFloat(c.value) + '&nbsp Cubic feet'">
  <label for="a">Width (ft)</label> &nbsp
  <input type="number" id="a" value="any"><br><br>
  <label for="b">Length (ft)</label>
  <input type="number" id="b" value="any"><br><br>
  <label for="c">Height (ft)</label>
  <input type="number" id="c" value="any"><br><br>
  <label for="total"> The total valume of your concrete area is : </label>
  <output name="x" for="a b c"></output>
</form>`

With ceil ( I would not know why but just in case 🙂 )

 <form oninput="x.value=parseInt(Math.ceil(a.value))*parseInt(Math.ceil(b.value))*parseInt(Math.ceil(c.value)) + '&nbsp Cubic feet'">
  <label for="a">Width (ft)</label> &nbsp
  <input type="number" id="a" value="any"><br><br>
  <label for="b">Length (ft)</label>
  <input type="number" id="b" value="any"><br><br>
  <label for="c">Height (ft)</label>
  <input type="number" id="c" value="any"><br><br>
  <label for="total"> The total valume of your concrete area is : </label>
  <output name="x" for="a b c"></output>
</form>