Product not refreshing after quantity update (product page)

[jmauclair]

Hi there !

I am completely reworking a site currently and I had to modify the add to cart part except that now, when I click to modify the quantities, there is no refresh of the product page:

Here is my add to cart tpl:

{if !$configuration.is_catalog}
  <div class="product-add-to-cart add-to-cart-jl">
    {block name='product_quantity'}
      <div class="product-quantity clearfix">
        {if $product.add_to_cart_url}
          <div class="product-qty">
            <span class="control-label cart-quantity-jl">{l s='Quantity' d='Shop.Theme.Catalog'}</span>
            <div class="qty clearfix">
              <input type="number" name="qty" id="quantity_wanted" value="{$product.quantity_wanted}" class="input-group"
                min="{$product.minimal_quantity}" aria-label="{l s='Quantity' d='Shop.Theme.Actions'}">
            </div>
          </div>
        {/if}
        <div class="add">
          <button class="btn {if !$product.add_to_cart_url} btn-danger {else} btn-primary {/if} add-to-cart"
            data-button-action="add-to-cart" type="submit" {if !$product.add_to_cart_url} disabled
            style="background-color:#d9534f ;" {/if}>
            {if !$product.add_to_cart_url}
              {l s='Rupture de stock' d='Shop.Theme.Actions'}
            {else}<i class="icon-basket shopping-cart"></i>
              {l s='Add to cart' d='Shop.Theme.Actions'}
            {/if}
          </button>
        </div>
        <div class="compare-wishlist-wrapper">
          {hook h='displayLeoWishlistButton' product=$product}
          {hook h='displayLeoCompareButton' product=$product}
        </div>

        {hook h='displayProductActions' product=$product}
      </div>
    {/block}
  </div>
{/if}

Here is my product tpl part 

<div class="card">
        {block name='product_prices'}
          {include file='catalog/_partials/product-prices.tpl'}
        {/block}
        <form action="{$urls.pages.cart}" method="post" id="add-to-cart-or-refresh">
          <input type="hidden" name="token" value="{$static_token}">
          <input type="hidden" name="id_product" value="{$product.id}" id="product_page_product_id">
          <input type="hidden" name="id_product_attribute" value="{$product.id_product_attribute}"
            id="id_product_attribute">
          <input type="hidden" name="id_customization" value="{$product.id_customization}"
            id="product_customization_id">
          <div class="card-content-jl">
            <div class="row">
              <div class="col-sm-6">
                <ul class="bulletpoints-jl">
                  <li>Extrement efficace</li>
                  <li>Nettoie en profondeur</li>
                  <li>Redonne un look neuf</li>
                </ul>
              </div>
              <div class="col-sm-6 variants-row-jl">
                {block name='product_variants'}
                  {include file='catalog/_partials/product-variants.tpl'}
                {/block}
              </div>
            </div>
            <p class="estimated-delivery-jl">Livraison le <span id="quick-delivery-jl"><span
                  class="lds-dual-ring"></span></span> ou le <span id="free-delivery-jl"><span
                  class="lds-dual-ring"></span></span> offerte dès 75€</p>
            {block name='product_add_to_cart'}
              {include file='catalog/_partials/product-add-to-cart.tpl'}
            {/block}
          </div>
          {block name='product_refresh'}
            <input class="product-refresh ps-hidden-by-js" name="refresh" type="submit"
              value="{l s='Refresh' d='Shop.Theme.Actions'}">
          {/block}
        </form>
      </div>

I admit I tried to add an onchange on my input quantity_wanted, however, when I click on the up or down, nothing at all, the value of the input remains unchanged.

I looked for how to be able to fire the product update event in core.js but everything has been "simplified" with functions that only have a single letter as a name.

I'm open to any solution.