單擊時如何在模態按鈕上獲取行ID-有解無憂

我在資料表中的一行資料中有一個按鈕，如果單擊該按鈕，則模式將打開并且用戶可以更新一些資料，使用 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>

更新：我設法通過按鈕 onclick 打開模態，但仍然無法獲得行號......

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

uj5u.com熱心網友回復：

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

看起來您在單擊后正在查找資料，我建議您在回呼中使用 event 引數并使用它來確定單擊了哪個按鈕。有關更多詳細資訊，請查看https://api.jquery.com/submit/

uj5u.com熱心網友回復：

首先，您必須防止為元素設定非唯一 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($(this).data('row'));
        $("#modalEdit").modal('show');
    });
});

然后發送表格。

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/396876.html

標籤：javascript php 查询阿贾克斯数据表

上一篇：在laravel中上傳檔案后如何使用選定的資料回傳同一頁面

下一篇：在php中搜索陣列中的專案