如何使用 laravel 获得模态确认删除显示数据？

Question

i want to get value id from my table or my db, when i tried to delete one of the row (one of the data). I tried to expand my endforeach and it's just make the html become so weird. Um for more explaining here is my images.

Images confirm modal

yeah i just want to confirm the user if it clicked the delete button it will show a modal "are you sure you want to delete this?".So, the problem is, i don't know how to get the value id when i clicked the next delete button from the seccond row delete button, delete button from the third row delete button, delete button from the fourth row delete button (if there is a row bellow it) and so on.

here is my modal code

Modal Delete

<div class="m-2">
<div  class="modal fade h-50" id="modalDelete" tabindex="-1" role="dialog" aria- 
    labelledby="deleteModal" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="deleteModal">Change Department Status</h5>
            </div>
            <div class="modal-body">
                <p id="question">Are You sure want to delete {{$ideaprogram[0]->showidea_id}}?</p>
            </div>
            <div class="modal-footer">
                <a id="deleteData">
                    <button type="button" class="btn btn-success">Yes</button>
                </a>
                <button type="button" class="btn btn-danger" data-dismiss="modal">No</button>
            </div>
        </div>
    </div>
</div>
</div>

i'm just make the value of index $ideaprogram[0]->showidea_id like that. Using zero (0) the hardcode. for example if i want to delete the next one (the next index) which is 1, how can i change it the value into 1 or change it the value into 2 if i want to delete the next index and so on. Basically i want the function more like when i clicked the delete button from some row, it will show the id program from that row. I'm using laravel and php at the moment. I don't know how to make it happen. Can someone help me?

Answer 1

Set data in modal on delete button click:

assuming that you are showing your data in table, then give attribute data-programid to delete button.

@foreach($programs as $program)
<tr>
<td>{{$program->name}}</td>
<td><button class="btn btn-danger deleteProgram" data-programid="{{$program->id}}">Delete</button></td>  
</tr>
@endforeach

now we set data in modal and show modal, when user click on deleteProgram button class javascript

<script>
$(document).on('click','.deleteProgram',function(){
    var programID=$(this).attr('data-programid');
    $('#app_id').val(programID); 
    $('#question').append(programID+' ?');
    $('#applicantDeleteModal').modal('show'); 
});
</script>

your modal:

<div id="applicantDeleteModal" class="modal modal-danger fade" tabindex="-1" role="dialog" aria-labelledby="custom-width-modalLabel" aria-hidden="true" style="display: none;">
    <div class="modal-dialog" style="width:55%;">
        <div class="modal-content">
             <form action="{{route()}}" method="POST" class="remove-record-model">
               {{ method_field('delete') }}
               {{ csrf_field() }}

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h5 class="modal-title text-center" id="custom-width-modalLabel">Change Department Status</h5>
            </div>
            <div class="modal-body">
                <h4 id="question">Are You sure want to delete </h4>
                <input type="hidden" name="applicant_id" id="app_id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default waves-effect" data-dismiss="modal">Close</button>
                <button type="submit" class="btn btn-danger waves-effect remove-data-from-delete-form">Delete</button>
            </div>

             </form>
        </div>
    </div>
</div>

Answer 2

I use like this all time.

<td>

    <ul style="list-style-type: none;">
          <li><i class="fa fa-edit"></i> <a href="{{ url('') }}/en/admin/role/edit/{{ $role->id }}"> Edit </a></li>
          <li><i class="fa fa-trash"></i>
          <button data-toggle="modal" data-target="#modal{{ $role->id }}">Delete</button>
          </li>
    </ul>

</td>

<!-- Modal -->
<div class="modal fade" id="modal{{ $role->id }}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
   <div class="modal-dialog" role="document">
      <div class="modal-content">
          <div class="modal-header bg-danger">
              <h5 class="modal-title" id="exampleModalLabel">You are about to delete the role {{ $role->title }}</h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
              </button>
          </div>
          <div class="modal-body text-danger">Once you delete, it cannot be undone.
          </div>
          <div class="modal-footer">
               <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
               <form method="POST" action="{{ url('') }}/en/admin/role/delete/{{ $role->id }}">
                    {{ method_field('delete') }}
                    {{ csrf_field() }}
                    <button type="submit" class="btn btn-danger">Confirm</button>
               </form>
          </div>
       </div>
    </div>
 </div>

Answer 3

Actually i want an answer that give me a solutions more like AA Noman since it will be good for a little line of code, so i tought it possible, but after trying the suggested solutions, and not give me that i want, so i think i can solve it like this.

script.js

function deleteModal(data){
     document.getElementById('question').innerHTML = `Are you sure to delete ${data.showidea_id} ?`;
     document.getElementById('deleteData').setAttribute('href',`/program_idea/${data.showidea_id}/deleteData`);
     $('#modalDelete').modal('show'); 
}

and my HTML are like this

index.blade.php

@foreach($ideaprogram as $dataload)
        <tr>
            <td class="text-center">
                <button type="button" class="btn btn-danger btn-sm deleteProgram" data-toggle="modal" 
                       onclick="deleteModal({{$dataload}})">
                    <i class="far fa-trash-alt"></i>
                </button>
        </tr>
 @endforeach

anyway thank you for everyone that answer my questions