javascript - How to calculate html input box values in another input box

Question

Following table is accessing values from mysql table in first two columns (exclude sr.no.) and offering to enter 'obtained marks' in 4th column. I have also made three columns after obtained marks which are 'percentage', 'grade' and remarks. I want to calculate percentage automatically when user enters marks in obtained marks column and navigates to next input box which is in second row:

<table id = "result" class="data-table">

        <caption class="title"></caption>
        <thead>
            <tr>    
                <th><strong>Sr.No.</strong></th>
                <th><strong>Student ID</strong></th>
                <th align="center"><strong>Student Name</strong></th>
                <th style="text-align: center;"><strong>Obtained Marks</strong></th>
                <th style="text-align: center;"><strong>Percentage</th>
                <th style="text-align: center;"><strong>Grade</strong></th>
                <th style="text-align: center;"><strong>Remarks</strong></th>

            </tr>
        </thead>
        <tbody>
        <?php
        $no     = 1;
        $total  = 0;
        while ($row = mysqli_fetch_array($query)) {
            $stu  = $row['stu_id'] == 0 ? '' : number_format($row['stu_id']);
            echo '<tr>
                    <td>'.$no.'</td>
                    <td>'.$row['student_id'].'</td>
                    <input type="hidden" name="student_id[]" value='.$row['student_id'].'>
                    <td style="text-align: left;">'.$row['student_name'].'</td>
                    <input type="hidden" name="student_name[]" value='.$row['student_name'].'>
                    <td>'."<input name='obtmarks[]' placeholder='' class='form-control'  type='number' required='required' style='width: 120px;'>".'</td>
                    <td>'."<input name='percentage[]' placeholder='' class='form-control'  type='number' required='required' style='width: 120px;'>".'</td>
                    <td>'."<input name='grade[]' placeholder='' class='form-control'  type='number' required='required' style='width: 120px;'>".'</td>
                    <td>'."<input name='remarks[]' placeholder='' class='form-control'  type='number' required='required' style='width: 120px;'>".'</td>
                    <input type="hidden" name="class[]" value='.$row['class'].'>
                    <input type="hidden" name="test_date[]" value='.$test_Date.'>
                    <input type="hidden" name="test_subject[]" value='.$Subject_type.'>
                    <input type="hidden" name="test_type[]" value='.$TestType.'>

                </tr>';

            $total += $row['stu_id'];
            $no++;

        }

        ?>
</tbody>
    </table>

标签： javascriptphpjqueryhtml

Answer 1

you can simply achieve this by using <input type="text"/> event of onkeyup('calculateFn()'). For this, you have Total Marks too to get that percentage out for your obtained marks. using this script

<script>
    var obmarks=document.getElementById("obmarks");
    var totalmarks=document.getElementById("totalmarks");
    var percent=(obmarks/totalmarks)*100;
    document.getElementById("percentage").value=percent;
</script>

here ids are those corresponding ids of required text fields. Hope this help you out.