有没有办法将按钮 id onClick 发送到引导模式？

Question

使用 laravel，我有一个从数据库获取的用户详细信息列表，每条记录末尾都有编辑和删除按钮。当我单击“删除”按钮时，特定记录将被删除，但是当我添加一个模式时，单击“删除”按钮时，会出现一个模型，但将功能添加到模式的确认“是”按钮变得很棘手，因为无论我需要删除哪个用户，它都会删除第一条记录。单击模态按钮时如何删除单击的用户？

我尝试为每个按钮分配当前行的 id。

    @foreach($admins as $admin)
        <tr>
            <td>{{$admin['id']}}</td>
            <td>{{$admin['name']}}</td>
            <td>{{$admin['email']}}</td>
            <td>
            <button type="button" class="btn btn-block btn-danger"  data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}">Remove</button>
            </td>
        </tr>
    @endforeach

    <!-- The Button From Modal -->
    <button type="button" class="btn btn-outline">Remove</button>

Answer 1

我是用JS做的。您可以使用

$('#modal-danger').modal('show')

显示您的模态框 因此，您可以将 onClick 事件添加到填充隐藏输入的按钮。

使模式出现的按钮：

<button type="button" class="btn btn-block btn-danger" onClick="showModal({{$admin['id']}})">Remove</button>

您的隐藏输入（页面中的某处）：

<input type="hidden" id="id-to-remove" />

您的模态按钮：

<button type="button" class="btn btn-outline" onclick="realRemove()">Remove</button>

你的JS：

function showModal(id) {
    $('#id-to-remove').val(id);
    $('#modal-danger').modal('show');
}

function realRemove() {
    $('#modal-danger').modal('hide');
    var id = $('#id-to-remove').val();
    alert('You can now remove ID ' + id + ' from your database!');
}

这应该有效

Answer 2

由于您使用的是 jQuery，因此您可以使用

attribute

方法来获取当前单击的用户 ID 并传递给 URL：

您的 HTML 按钮类

  $(".my-btn").click(function(){
   var userID = $(this).attr("data-user");

   if (typeof userID !== typeof undefined && userID !== false) {

      if(userID.length > 0) {
          // There you go the user id of the clicked user
          console.log(userID);
      }

   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button type="button" class="my-btn" data-user="user_id_123">Remove</button>

我建议您参考以下网址来解答有关

attr

方法的更多问题https://www.w3schools.com/jquery/html_attr.asp

Answer 3

首先，向弹出模式的按钮添加一个

onclick

属性，如下所示

<button onclick="deleteAdmin('$admin[id]')" type="button" class="btn btn-block btn-danger"  data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}">Remove</button>

在模态按钮上，将其包裹在表单周围，并为表单指定 ID 属性

<!-- The Button From Modal -->
<form method="POST" id="deleteAdminFormID" action="">
<button type="button" class="btn btn-outline">Remove</button>
</form>

最后，一些 Javascript 将管理员的 id 附加到 onclick 元素，然后填充模态表单的

action

属性

<script>
function deleteAdmin(id){
  var modalForm = document.getElementById('deleteAdminFormID');
  modalForm.action = '/delete/admin/' + id;
}
</script>

Answer 4

创建一个全局变量来存储目标 id，并在单击目标行上的按钮时为其分配 id

<button type="button" class="btn btn-block btn-danger"  data- toggle="modal" data-target="#modal-danger" id="{{$admin['id']}}" onClick=someFunction({{$admin['id']}})>Remove</button>

target_id=0
function someFunction(id) {
    target_id=id
}

然后创建另一个函数，在单击模型中的删除按钮时触发，并从中访问目标 id 的全局变量

这是我认为干杯的最佳方法。