How to get modal confirm delete showing the data using laravel? - php

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> Edit </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">×</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 A.A 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