Выбираем значения и считаем сумму

Недавно понадобилось сделать на JavaScript одну казалось бы довольно тривиальную задачу — автоподсчет «на лету» общей суммы заказа в корзине интернет-магазина. Казалось бы — данная функция настолько популярна, что готовых примеров должно быть сотни. Не тут-то было. Почесав затылок и выпив пару кружек кофе приступил к собственной релизации задумки, которой и хочу поделиться.

Сразу показываю, что должно получиться:

Попробуйте изменить цифры в полях ввода — вы увидите, как внизу таблицы автоматически считается общая сумма.

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

•  идентификатор формы (id), внутри которой расположена таблица с заказываемыми товарами;
• идентификаторы полей ввода, а так же объявление для них свойства onBlur, вызывающее js-функцию с тремя параметрами: id самого поля ввода, цену за единицу соответствующего ему товара, а так же идентификатор какого-либо контейнера тегов, в котором мы будем выводить посчитанную сумму по товару;
• идентификатор контейнера, в котором будет выводиться общая сумма.

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

Итак, исходный HTML-код таблицы (если еще не успели посмотреть исходник этой страницы):

    <form id='me_order_form'>
        <table>
            <tr><th>№</th><th>наименование</th><th>цена, руб</th><th>количество</th><th>сумма</th></tr>
            <tr><td>1</td><td>видеокарта</td><td>5000</td><td><input type='text' value='2' id='inp_1' onBlur='calculate(this.value, "5000", "bdo_1")'></td><td><bdo dir='ltr' id='bdo_1'>10000</bdo> руб.</td></tr>
            <tr><td>2</td><td>монитор</td><td>7000</td><td><input type='text' value='3' id='inp_2' onBlur='calculate(this.value, "7000", "bdo_2")'></td><td><bdo dir='ltr' id='bdo_2'>21000</bdo> руб.</td></tr>
            <tr><td>3</td><td>мышка</td><td>300</td><td><input type='text' value='1' id='inp_3' onBlur='calculate(this.value, "300", "bdo_3")'></td><td><bdo dir='ltr' id='bdo_3'>300</bdo> руб.</td></tr>
            <tr><td>4</td><td>жесткий диск</td><td>4000</td><td><input type='text' value='2' id='inp_4' onBlur='calculate(this.value, "4000", "bdo_4")'></td><td><bdo dir='ltr' id='bdo_4'>8000</bdo> руб.</td></tr>
            <tr><td colspan='3'>общая сумма: </td><td colspan='2'><span id='total_sum'>39300</span> рублей</td></tr>
        <table>
    </form>

Как видите, вполне обычная таблица. Единственное, что кому то может показаться странным — это довольно редко встречающийся тег <bdo>. Выбран он именно из за своей редкости — что бы обезопаситься от случайной встречи этого тега вне нашей таблицы. Использовать какие либо менее экзотические теги с определенным классом я не стал — во-первых, как мне кажется это работает медленнее, а во-вторых —  существует вероятность того, что этот же класс в данном скрипте кто то после меня использует не там где надо. Кстати, если интересно — тег <bdo> вполне безобиден, и применяется всего лишь для изменения направления текста (для языков, в которых пишут справа-налево), в моем случае атрибут этого тега - dir='ltr', т.е. текст пишется как надо — слева-направо. Так что ни семантика, ни смысл не страдают.

Теперь давайте рассмотрим отдельно взятую строку таблицы. С номером, названием и ценой думаю вопросов нет. Далее идет текстовое поле со значением по умолчанию (его подставляет серверный скрипт). Так же у этого поля есть id и свойство onBlur, вызывающее функцию, которую мы напишем ниже. Параметры этой функции:

• this.value - всего лишь те данные, которые введет пользователь;
• цена - этот параметр также подставляет серверный скрипт;
• идентификатор bdo-контейнера - контейнер, в котором выводится сумма для конкретного товара.

Повторюсь — все это очень легко генерируется серверными скриптами. Например, для этой статьи я просто запустил php-скрипт в цикле и подставил значения счетчика к префиксам inp_ и bdo_.

Небольшое отступление: я использовал onBlur - событие, возникающее когда текстовое поле теряет фокус (т.е. курсор перемещается в другое поле, в адресную строку браузера, да и просто если человек щелкнул по кнопке формы или даже по тексту). Вместо этого можно было использовать onChange — событие, возникающее когда текст поля изменен и поле потеряло фокус. Но в данном случае это не принципиально.

Теперь напишем javascript-функцию, которая будет обрабатывать все изменения в количестве товаров. Комментариев в самом коде более чем достаточно, так что дополнительно что то расписывать не вижу смысла. Итак:

<script type='text/javascript'>
    /*
    * Входные параметры функции:
    *    quant     - количество товара
    *    prise     - стоимость за единицу
    *    updElemId - идентификатор элемента, в котором требуется обновить данные (по конкретному товару)
    **/
    function calculate(quant, prise, updElemId){
            // данное регулярное выражение проверяет, является ли введенное значение числом
            // учтите, что дробное число тоже является корректным!!! (ведь можно же продавать по полторы тонны чего-либо?)
        var anum = /(^\d+$)|(^\d+\.\d+$)/;
        if (!anum.test(quant)) {
            // если данные не валидны - выводим предупреждение и прерываем выполнение функции
            alert('Введенное значение не является числом!');
            return;
        }
            // сумма по наименованию = количество * цену
        goodSum = quant * prise;
            // обновляем элемент - выводим в нем полученную сумму
            // если непонятно: вместо параметра применяемой функции - updElemId
            // у нас подставляется ID конкретного элемента страницы, с которым эта функция была вызвана.
            // Про innerHTML можете самостоятельно поискать в сети - информации море
        document.getElementById(updElemId).innerHTML = goodSum;
            // "вытаскиваем" все, что есть внутри нашей формы с id = 'me_order_form'
        var meForm   = document.getElementById('me_order_form');
            // затем как бы фильтруем эти данные - берем только то, что в контейнерах <bdo></bdo>
        var bdoArray  = meForm.getElementsByTagName('bdo');
            // устанавливаем начальное нулевое значение ОБЩЕЙ суммы
        var allSumm = 0;
            // и в цикле прибавляем к ней сумму каждого товара
        for (j = 0; j < bdoArray.length; j++) {
                // функция parseFloat преобразует данные в число с плавающей запятой
                // без этого сумма не считалась бы, а использовалась КОНКАТЕНАЦИЯ -
                // то есть 100 и 200 будет не 300 (как нужно нам), а 100200 - что нам совсем не нужно :)
            allSumm = allSumm + parseFloat(bdoArray[j].innerHTML);
        }
            // и обновляем содержимое контейнера с id = total_sum
        document.getElementById('total_sum').innerHTML = allSumm;
    }
</script>

Итак, осталось только приложить архив с исходным кодом и сделать небольшое, но важное предупреждение: не стоит безоговорочно доверять проверкам, выполненным javascript, и всегда проверяйте данные, пришедшие от пользователя на стороне сервера. Помните, что JS-проверки нужны для удобства пользователя, а серверные — для Вашего спокойствия и сохранности нервов.

скачать материалы по статье

просмотров: 1162 комментариев: 0