Так примеры есть и по ссылке. Ну если не понятно как их задействовать конкретно к кнопке и полю ввода, то можно поступить например так - поля input, это поля вне формы, если не подразумевается добавление N-товаров с одной страницы, то есть запрос на добавление, это добавление только одного товара. Пусть все товары на странице отображаются в списке, и элемент UL имеет id "products", в нем, а не по всей странице и нужно искать кнопки инициализирующие запрос сервера:
<ul id="products">
<li><input type="number" name="pid[100]" value="1" min="1"> <button></button></li>
<li><input type="number" name="pid[212]" value="1" min="1"> <button></button></li>
</ul>
Поле выбора количества товара лучше сделать типа number - в Opera, Chrome, в последнем FF такое поле будет иметь кнопки. Старые браузеры будут "понимать" такое поле как text. Имя поля, это ключ содержащий идентификатор товара, в примере равен pid. На сервере идентификатор можно получить так: (int)key($_POST['pid']).
Кнопки добавления по умолчанию, это что-то кругленькое, с иконкой корзины к примеру, а по нажатию кнопке добавляется класс "send", при котором изображение кнопки изменятся на gif-анимацию, крутилку указывающую что идет обмен с сервером.
На время запроса сервера нужно блокировать запросы на добавление товара, а по окончании снимать блокировку. Это можно сделать с помощью двух методов jQuery - ajaxStart и ajaxStop, которые можно привязать к любою объекту. В итоге получится, что-то такое:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script>
function toBasket(o) {
$.post('url', o.attr('name')+'='+o.val(), function(d) {
//d содержит ответ сервера
//удаляем анимацию у кнопки
o.next().removeClass('send');
})
}
$(function() {
var add = $('#products').find('button');
add.click(function() {
//добавляем анимацию кнопке и передаем количество товара серверу
toBasket($(this).addClass('send').prev())
}).on({
ajaxStart: function() {
//блокируем отправку
add.prop('disabled', 1)
},
ajaxStop: function() {
//разрешаем отправку
add.prop('disabled', 0)
}
});
});
</script>
PS. Подправил, совершенно из головы вылетел идентификатор товара )
