Problem getting form quantity + and - buttons

HTML & CSS
1

Hi there everyone!

I’m working on a form for a shopping cart and am trying to get some form buttons working to alter the quantity shown. They were present in template from the start but never worked. Is it something that can be made to work or was it just included int the template to show what would be possible adding other technologies like serverside/ajax?

Page in question: http://wheeltastic.com/test/cart.html

If you press the + or - beside the quantity, you’ll see that the quantity doesn’t actually change.

Thanks for your time!

2

To make buttons like that work would require some front-end script. They are a bit pointless though for modern browsers that recognise number inputs, because they show up/down buttons on them anyway. They are only of benefit to users with old browsers, who can just type the value.

4

A quick search on ‘tinternet’ revealed this: :slight_smile:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>

<body>
<div class="quantity buttons_added">
  <input id="minus" type="button" class="minus" value="-">
  <input id="theInput" type="number" size="4" class="input-text qty text" title="Qty" value="1" min="0" step="1">
  <input id="plus" type="button" class="plus" value="+">
</div>
<script>
var input = document.getElementById('theInput');
document.getElementById('plus').onclick = function(){
    input.value = parseInt(input.value, 10) +1
}
document.getElementById('minus').onclick = function(){
    input.value = parseInt(input.value, 10) -1
}
</script>
</body>
</html>
5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.