Как создать кнопки увеличения/уменьшения количества товара?

Question

[Pestrich]

Имеется вот такая форма:

Код:

<?php $product_value = 1; ?>
	<p>Число: <input type="text" id="col" value="<?php echo $product_value ?>"></p>
	<button id="buy">Купить</button>
	<button id="plus">+</button>
	<button id="minus">-</button>

$(document).ready(function() {
	$('#buy').on('click', myAJAX);
});

function myAJAX() {
	$.ajax({
		url : "add_to_cart.php",
		type : "GET",
		data : { "count" : $('#col').val() },
		success : function(data) {
			console.log(data);
		}
	});
}

<?php  
	$count = $_GET['count'];
	if ($count == 0) {
		echo "Равна нулю";
	} else if ($count == 1) {
		echo "Равна единице";
	} else {
		echo "Введите корректное значение";
	}
?>

Хочу сделать так, чтобы при нажатии на кнопки +/- изменялось значение в input, а значение по умолчанию было 1. Пробовал на кнопки вешать выполнение js и в нем подключать php, но ничего не получилось. Надеюсь на помощь.

Answer 1

[DanKud]

$('#plus').on('click', function () {
    let num = +$('#col').val();
    $('#col').val(num + 1);
});
$('#minus').on('click', function () {
    let num = +$('#col').val();
    if (num > 1) $('#col').val(num - 1);
});

Answer 2

[Павел Родионов]

<label for="input">Число:</label> 
<input name="input" type="number" id="col" value="1">
<button id="buy">Купить</button>
<button id="plus">+</button>
<button id="minus">-</button>

let col = document.getElementById('col');
let plus = document.getElementById('plus');
let minus = document.getElementById('minus');

plus.onclick = function() {
  col.value = parseInt(col.value) + 1;
}

minus.onclick = function() {
  col.value = parseInt(col.value) - 1;
}

Пример необходимо доработать. Например, сделать так, чтобы количество товара никогда не было отрицательным.