Forum

Thread tagged as: Question, Shop

Cart update form buttons

Hi

A little note about using the hidden cart update button in Safari, as suggested in the docs: https://docs.grabaperch.com/templates/apps/shop/cart/

<perch:input type="submit" value="Update" hidden="true" aria-hidden="true" />

I've found that you might need to use an actual button element as the first element in your form if you have other button elements in the cart form (for example, a remove button on each cart item) – rather than the input above. Safari refuses to see the input field as the default submit button.

So if you update a text field in your cart, a quantity field for example, pressing return will trigger the remove button even though it is not the first type="submit" element in the form.

So, at the top of the cart form, I've used:

<button type="submit" value="Update" class="l-btn-hidden"></button>

And then hidden the button with:

.l-btn-hidden {
    visibility: hidden;
    width: 0;
    height: 0;
    overflow: hidden;
}

If you set display:none the button is ignored by the browser.

Hope this helps someone else!

Jonathan Elliman

Jonathan Elliman 27 points

  • 4 years ago