'Limit Product Qty on SquareSpace Product

I am trying to limit the qty a customer can order using the below script. The script is supposed to change the quantity input to have max="5", but it is not working.

Is the issue with my code, or something to do with SquareSpace? I do know that the page loads with max="9999" by default, is there something I'm missing to override that?

<script>
   var qty = document.querySelectorAll('input[type="number"]');
   qty.setAttribute('max', '5'); 
</script>
squarespacecss


Solution 1:[1]

Got it sorted. Needed to checks that the document has fully loaded before running the code. (also, shouldn't have querySelectorAll, just querySelector)

<script>
        document.addEventListener('DOMContentLoaded', () => {
            var qty = document.querySelector('input[type="number"]');
              qty.setAttribute('max', '5'); 
        });
</script>

Solution 2:[2]

This is a known problem. One way around it, is by nesting rounded elements when you need a colored border. Pad the other box with the same amount as the width of the border.

More information can be found in this blog post by @gonchuki: Standards Compliancy is a lie (or, how all browsers have a broken border-radius)

Solution 3:[3]

I was able to get a pretty good result by adjusting the CSS Slightly. (DEMO - Tested in Chrome & FF)

#status_progressbar_progress {
    ...
    margin-right:-1px; 
    ...
}

This just nudges the grey div to the right by a pixel. You can even up it to 2 pixels, which I think looks even better. Make sure you compensate for that pixel change in your calculations.

Solution 4:[4]

I think this happens because the browser tries to antialias the border and it probably does that by adjusting transparency so your under div is black and top gray so black gets trough. (don't quote me on this but thats atleast what seems logical to me).

Have you tried wrapping both status_progressbar and status_progressbar_progress in another div and give border-radius and overflow:hidden to that div?

Solution 5:[5]

You could try changing the border radius on the right hand side up by 1px on the background element. That might make it disappear behind the front

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 kate3686
Solution 2 Erik Tjernlund
Solution 3 Dutchie432
Solution 4 easwee
Solution 5 Alex

Related Questions