如何为表格中的多个按钮设置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;

Answer 1

请检查以下代码并尝试：<table>&nbsp;&nbsp; &nbsp; &nbsp;<?php for($i=0; $i < $count; $i++){ ?>&nbsp; &nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; <td><?php echo $student_name[$i]; ?>&nbsp; &nbsp; &nbsp; &nbsp; <input type='hidden' class='student_id' value='<?php echo $student_id[$i]; ?>'>&nbsp; &nbsp; &nbsp; &nbsp; <input type='hidden' class='class_id' value='<?php echo $class_id; ?>'>&nbsp; &nbsp; &nbsp; &nbsp; <input type='hidden' class='phase' value='<?php echo $phase; ?>'>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if($studnet_p1_a1[$i] != 0){ ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" style="width:70px" name='a1' class="form-control mb a1" value="<?php echo $studnet_p1_a1[$i]; ?>" disabled>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php }else{ ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" style="width:70px" name='a1' class="form-control mb a1" placeholder='08.01' >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php } ?>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php if($studnet_p1_a2[$i] != 0){ ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" style="width:70px" name='a2' class="form-control mb a2" value="<?php echo $studnet_p1_a2[$i]; ?>" disabled>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php }else{ ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <input type="text" style="width:70px" name='a2' class="form-control mb a2" placeholder='11' >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php } ?>&nbsp; &nbsp; &nbsp; &nbsp; </td>&nbsp; &nbsp; &nbsp; &nbsp; <td><input type="submit" name="submit" style="width:70px" class="button form-control mb submit_btn" class="btn btn-success" value="Submit"></td>&nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp;<?php endfor; ?>&nbsp; &nbsp; </table>&nbsp; &nbsp; <script>&nbsp; &nbsp; &nbsp; &nbsp; $(document).ready(function () {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('body').on('click', '.submit_btn', function(e){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var a1 = $(this).closest('tr').find('.a1').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var a2 = $(this).closest('tr').find('.a2').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var a3 = $(this).closest('tr').find('.a3').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var a4 = $(this).closest('tr').find('.a4').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var a5 = $(this).closest('tr').find('.a5').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var bmi = $(this).closest('tr').find('.student_id').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var student_id = $(this).closest('tr').find('.student_id').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var class_id = $(this).closest('tr').find('.class_id').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var phase = $(this).closest('tr').find('.phase').val();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; var datastring = 'a1=' + a1 + '&a2=' + a2 + '&a3=' + a3 + '&a4=' + a4 + '&a5=' + a5 + '&bmi=' + bmi + '&student_id=' + student_id + '&class_id=' + class_id + '&phase=' + phase;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "POST",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url: "score_process.php",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: datastring,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success: function(){&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp;</script>

Answer 2

您没有使用<form>，请尝试使用onclick属性（不带return语句）将更<input>改为<button>，然后删除type="submit"。$studnet_p1_a2[$i]应该student代替studnet？还可以考虑使用Angular，React，Vue.js之类的框架。他们比裸php更可扩展。