JS quantity validation not quite working!!

This site is best viewed in a modern browser with JavaScript enabled.

JS quantity validation not quite working!!

Digital_Pimp

I have quantity boxes that I need to validate the min. qty for. I nearly have it working using the following code...

// Quantity Check - 10 Lengths
 			function check_qty() {
     		var qty=document.getElementById('min10').value;
     		if(qty<10) {
         		alert("Sorry but this product has a minimum order of 10 lengths. Please enter 10 or more in the quantity box.");
         		document.getElementById('min10').value='';
     		} 
 		}

The URL for my test is http://shockproof.bpweb.net/UKHI/content/QTY_TEST.php

My problem is that when I add less that 10 into the first qty field it throws up alert and when I close it empties the field...ALL GOOD! Trouble is if I go down to the next product and add a number less that 10 I get the alert msg but the field does not clear once I clear the msg. I have also experienced it adding to basket on the second try even if you enter less that 10.

Am I missing something simple?? Any ideas!

Thanks in advance

Padonak

the id attribute must be unique

Kevin2

<input type="text" [B][COLOR="#FF0000"]id="min10"[/COLOR][/B] name="qty[]" size="2" maxlength="2" value="" onchange="check_qty();" autocomplete='off'/>

The probable source of your trouble is displayed in red. You reuse that same ID (and others) on the same page. That's not allowed; each ID must be unique.

Another way of coding the script may be:

<input type="text" name="qty[]" size="2" maxlength="2" value="" onchange="check_qty(this);" autocomplete='off'/>

and:

// Quantity Check - 10 Lengths
 			function check_qty(el) {
     		var qty=el.value;
     		if(qty<10) {
         		alert("Sorry but this product has a minimum order of 10 lengths. Please enter 10 or more in the quantity box.");
         		el.value='';
     		} 
 		}

I didn't test this so "adjustment" may be necessary...

EDIT: Padonak beat me to it, but only barely

Padonak

today i've been late in another thread ))

Digital_Pimp

Thanks both!

The code works well and clears the input field every time as needed. My problem now is that I have 2 minimums on the page. One 10 which you looked at and on the same page I have products with a minimum of 5. How could I adapt the code to accommodate.

Last request honest I appreciate the help guys!

Russ

Kevin2

Try this:

<input type="text" name="qty[]" size="2" maxlength="2" value="" onchange="check_qty(this,10);" autocomplete='off'/> <!-- for min 10 -->
<input type="text" name="qty[]" size="2" maxlength="2" value="" onchange="check_qty(this,5);" autocomplete='off'/> <!-- for min 5 -->

// Quantity Check
 		function check_qty(el,min) {
     		var qty=el.value;
     		if(qty<min) {
         		alert("Sorry but this product has a minimum order of " + min + " lengths. Please enter " + min + " or more in the quantity box.");
         		el.value='';
     		} 
 		}

Digital_Pimp

Hi Kevin2

Brilliant!! That is working great! Thank you your help is much appreciated!

Digital_Pimp

Hi Kevin2

Sorry but a last quick request. This all works well in FF and Chrome but in Safari, after the alert is shown/closed it takes the user to the checkout as opposed to staying on the page. Is there a way to stop that happening?

cheers

Russ

Kevin2

I don't have Safari installed on my computer. A bit odd that Safari would have that behavior since it uses the same basic engine as Chrome. Or is that iOS Safari? Not sure that makes a difference though.

One idea that pops into my head is to add el.focus(); under el.value='';. That might move the focus away from the submit button so that any stray mouse clicks or keyboard strokes don't cause the form to submit prematurely.

// Quantity Check
 		function check_qty(el,min) {
     		if(el.value<min) {
         		alert("Sorry but this product has a minimum order of " + min + " lengths. Please enter " + min + " or more in the quantity box.");
         		el.value='';
         		el.focus();
     		} 
 		}

Also note that I removed the qty variable. As it was only used once it was somewhat redundant.

Digital_Pimp

Hi
Unfortunately that doesn't seem to have an effect. As you said I was a little surprised that it behaved differently in Safari to Chrome but hey ho. Back to the drawing board!

Thanks for the help anyway, much appreciated