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>

it will be the result of a formula (obtained_marks/total_marks)*100. — Akhtar
– Akhtar, Commented Oct 9, 2018 at 11:41
You could make it with Jquery and calculate on input change (or keyup) — Jules R
– Jules R, Commented Oct 9, 2018 at 11:45
@JulesR Can you please write some code for me..I will be highly obliged. — Akhtar
– Akhtar, Commented Oct 10, 2018 at 6:11

Muhammad Abdullah Khan · Accepted Answer · 2018-10-10 06:32:13Z

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.

answered Oct 10, 2018 at 6:32

Muhammad Abdullah Khan

801 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to calculate html input box values in another input box

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related