单击按钮时将其中一个值传递给控制器

Question

我有一张这样的表：

当我点击删除时！按钮，我想将角色ID传递给控制器​​。

在stackoverflow中查找了很多案例。我刚刚成功使用JS检索角色ID。

这样的代码：

$(".deleteButton").click(function() {
  var $row = $(this).closest("tr"); 
  var $text = $row.find("td:first-child").text();

  // Let's test it out
  alert($text); 
});

但问题是，我不知道如何将其传回按钮，因此按钮可以将其传递给控制器​​。

有没有简单的方法将它传递给控制器​​？也许没有首先检索角色ID，当点击按钮时传递的值和控制器立即调用？

这是我的代码：

<table class="table" id="myTable">
   <thead class="text-primary">
       <th class="col-md-1">ID Role</th>
       <th class="col-md-3">Role</th>
       <th class="col-md-3">Jumlah Member</th>
       <th></th>
   </thead>

   <tbody>
   <?php
       foreach($result as $row) { ?>
       <tr>
           <td><?php echo $row->id_role ?></td>
           <td><?php echo $row->role ?></td>
           <td><?php echo $row->jumlah ?></td>
           <td>
               <button type="button" class="btn btn-success btn-sm editButton">Edit!</button>
               <button  type="button" class="btn btn-danger btn-sm deleteButton">Delete!</button>
            </td>
       </tr>
       <?php
         }  ?>
    </tbody>
</table>

Answer 1

你必须使用JavaScript吗？如果没有，这对表单来说是一个简单的任务

<form action="path/to/your/controller" method="post">
<table class="table" id="myTable">
<!-- thead, etc -->
<tbody>
foreach($result as $row) : ?>
<tr>
  <td><?= $row->id_role ?></td>
  <td><?= $row->role ?></td>
  <td><?= $row->jumlah ?></td>
  <td>
    <button type="submit" name="edit" value="<?= htmlspecialchars($role->id_role) ?>"
            class="btn btn-success btn-sm editButton">Edit!</button>
    <button type="submit" name="delete" value="<?= htmlspecialchars($role->id_role) ?>"
            class="btn btn-danger btn-sm deleteButton">Delete!</button>
  </td>
</tr>
<?php endforeach ?>
</tbody>
</table>
</form>

然后，您的控制器会收到$_POST['edit']或$_POST['delete']，并将角色ID作为值。

如果您有兴趣保护您的表单免受可能的跨站点请求伪造攻击。

否则，我只需将id_role属性添加到按钮，例如

<button type="button" class="btn btn-danger btn-sm deleteButton" value="<?= htmlspecialchars($role->id_role) ?>">Delete!</button>

并在你的JS中

$('.deleteButton').on('click', function(e) {
  var roleId = this.value
  $.ajax({
    url: '/roles/' + roleId, // assuming a REST API
    method: 'DELETE'
  }).done(function() {
    alert('Deleted role ' + roleId);
  })
})

Answer 2

您将角色ID分配给另一个<td>，这通过jQuery获取id有点长。您可以轻松获得点击按钮ID，只需给出一个id。

<button type="button" id="<?php echo $row->id_role ?>" class="btn btn-danger btn-sm deleteButton">Delete!</button>

然后您可以轻松获取特定的行ID

$(".deleteButton").click(function() {
  var $text= $(this).attr("id"); 

  alert($text);
});

然后你可以通过ajax将该id发送给控制器。