Как остановить переход на станицу при отправке ajax-запроса в Laravel

Не так давно начал осваивать фреймворк Laravel. Столкнулся с проблемой при обработке ajax-запроса. Я отправляю форму чтобы добавить товар в БД, в качестве action в форме прописываю route. при нажатии на кнопку товар добавляется в БД но меня перекидывает на прописанный в route url, а я хочу сделать чтобы добавление происходило без обновления страницы и просто отобразить на странице сообщение о добавлении товара.

вот js код

let addProduct = document.querySelector('#add_product');

//Функция добавления продукта
$('add_product').onsubmit = function (){

    let title = addProduct.querySelector("input[name='title']");
    let description = addProduct.querySelector("input[name='description']");
    let cost = addProduct.querySelector("input[name='cost']");
    let categoryId = addProduct.querySelector("select[name='category_id']");

    $.ajax({
        url: addProduct.action,
        type: 'POST',
        data:{
            title:title,
            description:description,
            cost:cost,
            categoryId:categoryId},
            headers:{
                'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
            },    
            success: function (){
                let alertAddProduct = document.querySelector(".alert-add-product");
                alertAddProduct.style.display = 'block';
            },

            error: function (msg){
               alert('Запись не удалась');
            }
        }
    });
}

вот web.php

<?php

use App\Http\Controllers\CategoryController;
use App\Http\Controllers\ProductController;
use Illuminate\Support\Facades\Route;

Route::get('/', [ ProductController::class, 'index' ])->name('products.index');;

Route::get('/about', function () {
    return view('information.about');
});

Route::get('/contacts', function () {
    return view('information.contacts');
});

Route::get('/admin', function () {
    return view('admin.index');
});

Route::get('/admin/categories', [ CategoryController::class, 'index' ])->name('categories.index');

Route::get('/admin/categories/create', [ CategoryController::class, 'create' ])->name('categories.create');

Route::post('/admin/categories/', [ CategoryController::class, 'store' ])->name('categories.store');


Route::get('/admin/products', [ ProductController::class, 'indexAdmin' ])->name('products.index_admin');

Route::get('/admin/products/create', [ ProductController::class, 'create' ])->name('products.create');

Route::post('/', [ ProductController::class, 'store' ])->name('products.store');

Route::get('/{category_id}/{id}', [ ProductController::class, 'show' ])->name('products.show');

Route::get('/admin/products/edit/{id}', [ ProductController::class, 'edit' ])->name('products.edit');

Route::patch('/admin/products/{id}', [ ProductController::class, 'update' ])->name('products.update');

Route::delete('/admin/products/{id}', [ ProductController::class, 'destroy' ])->name('products.destroy');

Route::get('/{category_id}', [ProductController::class, 'indexCategories'])->name('products.index_categories');

вот сама форма

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="alert alert-success alert-add-product" role="alert">Товар добавлен </div>
            <form id="add_product" action="{{ route('products.store') }}" method = "post">
                @csrf
                <input type="hidden" name="_token" value="{{ csrf_token() }}">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Add Product</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-9 pr-1">
                            <div class="form-group">
                                <label>Name</label>
                                <label>
                                    <input name = "title" type="text" class="form-control" >
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 pr-1">
                            <div class="form-group">
                                <label>Description</label>
                                <label>
                                    <input name = "description" type="text" class="form-control">
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12">
                            <div class="form-group">
                                <label>Cost</label>
                                <label>
                                    <input name = "cost" type="text" class="form-control">
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-9">
                            <div class="form-group">
                                <label>Category ID</label>
                                <label>
                                    <select class="form-control" name = "category_id">
                                        <option value = 0>Не выбрано</option>
                                        @foreach($categories as $category)
                                            <option value ='{{ $category->cat_id }}'>{{ $category->name }}</option>;
                                        @endforeach
                                    </select>
                                </label>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button name ="submit" type="submit" class="btn btn-primary">Add Product</button>
                </div>
            </form>
        </div>
    </div>
</div>