CODEWITHSUNDEEP
htmlforms
KJDI 2YDU
KJDI 2YDU

Reputation: 23

How to make html form output show decimal numbers?

I'm having trouble understanding how to make this html form work appropriately. The objective is for the sum of numbers to show as the result using decimal points. Currently its just showing the result in whole numbers which is making the result incorrect. I would appreciate any help, Thanks!

<form action="/action_page.php" oninput="x.value=parseInt(a.value)+parseInt(b.value)+parseInt(c.value)+parseInt(d.value)+parseInt(e.value)+parseInt(f.value)">
  <label for="quantity" style="color:white;">Easy Mode:</label>
  <br><br> 1
  <input type="number" id="a" name="quantity" min="0" max="4" step="0.5"> 2
  <input type="number" id="b" name="quantity" min="0" max="4" step="0.5"> 3
  <input type="number" id="c" name="quantity" min="0" max="4" step="0.5"> 4
  <input type="number" id="d" name="quantity" min="0" max="4" step="0.5"> 5
  <input type="number" id="e" name="quantity" min="0" max="4" step="0.5"> 6
  <input type="number" id="f" name="quantity" min="0" max="4" step="0.5"> =
  <input type="submit" value="Submit">
  <output name="x" for="a b c d e f" style="color:white;" ></output>
</form>

Upvotes: 2

Views: 91

Answers (2)

Fuad modaresi rad
Fuad modaresi rad

Reputation: 11

Nice work I think that you should remove all the "parseInt()" from your code, just it

<form action="/action_page.php" oninput="x.value=(a.value)+(b.value)+(c.value)+(d.value)+(e.value)+(f.value)">
    <label for="quantity" style="color:white;">Easy Mode:</label>
    <br><br> 1
    <input type="number" id="a" name="quantity" min="0" max="4" step="0.5"> 2
    <input type="number" id="b" name="quantity" min="0" max="4" step="0.5"> 3
    <input type="number" id="c" name="quantity" min="0" max="4" step="0.5"> 4
    <input type="number" id="d" name="quantity" min="0" max="4" step="0.5"> 5
    <input type="number" id="e" name="quantity" min="0" max="4" step="0.5"> 6
    <input type="number" id="f" name="quantity" min="0" max="4" step="0.5"> =
    <input type="submit" value="Submit">
    <output name="x" for="a b c d e f" style="color:white;"></output>
</form>

Upvotes: 1

oluwakayode
oluwakayode

Reputation: 182

You're using parseInt which converts the numbers to an integer. Use parseFloat instead.

Upvotes: 1

Related Questions