Суммирование, INPUT

@Pepeka · Регистрация: 15.01.2014

Author24 — интернет-сервис помощи студентам

Хай!

Делаю форму выбора вариантов (желтый-красный, квадратный-круглый, вкусный-с алкоголем) - пните как-нить в сторону INPUT-ов. Каждая позиция, каждое её значение, имеет свою стоимость. Как организовать инпуты такие, как присвоить значения, и главное - как их суммировать, как формировать "налету" суммарную стоимость на основе выбора юзера? Пните в нужно направлении, только не в сторону учебника по HTML ))) Там основы, а тут - задачка чуть сложнее всё таки. Может пример есть у кого рабочий?

@BarbosLV · 14.07.2014, 20:24

Тут надо пнуть в сторону учебников по PHP.

Donald28 · 15.07.2014, 08:22

Сообщение от Pepeka

как формировать "налету" суммарную стоимость на основе выбора юзера?

если под "на лету" понимается, что форма не будет отправлять данные на сервер при перезагрузки страницы, то тут надо использовать клиентский язык программирования (JavaScript)

@Micheal · 15.07.2014, 12:31

Сообщение от Pepeka

как формировать "налету" суммарную стоимость на основе выбора юзера?

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

HTML5

<!doctype html>
<html>
<body>
    <input type="text">
    oninput: <span id="result"></span>
    <script>
        var input = document.body.children[0];
 
        input.oninput = function () {
            /*Here must be the agregation function!*/
        }
</script>
</body>
</html>

@Pepeka · 24.07.2014, 10:10 **[ТС]**

Вобщем, всё бьюсь еще с задачей... Сделал radio кнопки для выбора вариаций...

Итого, есть 2 группы радиокнопок, по 3 позиции в каждой:
Размер1, Размер2, Размер2
и
Вид1, Вид2, Вид3

Для каждой вариации на текущей странице известны (выделены) PHP переменные, в которых хранятся значения (цена):
$razm1, $razm2, $razm3
и
$view1, $view2, $view3
Значения переменных заданы заранее, ну это просто цены, которые забивает администратор сайта (ну или контент-менеджер) в админке. При загрузке страницы переменные инициируются, из БД присваиваются им значения (движок WP, данные лежат в "произвольных полях", для тех кто в теме WP, но это не суть - суть в том, что страница загрузилась, тут же для текущего товара подгрузились в соответствующие переменные PHP цены для каждой позиции-вариации).

Вопрос: как "на лету", через JQUERY, при выборе радиокнопок одного из размеров и одного из видов - тут же взять соответствующие им значения из переменных PHP, суммировать и вывести на экран?

Т.е., например, пользователь страницы ткнул на "Размер2" и "Вид3" - тут же берем из PHP значения переменных $razm2 и $view3, суммируем и выводим на экран в нужном месте - (<div id="summary">Сумма: *Тут искомая сумма*</div>)

Ребята, помогите!!! ) Плаваю в JQ сильно, чтение учебников - занятие полезное, но охватить быстро не могу объем информации. С меня 100 грамм и булочка )

Donald28 · 24.07.2014, 10:59

Ну тут проблема в том, что надо понимать разницу между серверным (PHP) и клиентским (JS/jQuery) языками программирования.

В PHP все алгоритмы и вычисления проводятся на стороне сервера. Т.е. при загрузки страницы сервер читает твои коды на PHP и в ИТОГЕ получается обычная HTML страничка. Эту страничку и получает пользователь в своем браузере. Таким образом, когда страница загружена о переменных, массивах, функциях и т.д., которые объявлены в PHP, можно забыть.

Теперь как страничка загрузилась в дело вступают клиентские языки ( обычно это JS и прочие его библиотеки типа jQuery). Вот тут уже и решается ваша задача суммирования.

Для начала нам нужно передать значения PHP переменных на HTML страничку. Сделаем это примерно следующим образом:

PHP

1
2
3

<input class="calc" type="radio" name="razm" value="<? echo $razm1; ?>" />Размер 1<br/>
<input class="calc" type="radio" name="razm" value="<? echo $razm2; ?>" />Размер 2<br/>
<input class="calc" type="radio" name="razm" value="<? echo $razm3; ?>" />Размер 3<br/>

То есть в input в атрибуте value будет значение цены для каждого из размера.

Аналогично пишем и для вида

PHP

1
2
3

<input class="calc" type="radio" name="view" value="<? echo $view1; ?>" />Вид 1<br/>
<input class="calc" type="radio" name="view" value="<? echo $view2; ?>" />Вид 2<br/>
<input class="calc" type="radio" name="view" value="<? echo $view3; ?>" />Вид 3<br/>

Следует обратить внимание, что каждому input мы прописали класс calc.

А теперь пишем jQuery:

Javascript

$(document).ready(function(){ // следующий код будет актуален только после загрузки всей страницы
   $('.calc').change(function(){ // описываем функцию, которая будет вызываться при изменении выбора одного из input с классом calc
       razm=$('[name=razm]:checked').val(); // получаем цену за выбранный размер
       view=$('[name=view]:checked').val(); // получаем цену за выбранный вид
 
       if (razm && view){ // убеждаемся что полученные значения НЕ нулевые (т.е. радио кнопки выбраны)
          sum=razm+view;
          $('#summary').html('Сумма: '+sum); // записываем результат вычисления в блок с id=summary
       } else {
          $('#summary').html('Выберите размер и вид'); 
       }
   });
 
});

Ну вот в принципе и все))

@Pepeka · 25.07.2014, 14:47 **[ТС]**

Вроде всё работает, но не совсем...

Почему-то value принимает значение "0". Пытаюсь выше ставить echo $переменная для дебага - выводится число. Что не так? )

Добавлено через 16 минут
Вобщем, в скрипте надо поправить - сложение двух переменных ведёт к склейке, т.е. к сложению 2 строк. Я применил parseInt() в коде JQ, чтобы привести переменные к числовому значению. А так - да, весь код рабочий, спасибо! )

Добавлено через 16 часов 17 минут
Кому интересно - на базе этого кода делается калькулятор цен на двери, вот страница-образец:

дверка

Вариант не окончательный, еще нужна подгрузка "на лету" вариантов расцветки двери - будут выведены образцы расцветки в прямоугольниках, при нажатии на определенный - через JQ подгружается новая картинка двери, с выбранной расцветкой (фактурой)... В принципе - классика жанра, но когда такое впервые делаешь - тяжело )) Тяжело, но интересно )

Так что возникнут у кого в будущем вопросы по таким интеркативным объектам - обращайтесь, уже слона на этом съел, или как там в пословице.... Вернее, слона доедаю - сайт еще в доработке. ))

@Pepeka 171 / 170 / 36 Регистрация: 15.01.2014 Сообщений: 1,008 Записей в блоге: 1
		1
	Суммирование, INPUT 14.07.2014, 20:17. Показов 2530. Ответов 6 Метки нет (Все метки) Хай! Делаю форму выбора вариантов (желтый-красный, квадратный-круглый, вкусный-с алкоголем) - пните как-нить в сторону INPUT-ов. Каждая позиция, каждое её значение, имеет свою стоимость. Как организовать инпуты такие, как присвоить значения, и главное - как их суммировать, как формировать "налету" суммарную стоимость на основе выбора юзера? Пните в нужно направлении, только не в сторону учебника по HTML ))) Там основы, а тут - задачка чуть сложнее всё таки. Может пример есть у кого рабочий? 0

@BarbosLV 368 / 406 / 165 Регистрация: 29.05.2014 Сообщений: 1,494
	14.07.2014, 20:24	2
	Тут надо пнуть в сторону учебников по PHP. 0

Donald28 странник 810 / 481 / 108 Регистрация: 28.05.2012 Сообщений: 1,518 Записей в блоге: 2
	15.07.2014, 08:22	3
	Сообщение от Pepeka как формировать "налету" суммарную стоимость на основе выбора юзера? если под "на лету" понимается, что форма не будет отправлять данные на сервер при перезагрузки страницы, то тут надо использовать клиентский язык программирования (JavaScript) 0

@Pepeka 171 / 170 / 36 Регистрация: 15.01.2014 Сообщений: 1,008 Записей в блоге: 1
	24.07.2014, 10:10 [ТС]	5
	Вобщем, всё бьюсь еще с задачей... Сделал radio кнопки для выбора вариаций... Итого, есть 2 группы радиокнопок, по 3 позиции в каждой: Размер1, Размер2, Размер2 и Вид1, Вид2, Вид3 Для каждой вариации на текущей странице известны (выделены) PHP переменные, в которых хранятся значения (цена): $razm1, $razm2, $razm3 и $view1, $view2, $view3 Значения переменных заданы заранее, ну это просто цены, которые забивает администратор сайта (ну или контент-менеджер) в админке. При загрузке страницы переменные инициируются, из БД присваиваются им значения (движок WP, данные лежат в "произвольных полях", для тех кто в теме WP, но это не суть - суть в том, что страница загрузилась, тут же для текущего товара подгрузились в соответствующие переменные PHP цены для каждой позиции-вариации). Вопрос: как "на лету", через JQUERY, при выборе радиокнопок одного из размеров и одного из видов - тут же взять соответствующие им значения из переменных PHP, суммировать и вывести на экран? Т.е., например, пользователь страницы ткнул на "Размер2" и "Вид3" - тут же берем из PHP значения переменных $razm2 и $view3, суммируем и выводим на экран в нужном месте - (<div id="summary">Сумма: Тут искомая сумма</div>) Ребята, помогите!!! ) Плаваю в JQ сильно, чтение учебников - занятие полезное, но охватить быстро не могу объем информации. С меня 100 грамм и булочка ) 0

@Pepeka 171 / 170 / 36 Регистрация: 15.01.2014 Сообщений: 1,008 Записей в блоге: 1
	25.07.2014, 14:47 [ТС]	7
	Вроде всё работает, но не совсем... Почему-то value принимает значение "0". Пытаюсь выше ставить echo $переменная для дебага - выводится число. Что не так? ) Добавлено через 16 минут Вобщем, в скрипте надо поправить - сложение двух переменных ведёт к склейке, т.е. к сложению 2 строк. Я применил parseInt() в коде JQ, чтобы привести переменные к числовому значению. А так - да, весь код рабочий, спасибо! ) Добавлено через 16 часов 17 минут Кому интересно - на базе этого кода делается калькулятор цен на двери, вот страница-образец: дверка Вариант не окончательный, еще нужна подгрузка "на лету" вариантов расцветки двери - будут выведены образцы расцветки в прямоугольниках, при нажатии на определенный - через JQ подгружается новая картинка двери, с выбранной расцветкой (фактурой)... В принципе - классика жанра, но когда такое впервые делаешь - тяжело )) Тяжело, но интересно ) Так что возникнут у кого в будущем вопросы по таким интеркативным объектам - обращайтесь, уже слона на этом съел, или как там в пословице.... Вернее, слона доедаю - сайт еще в доработке. )) 1

Суммирование, INPUT

Решение