|
|
Интересные статьи
|
|
|
|
|
Использование 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>
Источник: http://itfn.ru
|
|
|
|