создание и разработка веб-сайтов
поисковая оптимизация и реклама
статьи о программировании и веб-дизайне

Ссылки по теме:
 

Использование JavaScript для расчета данных формы

Обратился ко мне по е-майлу человек с просьбой помочь разобраться с формой. Цитирую дословно его письмо:

«
Сообщение:
Здравствуйте. Помогите, пожалуйста. Я в РНР и HTML не то, что чайник, а ручка от него. Ситуация сложилась так, что мне приходится (не от хорошей жизни, а заработка для) создать свой сайт.
Программ хороших много, и сделать это не так трудно. НО! Есть необходимость вставить форму. Есть несколько списков и поле для ввода значения и пара флажков. нужно чтобы значения выбранных элементов списка складывались умножались на значение, если флажок есть и складывались со значением поля умноженного на число и результат выводился либо в поле формы либо где-то под ней. ну например:
первый список (название э\\лемента - значение): а - 1500, б - 3000, в - 5000.
Второй список: аа - 1200, бб - 1500, вв - 1200.
Чило в поле 10, пусть флажок 1 - да (число 1,2), флажок 2 - нет (1), флажок 3 - нет (1), в первом списке выбрано \"б\", во втором \"вв\". 200 - заданное постоянное число.
Должно считаться (3000 + 1200 + 10 * 200) *1,2 * 1 * 1.
Две последние единицы это (см. выше) не выбранные флажки.
И должен выводится результат (в поле формы или прямо на странице). В нашем примере это 7440. Страничка создана в формате РНР. Помогите, пожалуйста!
»

Помогаю! Приведенный ниже пример, выполняет в точности, то что нужно. Единственное, я немного для красоты изменил некоторые числа из списков и чекбоксов. Задача на прямую с php не связана, для предварительного рассчета данных формы используется JavaScript.

<html> <head> <script> /*функция, отображающая результат на странице */ function changeResult(result){ document.getElementById('result').innerHTML = result; } /*функция, проводящая непосредственно вычисления */ function calculateForm(){ var flag1=(document.getElementById('flag1').checked?"1.2":"1"); var flag2=(document.getElementById('flag2').checked?"1.4":"1"); var flag3=(document.getElementById('flag3').checked?"1.6":"1"); var result = (document.getElementById('list1').value*1+document.getElementById('list2').value*1+document.getElementById('number').value*200)*flag1*flag2*flag3; changeResult(result); } </script> </head> <body> <!-- форма --> <form name="calculator" method="post" > <div> <!-- Первый список --> <select name="list1" id="list1" > <option value="1500" >a</option> <option value="3000" >b</option> <option value="5000" >c</option> </select> </div> <div> <!-- Второй список --> <select name="list2" id="list2" > <option value="1200" >aa</option> <option value="1500" >bb</option> <option value="1800" >cc</option> </select> </div> <div> <!-- Поле ввода числа --> <input type="text" name="number" id="number" size=20 value="10"> </div> <!-- флажки --> <div> <input type="checkbox" name="flag1" id="flag1">flag1 </div> <div> <input type="checkbox" name="flag2" id="flag2">flag2 </div> <div> <input type="checkbox" name="flag3" id="flag3">flag3 </div> </form> <!--Кнопка рассчитать --> <div onClick="calculateForm();" style="cursor:hand;cursor:pointer;">Рассчитать</div> <!-- Контейнер вывода результата --> <div id="result"></div> </body> </html>



9 июня 2011