I am poor in AJAX and trying to submit the form and insert the record to the custom table since a couple of days but not getting it to work.

I am getting 400 Bad request error on console. Please have a look at the code.

In fact, I have tried multiple ways to submit data but none of them works.

HTML

<form class="addtocartform" id="gsAddToCart" method="POST">
    <label class="gs-label" for="options">Options</label>
    <select class="gs-select-box" id="product_option" name="product_option">
        <option value="0">Somnath</option>
        <option value="1">Dwarka</option>
        <option value="2">Rameshwaram</option>
    </select>
    <label class="gs-label" for="qty">Qty.</label>
    <input class="gs-number" id="qty" min="1" name="qty" step="1" type="number" value="1">

        <button class="gs-button order-button add-to-cart-button">
            <i class="fa fa-cart-plus"></i>
            <span class="gs-button-label">Add to Cart</span>
        </button>

        <input id="product" name="product" type="hidden" value="160"/>
        <input id="group_id" name="group_id" type="hidden" value="194"/>
    </input>
</form>

WordPress Hooks - Enqueue scripts

function gs_enqueue_ajax_scripts()
{

    wp_register_script('gs-ajax', GROUP_SHOP_ROOT . 'public/js/add-to-cart-ajax.js', ['jquery'], 1.0, TRUE);
    wp_localize_script('gs-ajax', 'ajax_vars', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce'    => wp_create_nonce('gs_nonce'),
    ]);
    wp_enqueue_script('gs-ajax');

}

add_action('wp_enqueue_scripts', 'gs_enqueue_ajax_scripts');

WordPress Hooks - Process and Insert Data

function gs_add_to_cart_ajax()
{

    check_ajax_referer('gs_nonce', $_POST[ 'nonce' ], FALSE);

    // validating stuffs ..

    $cart = new Group_Shop_Cart();
    $cart->add_to_cart($_POST[ 'group_id' ], $_POST[ 'product' ], $_POST[ 'qty' ], $_POST[ 'product_option' ]);

    wp_die();
}

add_action('wp_ajax_gs_add_to_cart_ajax', 'gs_add_to_cart_ajax');
add_action('wp_ajax_nopriv_gs_add_to_cart_ajax', 'gs_add_to_cart_ajax');

Javascript

(function ($) {

    $(document).on("click", ".add-to-cart-button", function () {

        let data = JSON.stringify({
            action: 'gs_add_to_cart_ajax',
            group_id: $('#group_id').val(),
            product: $('#product').val(),
            qty: $('#qty').val(),
            product_option: $('#product_option').val(),
        });

        $('form.addtocartform').on('submit', function (e) {
            e.preventDefault();

            $.ajax({

                method: 'POST',
                dataType: 'json',
                nonce: ajax_vars.nonce,
                url: ajax_vars.ajax_url,
                data: data,
                success: function (response) {
                    alert("Success");
                }

            });
        });

    });

})(jQuery);

I have no idea what is wrong in this code that not submitting.

Modified Code

$.ajax({

    method: 'POST',
    dataType: 'json',
    nonce: ajax_vars.nonce,
    url: ajax_vars.ajax_url,
    data: {
        action: 'gs_add_to_cart_ajax',
        group_id: $('#group_id').val(),
        product: $('#product').val(),
        qty: $('#qty').val(),
        product_option: $('#product_option').val(),
    },
    success: function (response) {
        alert("Success");
    }

});