In my web.php
Route::get('/show', 'StudentsController@show');
Route::POST('/student_delete/{id}', 'StudentsController@delete');
In my controller StudentsController.php :
public function show()
{
$students = DB::table('students')
->select('*')
->get();
return view('students',['students'=>$students]);
}
public function delete($id)
{
DB::table('students')->where('id', '=', $id)->delete();
return back();
}
In my view students.blade.php :
<table>
<tr>
<th> name</th>
<th> tel</th>
<th> # </th>
</tr>
@for($m=0; $m< 10;$m++)
<tr>
<td><input type="text" value="{{$students[$m]->name}}"/></td>
<td><input type="text" value="{{$students[$m]->tel}}"/></td>
<form action="/student_delete/{{$students[$m]->id}}" id="{{$students[$m]->id}}"method="POST">
{{ csrf_field() }}
<td><button type="submit" class="btn btn-danger remove-tr">-</button></td>
</form>
</tr>
@endfor
</table>
The problem is here in my script to fire sweet alert after deleting a student,How do I get the id of form of student that I want to delete? this is my script :
<script>
$("#How_to_get_the_id_of_form_here").submit(function(e) {
e.preventDefault();
var form = this;
Swal.fire({
title: 'do you want to continue?',
icon: 'question',
iconHtml: '؟',
confirmButtonText: 'yes',
cancelButtonText: 'no',
showCancelButton: true,
showCloseButton: true
}).then((result) => {
if (result.isConfirmed) {
form.submit();
} else if(!result.isDenied) {
console.log(result.isDenied);
}
});
});
</script>
Why use the id specifically when you can use a class shared by all the forms ?
@for($m=0; $m< 10;$m++)
...
<form class="student-form-delete" action="/student_delete/{{$students[$m]->id}}" id="{{$students[$m]->id}}"method="POST">
...
</form>
...
@endfor
and use that class name in your javascript
<script>
$(".student-form-delete").submit(function(e) {
e.preventDefault();
var form = this;
Swal.fire({
...
});
</script>
I would solve this problem in this way: Wrap script into function (id - would be as function parametr)
function deleteStudent (id) {
e.preventDefault();
var form = $("#" + id);
Swal.fire({
title: 'do you want to continue?',
icon: 'question',
iconHtml: '؟',
confirmButtonText: 'yes',
cancelButtonText: 'no',
showCancelButton: true,
showCloseButton: true
}).then((result) => {
if (result.isConfirmed) {
form.submit();
} else if(!result.isDenied) {
console.log(result.isDenied);
}
});
};
Then set this function as onclick="deleteStudent ({{$students[$m]->id}});"
Here:
<form action="/student_delete/{{$students[$m]->id}}" id="{{$students[$m]->id}}"method="POST">
{{ csrf_field() }}
<td><button type="submit" class="btn btn-danger remove-tr" onclick="deleteStudent({{$students[$m]->id}});return false;">-</button></td>
</form>
Or - if confirmation dont work - the only way - place script in the loop:
<table>
<tr>
<th> name</th>
<th> tel</th>
<th> # </th>
</tr>
@for($m=0; $m< 10;$m++)
<tr>
<td><input type="text" value="{{$students[$m]->name}}"/></td>
<td><input type="text" value="{{$students[$m]->tel}}"/></td>
<form action="/student_delete/{{$students[$m]->id}}" id="{{$students[$m]->id}}"method="POST">
{{ csrf_field() }}
<td>
<button type="submit" class="btn btn-danger remove-tr">-</button>
</td>
</form>
<script>
$("#{{$students[$m]->id}}").submit(function(e) {
e.preventDefault();
var form = this;
Swal.fire({
title: 'do you want to continue?',
icon: 'question',
iconHtml: '؟',
confirmButtonText: 'yes',
cancelButtonText: 'no',
showCancelButton: true,
showCloseButton: true
}).then((result) => {
if (result.isConfirmed) {
form.submit();
} else if(!result.isDenied) {
console.log(result.isDenied);
}
});
});
</script>
</tr>
@endfor
</table>