Laravel 7 - JQuery - form on submit returns blank page - does not reroute

Question

I am using Laravel 7 and Jquery and on my form submit, instead of redirecting or reloading as per the controller or custom javascript, it returns a blank page. If I use an echo of the json request, it prints that to the screen. I should mention that the data is indeed being saved to the database. I am following a tutorial as it closest fits my needs and its link can be found here: https://www.youtube.com/watch?v=DRE7L8KvBw0&list=PLV1nl4kfrf6GexbVpqfQc8zjv4JLAhI4K&index=10 I should be redirected but am doing something wrong. Any help would be appreciated. I left the commented code visible so you can see some of the things I have tried. Here is the form in the exam_category.blade.php

<div class="modal-body">
        {{-- <form method="POST" action="{{ url('admin/add_new_category') }}" class="database_operation" data-ajax="false"> --}}
            <form method="POST" action="{{ url('admin/add_new_category') }}" class="database_operation">
            {{ csrf_field() }}
        {{ method_field('POST') }}
          <div class="row">
              <div class="col-sm-12">
                  <div class="form-group">
                      <label>Enter Category Name</label>

                      <input type="text" name="name" placeholder="Enter Category Name" class="form-control" required="required">
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group">
                        {{-- <button type="submit" class="btn btn-primary">Add</button> --}}
                        <button class="btn btn-primary">Add</button>

                    </div>
                  </div>

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

AdminController.php Top of AdminController

namespace App\Http\Controllers;

use App\Oex_category;
use Illuminate\Http\Request;
use Validator;

Function inside Admin Controller

public function exam_category()
    {
        return view('admin.exam_category');
    }

    public function add_new_category(Request $request)
    {
        $validator = Validator::make($request->all(), ['name' => 'required']);
        if ($validator->passes()) {
            $cat = new Oex_category();
            $cat->name = $request->name;
            $cat->status = 1;
            $cat->save();
            $arr = array('status' => 'true', 'message' => 'success', 'reload' => url('/admin/exam_category'));
        } else {
            $arr = array('status' => 'false', 'message' => $validator->errors()->all());
        }
        // echo json_encode($arr);
    }

custom.js

$(document).on("submit", ".database_operation", function() {
    let url = $(this).attr("action");
    let data = $(this).serialize();
    $post(url, data, function(fb) {
        let resp = $.parseJson(fb);
        if (resp.status == "true") {
            alert(resp.message);
            setTimeout(function() {
                window.location.href = resp.reload;
            }, 1500);
        }
    });
    return false;
});

Note: I ran some previous test in my custom.js and the app is finding it. Finally, here is my web.php

Route::get('/', function () {
    return view('welcome');
});

Auth::routes();

Route::get('/home', 'HomeController@index')->name('home');
Route::get('/admin', 'AdminController@index')->name('admin');
Route::get('/admin/exam_category', 'AdminController@exam_category')->name('exam_category');
Route::post('admin/add_new_category', 'AdminController@add_new_category');

Thank you in advance for looking over my code.

Answer 1

All routes and controllers should return a response to be sent back to the user's browser. Laravel provides several different ways to return responses.

Just add the below lines to the end of your controller add_new_category method

return response()->json([
    'status' => 'true', 
    'message' => 'success', 
    'reload' => url('/admin/exam_category')
  ]);

To access data from response you can use,

response.data.status

For more details about response visit here