CODEWITHSUNDEEP
javascriptphpbootstrap-4laravel-5.7adminlte
Khushwanth
Khushwanth

Reputation: 113

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

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>

Upvotes: 3

Views: 2368

Answers (4)

OBrien Evance
OBrien Evance

Reputation: 1025

First of all, add an onclick attribute to the button that popups the modal like so

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

On the modal button, wrap it around a form and give the form an ID attribute

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

Finally, some Javascript to attach the id of the admin, to the onclick element and then populate the action attribute of the modal form

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

Upvotes: 0

Dulmina
Dulmina

Reputation: 527

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.

Upvotes: -1

Googlian
Googlian

Reputation: 6713

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

Upvotes: 0

Bencor29
Bencor29

Reputation: 36

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

Upvotes: 0

Related Questions