Why is AJAX script not working in firefox?

Question

JavaScript

Good afternoon! Can you tell me why AJAX script doesn't work in firefox?
The script is responsible for sending the form data (adding goods to the cart), everything is fine in Opera and Chrome. And in firefox, the form redirects to the link in the action, which is why I get 404 and the product does not get into the basket.

<form id="add-product" action="/cart">
          {if $product->sizes|count > '1'}
          <div class="product__size-list">
            {foreach $product->sizes as $v}
            <input id="size-n-{$v->size_id}" class="product__size-checkbox display--hidden" name="size" type="radio" value="{$v->size_id}">
            <label for="size-n-{$v->size_id}" class="product__size-item">
                {$v->scale}{if $v->growth}&nbsp;({$v->growth}){/if}
            </label>
            {/foreach}
          </div>
          {/if}
          <div style="display: none;">
            <input name="variant" value="{$product->variant->id}" type="radio" checked style="display: none;" />
          </div>
          <div class="product__quantity">
            <span class="btn-m btn-minus">
              <i class="fa fa-minus" aria-hidden="true"></i>
            </span>

            <input class="display--hidden" type="text" name="amount" value="1">

            <span class="quantity__count">1</span>
            <span class="btn-m btn-plus">
              <i class="fa fa-plus" aria-hidden="true"></i>
            </span>
          </div>
        </form>

$('.main-wrap').on('submit','form#add-product',function() {
    event.preventDefault();
    var a = null,
        e = null,
        t = $(this),
        n = t.find('button[type="submit"]'),
        r = t.find('input[name="variant"]:checked'),
        s = t.find('select[name="variant"]'),
        i = t.find('select[name="size"]'),
        u = t.find('input[name="size"]:checked'),
        l = t.find('input[name="amount"]');
    console.log(a = r.val());
    console.log(e = u.val());
    console.log(l.val());
    r.size() > 0 && (a = r.val()),
    l.size() > 0 && (amount = l.val()),
    s.size() > 0 && (a = s.val()),
    u.size() > 0 && u.val() > 0 && (e = u.val()),
    i.size() > 0 && (e = i.val()), 0 != e ? $.ajax({
        url: "ajax/cart.php",
        data: {
            variant: a,
            size: e,
            amount: amount
        },
        dataType: "json",
        success: function(a) {
            // $(".error-message").hasClass("size-error") && $(".error-message").removeClass("size-error"),
            console.log(a['c']);
            console.log(a['p']);
            $(".cart-btn").html(a['c']).addClass('cart--active');
            $('.popup__body').html(a['p']);
        }
    }) : $(".error-message").addClass("size-error")
});

Answer 1

Try to remove action="/cart" )))
And why don't you use the method data transfer format? POST or GET alya REQUEST?