Advive on adding a +/- style box for quantity selection on an add to cart page?

How do I create a quantity field on my add to cart page that has +/- selectors to allow the user to increase/decrease the quantity required without having to physically type a number?

Thank you.
NJ

If you are using html5 you can just use <input type="number">, and the browser will do it automatically.

To do something with more bells and whistles you could probably find a script that works with jquery to do it.

I changed the quantity field on my product detail page to this:
<input type="number" name="whiskyCART_1_Quantity_Add" value="1" size="4" min="1" max="99" style="width: 60px;">

...and it works a treat. However on the View Cart page I tried changing this:
<input type="text" id="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" name="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" size="3" value="<?php echo $whiskyCART->DisplayInfo("Quantity"); ?>" onkeypress="waec_showUpdate('whiskyCART_Update_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>',this);" />

...to this...

<input type="number" id="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" name="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" size="3" value="<?php echo $whiskyCART->DisplayInfo("Quantity"); ?>" onkeypress="waec_showUpdate('whiskyCART_Update_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>',this);" min="1" max="99" style="width: 50px;padding: 5px;font-size: 14px;" />

...but when you click the "Update" button it doesn't update the totals?

Simply select the "View" or "Buy" button on the following page and then add the item to basket:
http://www.nathonjoneswebdesign.co.uk/whiskybroker/index.php

Thank you.
NJ

It looks like it is depending on the onkeypress event, which isn't fired when clicking on the arrows.

Try copying the onkeypress code and adding it to the onchange event as well like:

<input type="number" id="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" name="whiskyCART_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>" size="3" value="<?php echo $whiskyCART->DisplayInfo("Quantity"); ?>" onkeypress="waec_showUpdate('whiskyCART_Update_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>',this);" onchange="waec_showUpdate('whiskyCART_Update_Quantity_<?php echo $whiskyCART->DisplayInfo("WAUID"); ?>',this);" min="1" max="99" style="width: 50px;padding: 5px;font-size: 14px;" />

That's great Ray, thank you. Do you know why this wouldn't be working in Internet Explorer? It doesn't even show the arrows on my basic add to cart page OR the view cart page:
http://www.nathonjoneswebdesign.co.uk/whiskybroker/buy-whisky-online-Scotland.php?wbid=5

Also, we just noticed this at the foot of our view cart page...what the?

<script>
var ecart_json = "WA_eCart/whiskyCART_JSON.php";
    </script>
  <script src="WA_eCart/js/eC_Display.js"></script>
  <script>
var ecart_json = "WA_eCart/whiskyCART_JSON.php";
    </script>
  <script src="WA_eCart/js/eC_Display.js"></script>
  <script>
var ecart_json = "WA_eCart/whiskyCART_JSON.php";
  </script>
  <script src="WA_eCart/js/eC_Display.js"></script>
  <script>
var ecart_json = "WA_eCart/whiskyCART_JSON.php";
  </script>
  <script src="WA_eCart/js/eC_Display.js"></script>

Upon checking other pages that feature the eCart behaviour we also notice that this code is duplicated. What's causing that, is there a fix or will we have to just manually double check that every time we apply an eCart behaviour to a page?

Appreciate the help. Thank you.
NJ

IE doesn't support all HTML5 input types yet (including number). There are solutions out there for this, like polyfill: http://html5please.com/#number

That code is added when you add a display manager to the page. My guess is that you have added multiple display managers, deleted them but didn't delete that code, and re-added them, causing the duplicated code.