Is there a way to send button id onClick to a bootstrap modal?

user_5961920 0
Viewed 1535

Using laravel, I have a list of user details obtained from the database with edit and remove button at the end of each record. When i click the remove button, the particular record gets removed, but when I added a modal such that when the delete button is clicked, a model appears, but adding the functionality to the confirmation "Yes" button of the modal got tricky, as it deleted the first record no matter which user i need to delete. How do i get the clicked user to be deleted when the modal button is clicked?

I have tried to assign each button the id of the current row.

    @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>
laravel-5.7 adminlte bootstrap-4 php javascript
3 Answers

Since you are using jQuery you can use attribute method to get the current clicked user id and pass to the URL:

Your HTML button class

  $(".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>

I suggest you to refer the following URL for your further questions regarding attr method https://www.w3schools.com/jquery/html_attr.asp

user_53809420

I did it with JS. You can show your modal with $('#modal-danger').modal('show') So you can add a onClick event to your button that fill a hidden input.

Your button that make the modal appear:

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

Your hidden input (somewhere in your page):

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

Your button from modal:

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

Your 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!');
}

This should work

user_101785260

make a global variable to store the target id and assingn the id to it when clicking the button on the target row

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

and then make another function to trigger when clicking on the remove button in the model and from that access the global variable for the target id

that's the optimal way to do it as I can think cheers.

user_60706670
Related