Обработка скрипта калькулятора

Статус
В этой теме нельзя размещать новые ответы.

Windwonder

Создатель
Регистрация
6 Авг 2016
Сообщения
17
Реакции
3
Всем привет.
Помогите разобраться с задачей!
Собираю форму калькулятора на RSForm (Joomla 3).
Все тривиальные ф-и вычислений данный конструктор выполняет на ура.
Остановился на моменте вычисления степени от значения переменной. Стандартные средства конструктора это сделать не позволяют (по крайней мере на том уровне, что и сумма/разность/деление/умножение). Пришлось пилить отдельный скрипт.
И так. Есть форма:

HTML:
<form id="first">
  <input  id="item" value="" type="checkbox" >
  <input  id="calend" value="" type="input" >
  <input  id="per" value="" type="text" >
  <input  id="date" value="" type="text" >
  <input  id="res" value="" type="text" >
</form>

Input "per" вычисляется встроенным скриптом калькулятора RSForm по формуле, исходя из выбора чекбокса "item" пользователем. Input "date" так же обрабатывается календарным скриптом RSForm исходя из выбора начальной и конечной даты календаря. Поля обрабатываются аяксом и их значения отображаются моментально.
Необходимо возвести значение инпута "per" в степень значения "date".

Вставляю скрипт js:

Код:
<script type="text/javascript">
var a = document.getElementById("userForm").per.value;
var b = document.getElementById("userForm").date.value;
var result = Math.pow(a,b);
document.getElementById("userForm").res.value = result;
</script>

Скрипт работает, но проблема в том, что он срабатывает только при загрузке страницы (единоразово) и принимает значение исходя из дефолтных value полей "per" и "date" (1/пустое соответственно).
Как правильно создать событие, чтоб переменная 'result' вычислялась каждый раз, как пользователь внёс изменения в зависимые поля? Пробовал добавить событие oninput, но заставить работать не получилось( Помогите сделать это правильно
 

Windwonder

Создатель
Регистрация
6 Авг 2016
Сообщения
17
Реакции
3
Смотрите в сторону Для просмотра ссылки Войди или Зарегистрируйся
Смотрел, на JSFiddle получилось отладить (правда на своей страничке так и не удалось одолеть ошибки). Но, onchange меняет значение при конечном результате изменений зависимых полей. А я хочу реализовать моментальное изменение.
Заношу код JS в
Код:
$( "input" ).change(function(){}
но после этого значение "res" вообще не отображается при том, что ошибок в firebug-е нет
 

Absolute

Крокодил ;)
Регистрация
9 Авг 2009
Сообщения
581
Реакции
455
Так попробуйте
HTML:
document.addEventListener('DOMContentLoaded', function(){
  var a = document.getElementById('date'),
      b = document.getElementById('per');
  a.addEventListener('input', getPow);
  b.addEventListener('input', getPow);     
  function getPow(){
    document.getElementById('res').value = Math.pow(a.value, b.value);
  }
});
 

borodatych

Постоялец
Регистрация
24 Июн 2016
Сообщения
159
Реакции
104
А я хочу реализовать моментальное изменение
Тогда так:
HTML:
<form id="userForm">
  <input id="item" value="" type="checkbox" >
  <input id="calend" value="" type="input" >
  <input id="per" value="" type="text" >
  <input id="date" value="" type="text" >
  <input id="res" value="" type="text" >
</form>
<script type="text/javascript">
function getResult(){
    var a = document.getElementById("userForm").per.value;
    var b = document.getElementById("userForm").date.value;
    document.getElementById("userForm").res.value = Math.pow(a,b);
};
$( "input" ).on('change keydown keypress keyup',function(){
    getResult();
});
getResult();
</script>
 

Windwonder

Создатель
Регистрация
6 Авг 2016
Сообщения
17
Реакции
3
Благодарю, оба варианта - рабочие... В ходе интеграции на страницу оказалось, что библиотеку jquery нужно было подключать в body. В head - не воспринимает почему-то.
...рабочие, но только в том случае, если зависимые поля пользователь заполняет сам. Но, как я писал в первом посте, необходимые для результата значения рассчитывает скрипт компонента и моментально заносит в поля.
Пользователь заполняет только первичные поля. А уже после их заполнения скрипт автоматом считает значения промежуточных (в данном коде per и date).
Как быть в этом случае?
 

Absolute

Крокодил ;)
Регистрация
9 Авг 2009
Сообщения
581
Реакции
455
Пользователь заполняет только первичные поля. А уже после их заполнения скрипт автоматом считает значения промежуточных (в данном коде per и date).
Как быть в этом случае?
Приведите код плагина или код вашей функции ajax хотя бы.
 
Статус
В этой теме нельзя размещать новые ответы.
Сверху