Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Расчет стоимости по введенным данным формы на лету (https://javascript.ru/forum/events/12908-raschet-stoimosti-po-vvedennym-dannym-formy-na-letu.html)

Ronicon 08.11.2010 14:11

Расчет стоимости по введенным данным формы на лету
 
Добрый день! Подскажите плз, может ли Javascript посчитать введеные в форму числа и выдать результат на той же странице до submit`а...

например, есть форма, обрабатываемая php-скриптом и отсылающая введенные данные на e-mail.

<form action="/somefile.php" method=post id="myform">
Размеры:
<b>Длина</b><input type="text" name="leng" size="5" value=""> мм<br>
<b>Ширина</b><input type="text" name="widt" size="5" value=""> мм<br>
<b>Высота</b><input type="text" name="heig" size="5" value=""> мм
.....
<input type="submit" value="Отправить" name="submit">
</form>


Идея в том, чтобы после формы выдавалась строка

Приблизительная стоимость: $var,

где $var = длина * ширина * высота * стоимость

и человек мог видеть некоторый результат до отправки данных

Gvozd 08.11.2010 14:14

может

Ronicon 08.11.2010 15:23

Подскажите, в какую сторону думать, привязывать к полям формы обработчик onchange() или пытаться получить значения через getElementById? Как заставить результат изменяться динамически в зависимости от введенных данных?

Пока написал такое, но это работает только при вручную установленных значениях value

dlina = myform.leng.value;
shirina = myform.widt.value;
visota = myform.heig.value;
itog = dlina * shirina * visota;
document.write ("Приблизительная стоимость "+itog+" рублей");

monolithed 08.11.2010 16:05

Как пример:

В первое поле нужно ввести/вставить выражение, второе - результирующее


<form name="forma">
    <input type="text" />
    <input type="text" />
</form>

<script type="text/javascript">
window.onload = function(){
    var event = ['keyup', 'change'];
    for(i=0; i<event.length; i++){
       document.getElementsByName('forma')[0]['on'+event[i]] = function(i){
           return function(){
               this.elements[1].value = (this.elements[0].value == '') ? '' : eval(this.elements[0].value);
           };
      }(i);
    }
};
</script>

vladlen 10.11.2010 19:25

monolithed,
А не проще писать
document.forms['forma']['on'+event[i]] = function(i){...}

А то Илья где-то в дебрях сайта объявил forms рудиментом :)


Часовой пояс GMT +3, время: 21:05.