jQuery 1.4+, A modern browser
We want to have plus and minus buttons to increment our product quantity, rather than just a boring input box that a user might have to (GASP) type into!
From this:
To this:
Yes, much lazier, erm I mean… nicer 😉
1 2 3 4 5 6 7 8 9 10 11 | <div> <a class="decrement_qty" href="javascript:void(0)"> <img src="images/minus-qty.png" width="16" height="16" alt="&ndash;" /> </a> <input name="qty" size="4" value="1" /> <a class="increment_qty" href="javascript:void(0)"> <img src="images/plus-qty.png" width="16" height="16" alt="&plus;" /> </a> </div> |
And to make it all work, the jQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | <script type="text/javascript"> //<![CDATA[ jQuery(document).ready(function(){ jQuery('.increment_qty').click(function() { var oldVal = jQuery(this).parent().find("input").val(); if ( parseFloat(oldVal) >= 1 ) { var newVal = parseFloat(oldVal) + 1; jQuery(this).parent().find("input").val(newVal); } }); jQuery('.decrement_qty').click(function() { var oldVal = jQuery(this).parent().find("input").val(); if ( parseFloat(oldVal) >= 2 ) { var newVal = parseFloat(oldVal) - 1; jQuery(this).parent().find("input").val(newVal); } }); }); //]]> </script> |
I know this could be simplified, but I wanted support for multiple instances per page, and this supports that.
Note: If you are going to use this in a loop, place the jQuery outside the HTML loop, obviously.
This could be easily modified to suit dynamic applications also. Happy clicking!