Laravel 5.5 Delete Data using modal

Question

I want to delete data using modal, I already get the id of the data I want to delete, but when I click the delete button in modal nothing happen.. Please tell me if something wrong.. Thank you very much

this is my controller

 public function destroy(Request $request)
{
    $applicant = Applicant::where('fk_user_details_id', request('user_detail_id'))->delete();
    $userDetail = UserDetail::where('fk_users_id', request('id'))->delete();
    User::destroy(request('id'));

    return redirect('/applicant_list')->with('success', 'Applicant Removed');
}

this is modal

<form action="{{route('applicant_delete', 'delete')}}" method="POST" class="remove-record-model">
{{ method_field('delete') }}
{{ csrf_field() }}
<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">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title text-center" id="custom-width-modalLabel">Delete Applicant Record</h4>
            </div>
            <div class="modal-body">
                <h4>You Want You Sure Delete This Record?</h4>
                <input type="hidden", name="applicant_id" id="app_id" value="">
            </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>
        </div>
    </div>
</div>
</form>

this is my routes:

Route::delete('applicant_delete_modal/{applicants}', 'ApplicantController@destroy')->name('applicant_delete');

and this is my javascript

$('#applicantDeleteModal').on('show.bs.modal', function(e) {
    var $invoker = $(e.relatedTarget);
    var $id = $invoker.attr('data-id');
    var data = $('#data_applicant-' + $id).html();

    data = JSON.parse(data);
    console.log(data);
    $('#app_id').val(data.applicants_id);

})

Answer 1

Your button has to be of type submit to be able to submit the form.

<button type="submit" class="btn btn-danger waves-effect remove-data-from-delete-form">Delete</button>
<!--          ^ Here    -->

Answer 2

your route :

Route::delete('applicant_delete_modal', 'ApplicantController@destroy')->name('applicant_delete');

in your controller :

 public function destroy(Request $request)
{ 
    $applicant_id=$request->input('applicant_id');

    $applicant = Applicant::where('fk_user_details_id',$applicant_id)->delete();
    $userDetail = UserDetail::where('fk_users_id',$applicant_id)->delete();
    User::destroy($applicant_id);
    return redirect('/applicant_list')->with('success', 'Applicant Removed');
}

your modal should be :

<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('applicant_delete')}}" 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>
                <h4 class="modal-title text-center" id="custom-width-modalLabel">Delete Applicant Record</h4>
            </div>
            <div class="modal-body">
                <h4>You Want You Sure Delete This Record?</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>

set data in modal on delete button click :

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

@foreach($users as $user)
<tr>
<td>{{$user->name}}</td>
<td><button class="btn btn-danger deleteUser" data-userid="{{$user->id}}">Delete</button></td>  
</tr>
@endforeach

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

<script>
$(document).on('click','.deleteUser',function(){
    var userID=$(this).attr('data-userid');
    $('#app_id').val(userID); 
    $('#applicantDeleteModal').modal('show'); 
});
</script>

Answer 3

I saw your comment in Saurabh Mistry's answer I think you might input wrong column name in where clause

You can try to check if your query returns correct result by doing this

dd(Applicant::where('fk_user_details_id',$applicant_id)->get());

If it returns null or empty collection, you might have to recheck your where clause