jQuery, динамический список позиций товаров в форме заказа

Обычно в интернет-магазине корзина представляет из себя готовый список заказа с возможностью обновить количество товара с помощью кнопки типа «Update» с перезагрузкой страницы. А что делать, когда необходимо дать пользователю возможность добавлять и удалять позиции товаров на одной странице без перезагрузки? В таком случае может пригодиться следующий вариант.

Для примера использую следующую форму

<form action='save_order.php' method='POST'>
  <input type='hidden' id='count' name='count' value='1' />
  <div id='main'>
    <div id='e1'>
      Товар <select name='s1'><option value='1'>Товар 1</option><option value='2'>Товар 2</option></select>
      Количество <input type='text' size=10 name='c1' value='' />
      <a href="javascript:del('e1');">X</a>
    </div>
  </div>
  <a href="javascript:add();">Добавить товар</a>
  <input type='submit' value='Заказать' />
</form>

js-скрипт для обработки

//===== добавление строки =====================================
function add(){

// считываем счетчик и увеличиваем на 1
  var ecount = $('#count').attr('value');
  ecount++;

 // копируем строку заказа, присваивая имя со следующим по списку номером
  $('#e1').clone().appendTo('#main').attr('id','e' + ecount);

// для новой строки заказа меняем значения тегов
  $('#e' + ecount + ' > a').attr('href', "javascript:del('e" + ecount +"')");
  $('#e' + ecount + ' > select').attr('name', "s" + ecount);
  $('#e' + ecount + ' > input[name="cel1"]').attr('name', "c" + ecount).attr('value', '');

// сохраняем счетчик
  $('#count').attr('value', ecount);
}

//===== удаление строки =====================================

function del(e){

// считываем счетчик
  var ecount = $('#count').attr('value');

  var el_num, i;

// заказ должен состоять как минимум из одной позиции, поэтому первая строка не удаляется
  if (e == 'e1') return;
    else {
      $('#' + e).remove(); 
   
   // берем номер удаляемого элемента
      e_num = parseInt((e.substr(1,e.length-1)));

   // уменьшаем на 1 номера тех позиций заказа, которые следовали за ним
      for (i = e_num+1; i <= ecount; i++)
      {
        $('#e' + i + ' > a').attr('href', "javascript:del('e" + (i-1) +"')");
        $('#e' + i + ' > select').attr('name', "s" + (i-1));
        $('#e' + i + ' > input[name="c'+ i + '"]').attr('name', "c" + (i-1));
        $('#e' + i).attr('id','e' + (i-1));
      }      

  // уменьшаем и сохраняем счетчик
      ecount--;
      $('#count').attr('value', ecount);
    }
}

В скрипте save_order.php данные формы обрабатываются в цикле

  for ($i = 1; $i <= intval($_POST['count']); $i++)
 {
      ...$_POST['s'.$i]...
      ...$_POST['c'.$i]...
 }

Конечно, используя стили, можно скрыть вариант удаления первой строки заказа и добавить украшательств, но для краткости я описал основной механизм.

Удачных продаж!