HTML Form not outputting anything. Getting NaN-CodePudding

I'm trying to get a form to output a number value based on the outcome of two fields. A value input and a radio selection but I can't seem to get it to work.

<form oninput="retVal.value=parseInt(pavVal.value)-(parseInt(pavVal.value)*parseInt(pavCAT.value))">
        <table> 
            <tr>
                <td>
                    <label for="pavVal"><b>PAV:</b></label>
                </td>
                <td>
                    <input type="number" id="pavVal">
                </td>
            </tr>   
            <tr>
                <td>
                    <label for="pavCAT" ><b>CAT:</b></label>
                <td>
                    <input type="checkbox" name="pavCAT" id="pavCAT" value="0.3">
                    <label for="0.3" > N (30%)</label>
                    
                    <input type="checkbox" name="pavCAT" id="pavCAT" value="0.2">
                    <label for="0.2" > S (20%)</label>
                    
                    <input type="checkbox" name="pavCAT" id="pavCAT" value="0.1">
                    <label for="0.1"> B (10%)</label>
                </td>
            </tr>
            <tr>
                <td>
                    <label for="retVal"><b>Retention Value:</b></label>
                </td>
                <td>
                    <output name="retVal" for="pavVal pavCAT"></output>
                </td>
            </tr>
        </table>
    </form>

Anyone able to tell me where I'm going wrong>

CodePudding user response：

Ids must be unique -- there were three #pavCAT. When the browser is told to do anything with #pavCAT, it will find the first #pavCAT do whatever it was supposed to do then quit, leaving the other 2 #pavCATs untouched as if they never existed. The easiest solution is to suffix each id with a number.

The rest of the code should work since in this case the id #pavCAT is just as accessible as the name [name="pavCAT"].

Also, the HTML had checkmarks not radios.

The inline event handler is now streamlined:

oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)"

Note that parseInt() isn't used to convert the string values into numbers. That's because the strings are being coerced into numbers by the use of these operators: - and *.

<form id='calc' oninput = "retVal.value = pavVal.value - (pavVal.value * pavCAT.value)">
  <table>
    <tr>
      <td>
        <label for="pavVal"><b>PAV:</b></label>
      </td>
      <td>
        <input id="pavVal" type="number">
      </td>
    </tr>
    <tr>
      <td>
        <label for="pavCAT"><b>CAT:</b></label>
        </td>
        <td>
          <input id="pavCAT3" name="pavCAT" type="radio" value="0.3">
          <label for="pavCAT3"> N (30%)</label>

          <input id="pavCAT2" name="pavCAT" type="radio" value="0.2">
          <label for="pavCAT2"> S (20%)</label>
         
          <input id="pavCAT1" name="pavCAT" type="radio" value="0.1">
          <label for="pavCAT1"> B (10%)</label>
        </td>
    </tr>
    <tr>
      <td>
        <label for="retVal"><b>Retention Value:</b></label>
      </td>
      <td>
        <output name="retVal" for="pavVal pavCAT"></output>
      </td>
    </tr>
  </table>
</form>

CodePudding user response：

Your formula is working, but you assigned the same ID for the pavCat checkbox elements, thus returning NaN and not the correctly assigned value - try it yourself with removing/commenting out two ot the pavCAT elements.

imho is a checkbox the wrong UI element - go for a single select dropdown or even better a radio input.

Also parseInt should be parseFloat instead for pavCat. Anyways it's a little bit over the top in this situation and you could totally remove it in this simple example - maybe you have more context to justify parsing it.

                <input type="radio" id="pavCat1" name="pavCAT" value="0.3">
                <label for="0.3" > N (30%)</label>
                <input type="radio" id="pavCat2" name="pavCAT" value="0.2">
                <label for="0.2" > S (20%)</label>
                <input type="radio" id="pavCat3" name="pavCAT" value="0.1">
                <label for="0.1"> B (10%)</label>

https://jsfiddle.net/p9v1f53w/16/