Search code examples
htmlforms

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


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>