如何在單擊時獲取模式按鈕上的行 ID

Question

我在數據表的一行數據中有一個按鈕，如果單擊該按鈕，模式將打開並且用戶可以更新一些數據，使用 ajax 獲取數據並發送到另一個 php 文件。 單擊按鈕時我的表格模式打開

問題是，當我單擊按鈕時，我得到的行始終為 1（第一行），因此第一行中的數據將是更新的數據，而不是單擊按鈕的行。 這是按鈕的代碼。

            <td>
          
            <?php 
              if ($row['status'] == 0){
            ?>
            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modalEdit"  name="buttonModal" id="buttonModal" data-row="<?php echo $row['id'];?>">
              <i class="far fa-edit"></i>
            </button>
          
            <?php
              }else{
            ?>
            <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#modalEdit"  name="buttonModal" id="buttonModal" data-row="<?php echo $row['id'];?>"disabled>
              <i class="far fa-edit"></i>
            </button>
            
            <?php
              }
            ?>
          </td>

模態：

<div class="modal" id="modalEdit">
      <div class="modal-dialog">
          <div class="modal-content">
              <!-- Modal Header -->
              <div class="modal-header text-light" style="background-color: #FF9B6A">
                  <h4 class="modal-title">Edit Status Pembayaran Peserta</h4>
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
              </div>
              <!-- Modal body -->
              <div class="modal-body">
              <tr>
                  <div class="form-check">
                    <form method="POST">
                      <input class="form-check-input" type="radio" name="status" id="approved" value="1">
                      <label class="form-check-label" for="approved"> Approved </label>
                      <br>
                      <input class="form-check-input" type="radio" name="status" id="rejected" value="2">
                      <label class="form-check-label" for="rejected"> Rejected </label>
                    </form>
                  </div>
              </tr>
              <tr>
                  <td colspan="2">Catatan untuk peserta: </td>
              </tr>
              <tr>
                  <td colspan="2">
                      <textarea class="form-control" id="catatan" placeholder="Catatan"></textarea>
                  </td>
                  <p style="font-size: 14px">Di isi jika ada</p>
              </tr>
              </div>
              <div class="modal-footer">
              <p style="color: red">Setelah Anda mengedit, maka sistem secara otomatis akan mengirimkan E-mail mengenai status pembayaran kepada peserta yang bersangkutan.</p>
              <button type="submit" class="btn btn-primary" id="submit">Save</button>
              <button type="button" class="btn btn-primary" data-dismiss="modal" id="close">Close</button>
              </div>
          </div>
      </div>
  </div>

劇本：

<script>
$(document).ready(function() {
    $('#table').DataTable();
    $("#submit").click(function(){
        // if($('#status').val() != "" && $('#data-row').val() != ""){
        if($('#status').val() != "" ){
            var status = $("input[type='radio']:checked").val();

            var element = document.getElementById('buttonModal');
            var row = element.getAttribute('data-row');
            alert(row);

            let fd = new FormData();
            fd.append("status",status);
            fd.append("row",row);
            $.ajax({
                url: "sisiAdmin_action.php",
                method: "POST",
                data: fd,
                processData: false,
                contentType: false,
                success: function (res) {
                    // alert(res);
                    if(res == 'Berhasil update status'){
                        Swal.fire({
                        position: 'top-middle',
                        icon: 'success',
                        title: 'Berhasil update status',
                        showConfirmButton: false,
                        timer: 2000
                        })
                        $('#status').val("");
                        $('#data-row').val("");
                    }
                    else{
                        Swal.fire({
                        icon: 'error',
                        title: 'Oops...',
                        text: 'Gagal update status'
                        })
                    }
                },
                error: function () {
                    alert("Gagal");
                } 
            });
        }
        else{
            Swal.fire('Data belum lengkap!')
        }
    });
    $(document).ajaxStop(function(){
        window.location.reload();
    });
  });
</script>

Answer 1

在多個地方使用 id 屬性會使您的代碼無效。

看起來您在單擊后查找數據，我建議您在回調中使用事件參數並使用它來確定單擊了哪個按鈕。 有關更多詳細信息，請查看https://api.jquery.com/submit/

Answer 2

首先，您必須防止為您的元素設置非唯一 id，根據html 生活標准，每個 DOM 元素都有一個不同的 id 屬性名稱非常重要：

可以在所有 HTML 元素上指定 class、id 和 slot 屬性。 ……。 當在 HTML 元素上指定時，id 屬性值在元素樹中的所有 ID 中必須是唯一的，並且必須包含至少一個字符。 該值不得包含任何 ASCII 空格。

之后，當您在 $("#submit") 元素上觸發事件時，您將無法獲取先前觸發的目標以從中獲取行 ID，因此通過選擇var element = document.getElementById('buttonModal'); 你只得到第一個。

解決方案是通過 JavaScript 以編程方式運行模態：

$("#myModal").modal('show');

當觸發行上的點擊事件時：

$(document).ready(function(){
    $("#buttonModal").click(function(){
        $("#modalEdit").modal('show');
    });
});

現在以編輯模式形式放置一個隱藏的輸入元素：

 <input type="hidden" name="row_id" id="row_container">

並在顯示模態之前設置它：

$(document).ready(function(){
    $("#buttonModal").click(function(event){
        $("#row_container").value(event.target.data('row'));
        $("#modalEdit").modal('show');
    });
});

然后發送表格。