Canvas Support

min max values doesn't work for input elements

4 replies · opened Jul 7, 2019

BblixiuJul 7, 2019

Hi,

I have such code on my website:
<div class="quantity countdown-descr">
<div class="product-quantity-buttons">
<input type="button" value="-" class="minus" field='quantity2'>
<input type="text" step="1" min="0" max="5" name="quantity2" value="1" title="Qty" class="qty" size="4" />
<input type="button" value="+" class="plus" field='quantity2'>
</div>
</div>

min max values doesn't work.
I can only go as low as 1.
I can go to infinite.
Is there a way to enforce those properties?
I thought it was my browser's error that it didn't work, but it works fine here: https://html5tutorial.info/html5-number.php

The most important thing to me is be able to go to 0.

SSemicolon WebSTAFFJul 8, 2019

Hello,

Please make sure that you are using type="number" instead of type="text" on the <input> tag for this to work properly.

This will definitely fix the issue. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

BblixiuJul 9, 2019

unfortunately this doesn't solve the problem. I still can't go under 1 and I can go over 5.

BblixiuJul 9, 2019

I got this code from one of your templates:
shop-single.html in HTML folder.

when I edit it and change min / max values, it also doesnt work:
<form class="cart nobottommargin clearfix" method="post" enctype='multipart/form-data'>
<div class="quantity clearfix">
<input type="button" value="-" class="minus">
<input type="text" step="1" min="0" max="5" name="quantity" value="1" title="Qty" class="qty" size="4" />
<input type="button" value="+" class="plus">
</div>
<button type="submit" class="add-to-cart button nomargin">Add to cart</button>
</form><!-- Product Single - Quantity & Cart Button End -->

I think one of the scripts is actually manages that and min / max values might be in the script.

SSemicolon WebSTAFFJul 10, 2019

Hello,

Thanks for the heads-up on this. Unfortunately, the current code does not account for the Min/Max values. To fix this, please replace the entire cartQuantity: function() Function Block with the following code: 

cartQuantity: function(){

	$(".plus").off( 'click' ).on( 'click', function(){
		var quantity = $(this).parents('.quantity').find('.qty'),
			productQuantity = quantity.val(),
			quantityStep = quantity.attr('step'),
			quantityMax = quantity.attr('max'),
			intRegex = /^\d+$/;

		if( !quantityStep ) { quantityStep = 1; }
		if( quantityMax && ( Number(productQuantity) >= Number( quantityMax ) ) ) { return false; }

		if( intRegex.test( productQuantity ) ) {
			var productQuantityPlus = Number(productQuantity) + Number(quantityStep);
			quantity.val( productQuantityPlus ).change();
		} else {
			quantity.val( Number(quantityStep) ).change();
		}

		return false;
	});

	$(".minus").off( 'click' ).on( 'click', function(){
		var quantity = $(this).parents('.quantity').find('.qty'),
			productQuantity = quantity.val(),
			quantityStep = quantity.attr('step'),
			quantityMin = quantity.attr('min'),
			intRegex = /^\d+$/;

		if( !quantityStep ) { quantityStep = 1; }
		if( !quantityMin ) { quantityMin = 1; }

		if( intRegex.test( productQuantity ) ) {
			if( Number(productQuantity) > Number( quantityMin ) ) {
				var productQuantityMinus = Number(productQuantity) - Number(quantityStep);
				quantity.val( productQuantityMinus ).change();
			}
		} else {
			quantity.val( Number(quantityStep) ).change();
		}

		return false;
	});

},

This should definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard