44

my assignment is to make weight calculator but due to limitations of university I am not able to use all tags so I write code it works fine but gives me a error of please enter a valid value the two nearest valid value are ***number*** and ***number***.

I think that is because of the number attribute in input tag but I can not able to find what's wrong and how to correct it.

There is one more error if I only calculate one conversion output flash on screen and vanished if I get output in all fields then answer is shown.

<html>

<head>
  <title>Weight Convertor Calculator</title>
  <script>
    var z;
    var x;

    function converter() {
      if (document.weight.kg.value >= 1) {
        x = document.weight.kg.value;
        document.getElementById("g").value = x * 1000;
        document.getElementById("p").value = x * 2.2046;
        document.getElementById("m").value = x * 1000000;
        document.getElementById("ut").value = x * 0.0011023;
        z = 35.274 * x;
        document.getElementById("o").value = z;

      } else {
        window.alert("please enter any number greater than 0");
      }
    }
  </script>
</head>

<body bgcolor="#b3f0ff">
  <h1 align="center" style="color:#ff0066;"> Weight Calculator</h1>
  <br>
  <br>
  <form name="weight" method="post">
    <table align="center" style="color:#ff0066;">
      <tr>
        <td><b>Enter your weight in Kg:</b></td>
        <td><input type="number" id="kg" name="kilogram" placeholder="enter_any_number"></td>
      </tr>
      <tr>
        <td align="right"><input type="submit" value="Convert" onClick="converter(kg.value)"></td>
        <td><input type="reset"></td>
      </tr>
      <tr>
        <td align="right"><b>weight in Grams=</b></td>
        <td><input type="number" id="g" name="gram"></td>
      </tr>
      <tr>
        <td align="right"><b>weight in Pounds=</b></td>
        <td><input type="text" id="p" name="pound"></td>
      </tr>
      <tr>
        <td align="right"><b>weight in MilliGrams=</b></td>
        <td><input type="number" id="m" name="milligram"></td>
      </tr>
      <tr>
        <td align="right"><b>weight in US Ton=</b></td>
        <td><input type="text" id="ut" name="uton"></td>
      </tr>
      <tr>
        <td align="right"><b>weight in Ounces=</b></td>
        <td><input type="number" id="o" name="ounce"></td>
      </tr>
    </table>
  </form><br>
  <p align="center" style="color:#ff0066;"><b>NOTE: Enter only numerical 
      value which is greater than 0</b></p>
</body>

</html>

0

4 Answers 4

178

Try adding the attribute step="any" to your input. That helped me.

3
  • 4
    This is the correct answer. Relevant documentation: developer.mozilla.org/en-US/docs/Web/HTML/Element/input/…
    – alexg
    Commented Sep 29, 2020 at 8:58
  • I had this issue with the datetimepicker and this suggestion fixed it. Commented Jul 12, 2022 at 3:13
  • 3
    Can't believe I've been making websites for a decade and didn't know this... god this feels so dumb... Thank you so much
    – Justin
    Commented Jul 13, 2023 at 6:08
12

No need to make input type 'text', just add one attribute step="0.01" with type="number" to accept decimal values.

2
  1. In number inputs fragments are not allowed, so you need to use an text input.
  2. Your form will be submitted: data gone

Here you can find a demo that works, based on your code.

1
  • It's not necessary to use a text input. What does "data gone" mean?
    – isherwood
    Commented Aug 8, 2022 at 18:48
-2

Changing input typ from number to text will work.

3
  • 2
    but I need numbers only. Commented Jan 3, 2020 at 16:41
  • setting type='text' is a work around but does not answer the question using step='any' is the best way. Commented May 16, 2021 at 5:39
  • if you need to use number, you can add title="" to override the browser's default
    – Ofer Segev
    Commented Jul 25, 2021 at 13:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.