how to calculate automatic grade and remarks in jQuery

Question

In an HTML table, following code calculating percentage automatically through JQuery when user enters marks in 'obtained marks' column (which is an HTML text box). I am having two more columns 'grade' and 'remarks'. When user enters marks, percentage is calculated automatically, what i want is to calculate the grade and remarks automatically too. Criteria may be above than 90 % is A+, between 80% and 90% is A, and so up to fail when student gets 30% marks. And also if grade is A+ remarks are Excellent, if grade is A, remarks are v.good and so on.

HTML code is as under:-

<table id = "marks" 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>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <?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 obtmark' type='number' required='required' style='width: 120px;'>".'</td>
                    <td>'."<input name='percentage[]' placeholder='' class='form-control percentage' type='text' required='required' style='width: 120px;'>".'</td>
                    <td>'."<input name='grade[]' placeholder='' class='form-control grades' type='text' required='required' style='width: 120px;'>".'</td>
                    <td>'."<input name='remarks[]' placeholder='' class='form-control remark' type='text' required='required' style='width: 120px;'>".'</td>
                    <input type="hidden" name="class[]" style="text-align: center;" value='.$row['class'].'>
                    <input type="hidden" name="test_date[]" value='.$TestDate.'>
                    <input type="hidden" name="test_subject[]" align="center" value='.$SelectSubject.'>
                    <input type="hidden" name="test_type[]" align="center" value='.$TestType.'>                             
                </tr>';
            $total += $row['stu_id'];
            $no++;      
        }
        ?>
</tbody>
</table>

JQuery script is as under:-

<script>
    $('#marks').on('change', '.obtmark', function() {
        var SecondNumVal = "20";
        $mark = $(this)
        var firstNumVal = $mark.val();

        // Find the tr this control is in and the corresponding percentage field
        $pct = $mark.closest('tr').find('.percentage')
        percentVal = (firstNumVal / SecondNumVal) * 100
        pct = parseInt(percentVal) + '%';
        $pct.val(pct).attr('readonly', true);
    });
$('#marks').on('change', '.percentage', function() {
    $grade = $ (this)
    var obtgrade = $grade.val();

        $studentgrade = $grade.closest('tr').find('.stugrades')
        if (obtgrade >=90 and <=100){
        calculatedgrade = "A";
        finalgrade = parseInt(calculatedgrade);
        $calculatedgrade.val(finalgrade).attr('readonly', true);

    }});
</script>

Can any please make amendments in jQuery to calculate next two columns ?

Answer 1

$('#marks').on('change', '.obtmark', function() {
  var SecondNumVal = "25";
  $mark = $(this)
  var firstNumVal = $mark.val();
  // Find the tr this control is in and the corresponding percentage field
  $row = $mark.closest('tr')
  $pct = $row.find('.percentage')
  percentVal = (firstNumVal / SecondNumVal) * 100
  pct = parseInt(percentVal) + '%';
  $pct.val(pct).attr('readonly', true);

  $studentgrade = $row.find('.grades')
  $remarks = $row.find('.remark')
  if (percentVal >= 90 && percentVal <= 100) {
    calculatedgrade = "A+";
    remark = "Excellent";
  }
  $studentgrade.val(calculatedgrade).attr('readonly', true);
  $remarks.val(remark).attr('readonly', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="marks">
  <tr>
    <td><input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' required='required' style='width: 120px;'></td>
    <td><input name='percentage[]' placeholder='' class='form-control percentage' type='text' required='required' style='width: 120px;'></td>
    <td><input name='grade[]' placeholder='' class='form-control grades' type='text' required='required' style='width: 120px;'></td>
    <td><input name='remarks[]' placeholder='' class='form-control remark' type='text' required='required' style='width: 120px;'></td>
  </tr>
</table>

Answer 2

Since all of your operations are dependent on a single value, you can perform all actions at the same time when your marks change. Besides that, you are trying to compare an integer value with a string and mixing up your selectors.

I've simplified your html to the fields in question and only made the first condition as an example for you to finish.

$('#marks').on('change', '.obtmark', function() {
  var SecondNumVal = "20";
  $mark = $(this)
  var firstNumVal = $mark.val();
  // Find the tr this control is in and the corresponding percentage field
  $row = $mark.closest('tr')
  $pct = $row.find('.percentage')
  percentVal = (firstNumVal / SecondNumVal) * 100
  pct = parseInt(percentVal) + '%';
  $pct.val(pct).attr('readonly', true);

  $studentgrade = $row.find('.grades')
  $remarks = $row.find('.remark')
  if (percentVal >= 90 && percentVal <= 100) {
    calculatedgrade = "A+";
    remark = "Excellent";
  }
  $studentgrade.val(calculatedgrade).attr('readonly', true);
  $remarks.val(remark).attr('readonly', true);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="marks">
  <tr>
    <td><input name='obtmarks[]' placeholder='' class='form-control obtmark' type='number' required='required' style='width: 120px;'></td>
    <td><input name='percentage[]' placeholder='' class='form-control percentage' type='text' required='required' style='width: 120px;'></td>
    <td><input name='grade[]' placeholder='' class='form-control grades' type='text' required='required' style='width: 120px;'></td>
    <td><input name='remarks[]' placeholder='' class='form-control remark' type='text' required='required' style='width: 120px;'></td>
  </tr>
</table>