www.webdeveloper.com
Results 1 to 10 of 10

Thread: JS quantity validation not quite working!!

  1. #1
    Join Date
    Mar 2005
    Location
    UK
    Posts
    45

    JS quantity validation not quite working!!

    Hi

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

    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

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    the id attribute must be unique

  3. #3
    Join Date
    Oct 2013
    Posts
    598
    Code:
    <input type="text" id="min10" 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:
    HTML Code:
    <input type="text" name="qty[]" size="2" maxlength="2" value="" onchange="check_qty(this);" autocomplete='off'/>
    and:
    Code:
    // 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

  4. #4
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,671
    today i've been late in another thread ))

  5. #5
    Join Date
    Mar 2005
    Location
    UK
    Posts
    45
    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

  6. #6
    Join Date
    Oct 2013
    Posts
    598
    Try this:
    HTML Code:
    <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 -->
    Code:
    // 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='';
         		} 
     		}

  7. #7
    Join Date
    Mar 2005
    Location
    UK
    Posts
    45
    Hi Kevin2

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

  8. #8
    Join Date
    Mar 2005
    Location
    UK
    Posts
    45
    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

  9. #9
    Join Date
    Oct 2013
    Posts
    598
    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.

    Code:
    // 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.

  10. #10
    Join Date
    Mar 2005
    Location
    UK
    Posts
    45
    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles