Html-форма не отправляет запрос ajax контроллеру

Я пытаюсь использовать ajax для добавления в корзину. но кажется, что форма html не отправляет никаких запросов ajax. Когда я нажимаю кнопку «Добавить в корзину». он показывает черную страницу, потому что я использую этот метод проверки ajax на контроллере.

Контроллер

 public function addToCart(Request $request){

    $product = Product::find($request->product_id);
    Cart::add($product->id, $product->title, 1, $product->price);

    $response = array(
        'status' => 'success',
        'msg' => 'Setting created successfully',
    );



    if ($request->ajax())
        return \Response::json($response);

}

Javascript - AJAX

$('#add').on('submit', function (e) {
     e.preventDefault();
     var pid = $('#product_id').val();
     var cat = $('#category_id').val();
     $.ajax({
          type: "POST",
          url: host + '/addToCart',
          data: {product_id: pid, category_id: cat},
          success: function( msg ) {
               $("#xx").append("<div>"+msg+"</div>");
          }
     });
 });

HTML-форма

<form id = "add" action = "{{ route('addToCart') }}" method = "POST">
    {{csrf_field()}}
    <input type = "hidden" id = "category_id" name = "category_id" value = "{{ $px->category_id }}">
    <input type = "hidden" id = "product_id" name = "product_id" value = "{{ $px->id }}">
    <input type = "submit" value = "Add to Cart" class = "bg-color-input">
</form>
<div id = "xx"></div>

где я ошибся?