HTML/JavaScript: How can I round off the values in an input type=number having a read-only option

Question

I cannot find a solution on how to round off the values in my input type=number having a read-only option.

HTML code for table:

<table cellspacing="0" cellpadding="1" style="border-collapse: collapse;" width="">
        <thead>
        <tr style="background-color: rgb(255, 255, 255);">
            <td style="text-align: center; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="2"><span style="font-family: Arial; font-size: 10pt;">​</span><span style="font-family: Arial; font-size: 10pt;"><b>FUNCTION NAME</b></span><b><br></b></td>
            <td style="text-align: center; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="2"><span style="font-family: Arial; font-size: 10pt;">​</span><span style="font-family: Arial; font-size: 10pt;"><b>ORGANIZATIONAL OUTCOMES/KEY RESULTS AREA</b></span><b><br></b></td>
            <td style="text-align: center; width: 341px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="2"><span style="font-family: Arial; font-size: 10pt;"><b>QUALITY + OBJECTIVES</b></span><b><br></b><span style="font-family: Arial; font-size: 10pt;"><b>&nbsp;(TARGETS + MEASURES)</b></span></td>
            <td style="text-align: center; width: 437px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="2"><span style="font-family: Arial; font-size: 10pt;"><b>ACTUAL ACCOMPLISHMENTS</b></span></td>
            <td style="text-align: center; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" colspan="4"><span style="font-family: Arial; font-size: 10pt;"><b>RATING</b></span></td>
            <td style="text-align: center; width: 366px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="2"><span style="font-family: Arial; font-size: 10pt;"><b>REMARKS</b></span></td>
        </tr>
        <tr style="background-color: rgb(255, 255, 255);">
            <td style="text-align: center; width: 44px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);"><span style="font-family: Arial; font-size: 10pt;"><b>Q</b></span></td>
            <td style="text-align: center; width: 49px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);"><span style="font-family: Arial; font-size: 10pt;"><b>E</b></span></td>
            <td style="text-align: center; width: 44px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);"><span style="font-family: Arial; font-size: 10pt;"><b>T</b></span></td>
            <td style="text-align: center; width: 47px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);"><span style="font-family: Arial; font-size: 10pt;"><b>A</b></span></td>
        </tr>
        </thead>

        @foreach($ipcrcsassocp as $row)
            <input type="hidden" value="{{$row->form_id}}" name="form_id[]">
            <input type="hidden" value="{{$row->function_name}}" name="function_name[]">
            <input type="hidden" value="{{$row->id}}" name="mfo_id[]">
            <tbody>
                <tr>
                <td style="text-align: left; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->function_name !!}</td>
                <td style="text-align: left; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->mfo_desc !!}</td>
                <td style="text-align: left; width: 341px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->success_indicator_desc !!}</td>
                <td style="text-align: left; width: 437px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->actual_accomplishment_desc !!}</td>
                </tr>
                <tr style="background-color: rgb(255, 255, 255);">
                    <td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
                        <div class="form-label-group">
                            <select name="Q[]" class="form-control form-control-sm q-value" style="width: 50px">
                                <option value="5">5</option>
                                <option value="4">4</option>
                                <option value="3">3</option>
                                <option value="2">2</option>
                                <option value="1">1</option>
                            </select>
                        </div>
                    </td>
                    <td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
                        <div class="form-label-group">
                            <select name="E[]" class="form-control form-control-sm e-value" style="width: 50px">
                                <option value="5">5</option>
                                <option value="4">4</option>
                                <option value="3">3</option>
                                <option value="2">2</option>
                                <option value="1">1</option>
                            </select>
                        </div>
                    </td>
                    <td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
                        <div class="form-label-group">
                            <select name="T[]" class="form-control form-control-sm t-value" style="width: 50px">
                                <option value="5">5</option>
                                <option value="4">4</option>
                                <option value="3">3</option>
                                <option value="2">2</option>
                                <option value="1">1</option>
                            </select>
                        </div>
                    </td>
                    <td rowspan="0" style="text-align: center; border-top: 1pt solid rgb(171, 171, 171); border-right: 1pt solid rgb(171, 171, 171); border-bottom: 1pt solid rgb(171, 171, 171); border-image: initial; border-left: none; background: white; padding: 0.6pt;">
                        <div class="form-label-group">
                        @if($row->function_name == 'Core Functions')
                                <input type="number" oninput="setFourNumberDecimal(this)" class="form-control form-control-sm a-value-core" name="A[]" style="width: 50px" readonly>
                            @elseif($row->function_name == 'Support Functions')
                                <input type="number" oninput="setFourNumberDecimal(this)" class="form-control form-control-sm a-value-support" name="A[]" style="width: 50px" readonly>
                            @endif
                            @if($row->function_name == 'Research and Extension Services')
                                <input type="number" oninput="setFourNumberDecimal(this)" class="form-control form-control-sm a-value-research" name="A[]" style="width: 50px" readonly>
                            @endif

                        </div>
                    </td>

                    <td style="text-align: center; width: 316px; border-width: 1px; border-style: solid; border-color: rgb(171, 171, 171);" rowspan="0">{!! $row->remarks !!}</td>
                </tr>
            </tbody>
            @endforeach
    </table>

Function:

function setFourNumberDecimal(el) {
        el.value = parseFloat(el.value).toFixed(4);
    };

The value in the inputs are also being computed by a Jquery function so I inserted the setFourNumberDecimal() inside of it.

               //COMPUTE THE AVERAGE PER ROW
    $(".q-value, .e-value, .t-value").change(function(){
        let currentRow = $(this).closest('tr');
        let EValue = parseFloat(currentRow.find('.e-value').val());
        let QValue = parseFloat(currentRow.find('.q-value').val());
        let TValue = parseFloat(currentRow.find('.t-value').val());
        currentRow.find('.a-value-core').val((EValue  + QValue + TValue ) / 3);
        currentRow.find('.a-value-support').val((EValue  + QValue + TValue ) / 3);
        currentRow.find('.a-value-research').val((EValue  + QValue + TValue ) / 3);

        setFourNumberDecimal();
         computeAvg();
         computeWeightedScore();
    });

The expected output should round off the values up to 4 decimal places in the input types.

Answer 1

Here is the step-by-step on how my question resolved.

1. Create a function inside a script tag

function setFourNumberDecimal(el) {
  el.value = parseFloat(el.value).toFixed(4);
};

2. Create a Jquery script that uses a.trigger function and call the function created by setFourNumberDecimal as explained by @ihorbond in the comments section

$(".a-value-core, .a-value-support, .a-value-research, #core-total-average, #support-total-average, #research-total-average, #total-weighted-score").trigger("change")
    setFourNumberDecimal();

3. Then add this inside the input element

onchange="setFourNumberDecimal(this)"