Реальный пиарСоздание сайтовПрограммирование → Использование JavaScript для расчета данных формы

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

HTML формы

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

«
Сообщение:
Здравствуйте. Помогите, пожалуйста. Я в РНР и 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

Рекомендуем



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


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


Что такое сессии Использование сессий дает дополнительную степень свободы пользователю и предоставляет возможность серверу отследить привычки и поведение каждого отдельного посетителя сайта, для последующего набора статистики интересов клиентов веб-ресурса