Unable to submit a modal form using Ajax Request in Laravel

I am trying to delete a user based on user input in a modal form, but I am unable to do that. There is no error message in the console. Since I have started learning very recently, I am unable to identify where I am doing wrong.

I am directly getting the error: part of the Ajax request.

Here is my code

Only the modal part of Blade

<button type="button" id="delete_user" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">Delete</button>

<div class="modal fade" id="deleteModal"  role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header ">
      
        <h5 class="modal-title text-danger text-center"  id="exampleModalLabel" >Are you sure you want to delete this user?</h5>
       
      </div>
      <div class="modal-body ">
        <strong class="text-info text-center ">Please Confirm your Details</strong>
        <form id="delete_user_form" method="POST">
          @csrf
          <div class="form-group">
             <input type="hidden" name="_token" id="d_csrf" value="{{Session::token()}}">
            <input type="hidden" class="form-control" id="d_id" name="d_id" value="{{Auth::user()->id}}">
            <label for="d_full_name" class="col-form-label">Full Name:</label>
            <input type="text" class="form-control" id="d_full_name" name="d_full_name">
          </div>
          <div class="form-group">
            <label for="d_password" class="col-form-label">Confirm Your Password:</label>
            <input type="password" class="form-control" name="d_password" id="d_password">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
        <button type="submit" class="btn btn-primary" id="final_delete">Delete User</button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
   $(document).ready(function(){
    $('#delete_user').click(function(e){
      e.preventDefault();
       // $("#deleteModal").modal('show');
      
         $('#final_delete').on('click', function(e) {
            e.preventDefault();
             $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
       
            $.ajax({
               method:"POST",
               url:"delete_user",
               cache: false,
               processData:true,   //Required
               contentType: 'application/x-www-form-urlencoded',
               data:{
                      'd_token'             :    $("#csrf").val(),
                     'id' : $('#d_id').val(),
                     'd_full_name' : $('#d_full_name').val(),
                     'd_password' : $('#d_password').val(),

                },
                dataType :"JSON",
                success:function(){
                  swal({
                   title: "User deleted Successfully",
                   text: "You will now be logged out.Sorry to see you go!!",
                   icon: "warning",
                   buttons: true,
                  dangerMode: true,
                  });

                   
                },
                error:function(e){
                  swal({
                   title: "Oops! Some Error",
                   text: "Please try again later",
                   icon: "warning",
                   buttons: true,
                  dangerMode: true,
                  });
console.log(e);
                   

                },
            }); //ajax ends here

          }); //$("#final_delete").click ends
 ////$('#delete_user').click(function(e) ends

 });
  });
</script>

and controller

public function delete_user(Request $request){
   $d_id =  $request->id;
   $d_fname = $request->full_name;
   $d_password   =   $request->password;
   date_default_timezone_set("Asia/Kolkata"); 
   $d_time                 =   date("Y-m-d,H:i:s ");
$user_data  =    array(
        'id'  => $d_id,
         'full_name'     =>    $d_fname,
       'password'  =>   $d_password
    );
$act2= "DELETE";
if(Auth::attempt($user_data)){
     DB::select('CALL my_stored_procedures(?,?,?,?,?,?,?,?,?,?,?,?)', array($act2,$u_id,"","","","","",$$d_time, "","","",$d_time  ));
       return response()->json(
           [
               'success' => true,
               
           ]
       );
       Auth::logout();
       Session::flush();
       return redirect('login');
  }
  





} // delete_user ends

And view

Route::post('delete_user', 'userController@delete_user')->middleware('auth');

Here is the response obtained in the console (of the error: part of Ajax request)

dashboard:226 
{readyState: 4, getResponseHeader: ƒ, getAllResponseHeaders: ƒ, setRequestHeader: ƒ, overrideMimeType: ƒ, …}
abort: ƒ ( statusText )
always: ƒ ()
catch: ƒ ( fn )
done: ƒ ()
fail: ƒ ()
getAllResponseHeaders: ƒ ()
getResponseHeader: ƒ ( key )
overrideMimeType: ƒ ( type )
pipe: ƒ ( /* fnDone, fnFail, fnProgress */ )
progress: ƒ ()
promise: ƒ ( obj )
readyState: 4
responseText: ""
setRequestHeader: ƒ ( name, value )
state: ƒ ()
status: 200
statusCode: ƒ ( map )
statusText: "OK"
then: ƒ ( onFulfilled, onRejected, onProgress )
__proto__: Object

Any help is appreciated.

Answer

Copy this and paste it in your respective controller code

DB::select('CALL my_stored_procedures(?,?,?,?,?,?,?,?,?,?,?,?)', array($act2,$d_id,"","","","","",$d_time, "","","",$d_time  ));

You made a typo of $d_id instead of $u_id

Advertisement

Answer