Craft Commerce: Multiple redirect submit buttons from cart form (checkout/update cart) without ajax

Question

I'm building a basic cart page in Craft 3.7.37 with Commerce 3.4.12. The /store/cart page has a <form> with the line items in the cart next to an <input /> to change quantity and one to remove the line item. I also have an "Update Cart" button that updates quantities from the form (redirecting back to /store/cart) and a "Checkout" button that currently just submits the form. I've added a redirectInput function to the form to redirect back to /store/cart on submit, which works for the "Update Cart" and "Remove" buttons.

How do I make the "Checkout" button redirect to /store/checkout/contact and update cart quantities when the user clicks it?

I know this is possible in PHP server side but I'm not great at PHP. I'm hoping there's a a way to use Craft's built-in functions. I want to avoid using jQuery ajax and Javascript form processing if possible (as in this question). I also want to ensure urls are hashed.

Here's the relevant template code:

<form method="POST" data-cart>
<input type="hidden" name="action" value="commerce/cart/update-cart" />
{{ redirectInput('/store/cart') }}
{{ csrfInput() }}
<input type="hidden" name="gatewayId" value="{{ gatewayId }}" />
{% set item = item | default(false) %}
{% set maxQty = maxQty | default('') %}
{% set summary = summary | default(false) %}
{% if item %}
{% set sum = item.price * item.qty %}
{% if summary %}
<p class="cart-items__item__summary">
    {{ item.qty }} &times; {{ item.price | currency }} = {{ sum | currency }}
</p>
{% else %}
<div class="cart-items__item__fields">
    <label class="cart-items__item__qty">
        {{ item.price | currency }}
        &times;
        <input max="{{ maxQty }}" min="0" name="lineItems[{{ item.id }}][qty]" placeholder="qty" step="1" type="number" value="{{ item.qty }}" />
        =
        {{ sum | currency }}
    </label>
    <label class="cart-items__item__remove">
        <input name="lineItems[{{ item.id }}][remove]" type="submit" value="{{ item.qty }}" />
        Remove
    </label>
</div>
{% endif %}
{% endif %}
<div class="actions">
    <a href="/store" class="button actions__action">&larr; Back to Store</a>
    <button type="submit" class="button actions__action">Update Cart</button>
    <button type="submit" class="button actions__action">Checkout &rarr;</button>
</div>

and a screenshot of the front-end to help clarify:

Answer 1

You may be able to use the browser-native <button type="submit"> feature!

Check this out:

<form method="POST">
  {{ csrfInput() }}
  {{ actionInput('commerce/carts/update-cart') }}

  {# ...your existing form controls... #}

  <button
    type="submit"
    name="redirect"
    value="{{ 'update/path/target' | hash  }}">Update Quantities</button>

  <button
    type="submit"
    name="redirect"
    value="{{ 'checkout/path/target' | hash  }}">Checkout</button>
</form>

The only peculiar thing to note here is the direct use of Craft's hash filter—ultimately the same functionality that redirectInput() helper provides, as a means to prevent tampering with the values and exposing your app to remote code execution vulnerabilities!