Passing one of the <td> value to controller when clicking a button - php

Question

I have a table like this:
When I click the Delete! button, I want to pass the role ID to the controller.
After looking for a lot of cases in stackoverflow. I've just succeeded to retrieve the role ID using JS.
Code like this:
$(".deleteButton").click(function() {
var $row = $(this).closest("tr");
var $text = $row.find("td:first-child").text();
// Let's test it out
alert($text);
});
But the problem is, I don't how to pass it back to the button, so then the button can pass it to the controller.
Is there any simple way to pass it to the controller? Maybe without retrieving the role ID first, and when click the button the value passed and the controller called at once?
This is my code:
<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

Do you have to use JavaScript? If not, this is a simple task for a form
<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>
Your controller would then receive either $_POST['edit'] or $_POST['delete'] with the role ID as the value.
If you're interested in securing your form from possible cross-site-request-forgery attacks, CodeIgniter has a built-in solution.
Otherwise, I would just add the id_role property to the button, eg
<button type="button" class="btn btn-danger btn-sm deleteButton" value="<?= htmlspecialchars($role->id_role) ?>">Delete!</button>
and in your 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

You assign the role id to another <td> which is a little bit longer to get the id by jQuery. You easily get the click button id just give to an id like.
<button type="button" id="<?php echo $row->id_role ?>" class="btn btn-danger btn-sm deleteButton">Delete!</button>
and then you can easily get the specific row id
$(".deleteButton").click(function() {
var $text= $(this).attr("id");
alert($text);
});
and then you can send that id to controller by ajax.