Dynamically increase and decrease numbers in JavaScript - php

Question

I would like to know how to dynamically increase and decrease numbers in JavaScript.
The users buys an item and I have a input field "quantity" with a number and two buttons: One to add and another to remove.
My code is the following
<td class="quantity">
-
<input type="text" id="purchase_quantity" min="1" max="99" delta="0" cost="<?php echo$poupa ?>" name="purchase_quantity" value="1" />
<a href="#" class="addItem" >+</a>
</td>
How can I have it decrease the number of the input field when I click on the "-" and increase the number of the input field when clicking on the "+"?

Answer 1

var input = document.getElementById("YOUR_INPUT_ID");
function minus(){
var num = +input.value;//+ for convert from string to number
num--;
input.value = num;
}
function plus(){
var num = +input.value;//+ for convert from string to number
num++;
input.value = num;
}
http://jsfiddle.net/VY9tE/
One more example with your html form and with check count(0..99):
http://jsfiddle.net/VY9tE/2/

Answer 2

decrease:
-
increase
+
Assuming you can use jquery since you have it tagged.

Answer 3

Markup (changed the ID on the text input to a class):
<td class="quantity">
-
<input type="text" class="purchase_quantity" min="1" max="99" delta="0" cost="" name="purchase_quantity" value="1" />
+
</td>
JavaScript (uses jQuery):
$(function() {
$('.removeItem').click(function() {
// Find the appropriate quantity input
var target = $(this).siblings('.purchase_quantity');
// Get the current quantity
var currentQuantity = $(target).val();
// Not allowed to go below zero
if (currentQuantity > 0) {
// Update input with decreased quantity
$(target).val(--currentQuantity);
}
});
$('.addItem').click(function() {
// Find the appropriate quantity input
var target = $(this).siblings('.purchase_quantity');
// Get the current quantity
var currentQuantity = $(target).val();
// Update input with increased quantity
$(target).val(++currentQuantity);
});
});
See it in action.