Шаг 188.
Библиотека jQuery. Интерактивные формы. Работа с числовыми данными в формах. Последние штрихи

    На этом шаге мы рассмотрим реализацию итоговых вычислений.

    Стоимость доставки вычисляется проще, чем сумма скидки, поскольку в данном случае не выполняется округление. Стоимость доставки одного предмета просто умножается на количество предметов, и полученное значение используется как общая стоимость доставки:

    $('tr.shipping td.quantity').text(String(totalQuantity));
    var shippingRate = parseFloat($('.shipping .price')
                             .text().replace(/^[^\d.]*/, ''));
     var shipping = totalQuantity * shippingRate;
     $('tr.shipping td.cost').text(shipping.toFixed(2)+' руб');
     totalCost += shipping;

    В ходе вычислений мы постоянно следили за общей итоговой суммой, поэтому нам осталось всего лишь отформатировать значение переменной totalCost для записи в последнюю ячейку:

     $('tr.total td.cost').text(totalCost.toFixed(2)+' руб');

    Таким образом, мы полностью повторили вычисления, которые выполняются на стороне сервера, поэтому теперь мы можем скрыть кнопку Пересчитать, как показано на рисунке 1:

  $('#recalculate').hide();

Рис.1. Вид формы со скрытой кнопкой Пересчитать

Полный текст этого примера можно взять здесь.

    Данное изменение еще раз повторяет принцип прогрессивного улучшения: сначала убедитесь, что страница корректно работает без JavaScript, а затем используйте библиотеку jQuery, чтобы выполнить те же задачи более элегантным способом, если это возможно.

    На следующем шаге мы рассмотрим удаление элементов.




Предыдущий шаг Содержание Следующий шаг