Laravel bootstrap delete confirmation using modal

Question

I'm having an issue getting data to transfer into my delete confirmation modal. I've verified my delete route works in removing data from the data base but the issue I'm facing is that I can't pass the contact->id into the modal to access for deletion.

The Modal

<!-- Delete Warning Modal -->
<div class="modal modal-danger fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="Delete" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete Contact</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
            <form action="{{ route('contacts.destroy', 'id') }}" method="post">
                @csrf
                @method('DELETE')
                <input id="id" name="id")>
                <h5 class="text-center">Are you sure you want to delete this contact?</h5>
                <input id="firstName" name="firstName"><input id="lastName" name="lastName">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
            </div>
            </form>
        </div>
    </div>
</div>
        <!-- End Delete Modal --> 

Blade call

<td>
    <a href="#" 
        data-id={{$value->id}}
        class="btn btn-danger delete" 
        data-toggle="modal" 
        data-target="#deleteModal">Delete</a>
</td>

Contact Controller

    /**
     * Remove the specified resource from storage.
     *
     * @param  int  $id
     * @return \Illuminate\Http\Response
     */
    public function destroy($id)
    {
        // Need to find all addresses with the contacdt Id and delete them.
        Address::where('contact_id', $id)->delete();
        Contact::find($id)->delete();
        return redirect()->route('contacts.index')->with('success','Contact deleted success');   
    }

To summarize, my issue is getting jQuery to transfer data to the modal so I can then use it to delete the data... right now my id=null

Answer 1

Laravel 10 - Delete confirmation bootstrap-modal

Jquery code :

$(document).on("click","#Delete", function(){
    var DeleteID = $(this).data("id");
    $(".modal_body #modal_id").val(DeleteID);
});

blade/html in modal add - (1) In Button & (2) Modal :

id="Delete" data-id="{{$data->id}}"

<div class="modal-body modal_body">
   <input type="text" id="modal_id" name="modal_id">
      Are You Sure Want To Delete This Data?
</div>

Controller - add :

$id=$_POST['modal_id'];

Answer 2

<div class="table-responsive">
  <table class="table table-bordered table-sm">
    <thead>
        <tr>
            <th>ID</th>
            <th>Nombre</th>
            <th>Usuario</th>
            <th>Acción</th>
        </tr>
    </thead>
    @foreach($users as $user)
    <tbody>
        <tr>
            <td>{{ $user->id }}</td>
            <td>{{ $user->nombre }}</td>
            <td>{{ $user->login}}</td>
            <td>
              <a href="{{ route('users.edit', $user->id) }}" type="button" class="btn btn-primary"><i class="bi bi-pencil-square"></i></a>
              <a data-bs-toggle="modal" class="btn btn-warning" data-bs-target="#deleteUserModal_{{$user->id}}"
              data-action="{{ route('users.destroy', $user->id) }}"><i class="bi bi-trash"></i></a>

            </td>
        </tr>
    </tbody>
    <!-- Delete User Modal -->
    <div class="modal fade" id="deleteUserModal_{{$user->id}}" data-backdrop="static" tabindex="-1" role="dialog"
    aria-labelledby="deleteUserModalLabel" aria-hidden="true">
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="deleteUserModalLabel">Esta acción es irreversible.</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
          </div>
          <form action="{{ route('users.destroy', $user->id) }}">
            <div class="modal-body">
              @csrf
              @method('DELETE')
              <h5 class="text-center">¿Estás seguro de que quieres eliminar al usuario
                {{ $user->nombre }} {{ $user->apellido_materno }} {{ $user->apellido_paterno }} ?</h5>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancelar</button>
              <button type="submit" class="btn btn-danger">Si, Eliminar Usuario</button>
            </div>
        </form>
        </div>
      </div>
    </div>
    @endforeach
  </table>
</div>

Answer 3

Jquery code:

 $(document).on('click','.delete',function(){
         let id = $(this).attr('data-id');
         $('#id').val(id);
    });

Also in your modal html code:

<input id="id" name="id">

Answer 4

In your bootstrap modal form change the following:

<form action="{{ route('contacts.destroy', 'id') }}" method="post">
                @csrf
                @method('DELETE')
                <input id="id" name="id" hidden>
                <h5 class="text-center">Are you sure you want to delete this contact?</h5>
                <input id="firstName" name="firstName"><input id="lastName" name="lastName">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="submit" class="btn btn-sm btn-danger">Yes, Delete Contact</button>
            </div>
            </form>

In the above code you are passing the string parameter that is 'id' to the controller so it will detect 'id' which is string you need to bring little bit changes in your controller as well instead of taking 'id' directly as parameter you need to take the request as you are placing the selected id into the input field that is :

  <input id="id" name="id" hidden value="">

Add the jquery:

<script>
     $(document).on('click','.delete',function(){
             let id = $(this).attr('data-id');
             $('#id').val(id);
        });
</script>

Controller should be:

public function destroy(Request $request)
    {
        $id= $request->id;

        $items = yourModel::find($id);

        $items->delete();

        return redirect()->route('your page')->with('message', 'report details has been successfully deleted');

    }