JS/input/динамика

Question

<input type="text" id="name" name="name" placeholder="имя" />
<input type="text" id="add_price" name="add_price" placeholder="цена"  />
<input type="text" id="width" name="width" placeholder="ширина"  />
<input type="text" id="height" name="height" placeholder="высота"  />
<input type="readonly" id="m2" name="m2" placeholder="m2" />
<input type="readonly" id="price" name="price" placeholder="цена заказа" />

Всем привет. Помогите решить задачу. nama-имя пользователя, при вводе и совпадении в базе выводим цену в input: add_price - эта ячейка динамическая без возможности редактировать. Это сделал, работает.

Теперь мне нужно получить цену исходя из введенных данных. Вот таким скриптом я получил м2

 <script type="text/javascript">
$(document).keyup(function(event) { 

    var a=document.forma1.width.value;

    var b=document.forma1.height.value;

    var s=a*b;


document.forma1.m2.value=s.toFixed(2);
});
</script>

Но теперь мне нужно получить общий результат - м2*add_price - и вывести в инпут price. Пробовал в формулу добавить новые переменные что бы сразу получить два результата, но не удалось.

Answer 1

HTML элементы редко ищут через id.

// Ищем инпуты по id
const width  = document.querySelector('#width'    );
const height = document.querySelector('#height'   );
const m2     = document.querySelector('#m2'       );
const price  = document.querySelector('#price'    );
const add    = document.querySelector('#add_price');

// Обновляем значения
$(document).keyup(function(event) { 
  m2.value = width.value * height.value;
  price.value = m2.value * add.value;
});

Однако, в этом случае у вас есть JQuery - querySelector использовать не обязательно.
Можно использовать встроенные ф-кции JQuery:

$(document).keyup(function(event) { 
  let m2 = $('#width').val() * $('#height').val();
  $('#m2').val(m2);
  $('#price').val(m2 * $('#add_value').val());
});

БЛОГ НА HUSL

JS/input/динамика

Ответы (1 шт):