Magento 2: Shopping Cart quantity doesnt update after custom Add to cart form is submitted

Question

I have a custom Add to Cart button for bundled products. This is on my phtml for the /test-page :

<?php
/** @var Magento\Checkout\Helper\Cart $_checkoutCartHelper */
$_checkoutCartHelper = $this->helper(Magento\Checkout\Helper\Cart::class);
/** @var Magento\Catalog\Model\Product $_product */
$postParams = $block->getAddToCartPostParams($_product); ?>

<form action="<?php /* @escapeNotVerified */ echo $_checkoutCartHelper->getAddUrl($_product); ?>" method="post">
    <input type="hidden" name="product" value="<?php /* @escapeNotVerified */ echo $postParams['data']['product']; ?>"/>
    <input type="hidden" name="item" value="<?php echo $_product->getId(); ?>">
    <?php echo $block->getBlockHtml('formkey');

    /** @var \Magento\Bundle\Model\Selection $selection */
    foreach ($block->getSelectionCollection($_product) as $selection) {       
        echo '<input type="hidden" aria-required="true" name="bundle_option['
            . $selection->getOptionId() . ']" class="bundle-option-' . $selection->getOptionId() . ' product bundle option" value="'
            . $selection->getSelectionId() . '" />';
        echo '<input type="hidden" name="bundle_option_qty['
            . $selection->getOptionId() . ']" value="'
            . $selection->getSelectionQty() . '" />';
    }
    ?>
    <input type="hidden" name="qty" id="qty" value="1"/>
    <button type="button" class="button btn-cart" onclick=" this.form.submit()"
            title="<?= $_customProductHelper->getAddToCartText($_product, 'Add to Cart') ?>">
            <span><span>
                    <?php echo $_customProductHelper->getAddToCartText($_product, 'Add to Cart') ?>
            </span></span>
    </button>
</form>

It works fine; after the user clicks on Add to Cart, the bundle product is added to the shopping cart and then it is redirected back to the /test-page. It then appears the message "You added TEST Bundle Product to your shopping cart."

The problem is that the little shopping cart on the corner doesn't update the quantity of the products with the recent added-to-cart product.

However, if I go to /checkout/cart, the product is there.

Any ideas why? Thanks in advance

Answer 1

After spending some hours debugging, found out that the way the form was submitted was the problem. I had this line:

<button type="button" class="button btn-cart" onclick=" this.form.submit()"

When I had to have:

<button type="submit"

However, I don't know why that makes a difference.

Anyways, that is now updating the mini cart!