CODEWITHSUNDEEP
phpjqueryhtmlcodeigniter
user8317585
user8317585

Reputation:

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

I have a table like this:

enter image description here

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>

Upvotes: 1

Views: 1152

Answers (2)

Phil
Phil

Reputation: 164902

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);
  })
})

Upvotes: 1

Haq Nawaz
Haq Nawaz

Reputation: 482

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.

Upvotes: 0

Related Questions