Как настроить AJAX-вызов для нескольких кнопок в таблице

Question

У меня есть таблица, в которой я хочу, чтобы пользователь заполнил данные в поле ввода, если условие выполнено, а если условие ложно, то поле ввода отключено.
У меня есть тег ввода с атрибутом submit вкаждый ряд.Я даю onClick () для каждой отправки функции ajax ниже.
Ошибка в том, что только первая отправка работает как положено, остальные кнопки не работают.
Кто-нибудь может мне помочь?

    <table> 
     <?php for($i=0; $i < $count; $i++){ ?>
       <tr>
        <td><?php echo $student_name[$i]; ?>
        <input type='hidden' id='student_id' value='<?php echo $student_id[$i]; ?>'>
        <input type='hidden' id='class_id' value='<?php echo $class_id; ?>'>
        <input type='hidden' id='phase' value='<?php echo $phase; ?>'>
        </td>

        <td>
          <?php if($studnet_p1_a1[$i] != 0){ ?>
            <input type="text" style="width:70px" name='a1' id='a1<?php echo $i; ?>' class="form-control mb" value="<?php echo $studnet_p1_a1[$i]; ?>" disabled>
          <?php }else{ ?>
            <input type="text" style="width:70px" name='a1' id='a1<?php echo $i; ?>' class="form-control mb" placeholder='08.01' >
          <?php } ?>
        </td>
        <td>
          <?php if($studnet_p1_a2[$i] != 0){ ?>
            <input type="text" style="width:70px" name='a2' id='a2<?php echo $i; ?>' class="form-control mb" value="<?php echo $studnet_p1_a2[$i]; ?>" disabled>
          <?php }else{ ?>
            <input type="text" style="width:70px" name='a2' id='a2<?php echo $i; ?>' class="form-control mb" placeholder='11' >
          <?php } ?>
        </td>
        <td><input type="submit" name="submit" onclick="ajax($(this));return false;" id="<?php echo $i?>" style="width:70px" class="button form-control mb" class="btn btn-success" value="Submit"></td>
      </tr>
     <?php endfor; ?>
    </table>

    <script>

    function ajax($this) {
      var a1 = $("input#a1").val();
      var a2 = $("input#a2").val();

      var student_id = $("input#student_id").val();
      var class_id = $("input#class_id").val();
      var phase = $("input#phase").val();
      var datastring = 'a1=' + a1 + '&a2=' + a2 + '&student_id=' + student_id + '&class_id=' + class_id + '&phase=' + phase;

      $.ajax({
            type: "POST",
            url: "score_process.php",
            data: datastring,
            success: function(){              
            }
      });
     }

     </script>

Answer 1

Пожалуйста, проверьте код ниже и попробуйте:

<table> 
     <?php for($i=0; $i < $count; $i++){ ?>
       <tr>
        <td><?php echo $student_name[$i]; ?>
        <input type='hidden' class='student_id' value='<?php echo $student_id[$i]; ?>'>
        <input type='hidden' class='class_id' value='<?php echo $class_id; ?>'>
        <input type='hidden' class='phase' value='<?php echo $phase; ?>'>
        </td>

        <td>
          <?php if($studnet_p1_a1[$i] != 0){ ?>
            <input type="text" style="width:70px" name='a1' class="form-control mb a1" value="<?php echo $studnet_p1_a1[$i]; ?>" disabled>
          <?php }else{ ?>
            <input type="text" style="width:70px" name='a1' class="form-control mb a1" placeholder='08.01' >
          <?php } ?>
        </td>
        <td>
          <?php if($studnet_p1_a2[$i] != 0){ ?>
            <input type="text" style="width:70px" name='a2' class="form-control mb a2" value="<?php echo $studnet_p1_a2[$i]; ?>" disabled>
          <?php }else{ ?>
            <input type="text" style="width:70px" name='a2' class="form-control mb a2" placeholder='11' >
          <?php } ?>
        </td>
        <td><input type="submit" name="submit" style="width:70px" class="button form-control mb submit_btn" class="btn btn-success" value="Submit"></td>
      </tr>
     <?php endfor; ?>
    </table>

    <script>
        $(document).ready(function () {
            $('body').on('click', '.submit_btn', function(e){
                var a1 = $(this).closest('tr').find('.a1').val();
                var a2 = $(this).closest('tr').find('.a2').val();
                var a3 = $(this).closest('tr').find('.a3').val();
                var a4 = $(this).closest('tr').find('.a4').val();
                var a5 = $(this).closest('tr').find('.a5').val();
                var bmi = $(this).closest('tr').find('.student_id').val();
                var student_id = $(this).closest('tr').find('.student_id').val();
                var class_id = $(this).closest('tr').find('.class_id').val();
                var phase = $(this).closest('tr').find('.phase').val();
                var datastring = 'a1=' + a1 + '&a2=' + a2 + '&a3=' + a3 + '&a4=' + a4 + '&a5=' + a5 + '&bmi=' + bmi + '&student_id=' + student_id + '&class_id=' + class_id + '&phase=' + phase;

                $.ajax({
                    type: "POST",
                    url: "score_process.php",
                    data: datastring,
                    success: function(){              
                    }
                });
            });
        });

     </script>

Answer 2

Вы не используете <form>, попробуйте изменить <input> на <button> с атрибутом onclick без оператора return и удалите type="submit".

$studnet_p1_a2[$i] должно быть student вместо studnet?

Также рассмотрите возможность использования таких фреймворков, как Angular, React, Vue.js. Они более масштабируемы, чем обычный php.