Как на JavaScript умножить числовые значения, введённые в текстовые поля формы? 

Добрый день. Нужна помощь: есть три текстовых поля, значения в которых должны автоматически перемножаться и результат должен сразу отображаться в четвёртом текстовом поле (без кнопки «Подсчитать») и быть отправляемым вместе с формой. Я просмотрела множество примеров — везде используется кнопка, а требуется, чтобы результат появлялся автоматически после заполнения всех трёх полей. Нашла такой пример: <br/> <pre><code class="javascript">$.fn.multiplicator = function(...selectors) {
  • 31 мая 2026 г. 9:00
Ответы на вопрос 1 
Ниже — простое и надёжное решение на чистом JavaScript. Идея: вешаем обработчик на событие input трёх полей, парсим числа (заменяем запятую на точку, чтобы работало при вводе 1,23), считаем произведение и записываем в четвёртое поле. Важно: поле с результатом должно быть readonly (или hidden), но не disabled — readonly поле включается в отправку формы.

Пример HTML + JS:

HTML:
<input type="text" id="a" name="a" placeholder="Число 1">
<input type="text" id="b" name="b" placeholder="Число 2">
<input type="text" id="c" name="c" placeholder="Число 3">
<input type="text" id="product" name="product" readonly placeholder="Результат">

JS:
(function(){
  function parseNum(str) {
    if (str.trim() === '') return null;               // ещё не заполнено
    str = str.replace(',', '.');                      // поддержка запятой
    var n = parseFloat(str);
    return isFinite(n) ? n : NaN;
  }

  function updateProduct() {
    var a = parseNum(document.getElementById('a').value);
    var b = parseNum(document.getElementById('b').value);
    var c = parseNum(document.getElementById('c').value);

    var out = document.getElementById('product');

    // если любое поле пустое — не показываем результат
    if (a === null || b === null || c === null) {
      out.value = '';
      return;
    }

    // если хотя бы одно не число — показываем сообщение или очищаем
    if (isNaN(a) || isNaN(b) || isNaN(c)) {
      out.value = 'Ошибка';
      return;
    }

    var prod = a * b * c;
    // по необходимости форматируем (пример — 2 знака после запятой):
    // out.value = prod.toFixed(2);
    out.value = String(prod);
  }

  ['a','b','c'].forEach(function(id){
    document.getElementById(id).addEventListener('input', updateProduct);
  });
})();

Пояснения и советы:
- readonly-поле (в примере product) отправляется вместе с формой. disabled-поле в отправку не входит.
- Если хотите скрыть поле результата, используйте <input type="hidden" name="product" id="product"> — его тоже можно обновлять скриптом.
- Для локализации: при выводе можно заменить точку на запятую, если нужно показывать пользователю запятую.
- Если нужно вычислять сразу после заполнения любого поля — используйте событие input (как в примере). Если хотите — можно использовать change, но input даёт мгновенный отклик при наборе.
- Если предпочитаете jQuery, добавьте аналогичный обработчик $('#a,#b,#c').on('input', function(){ ... }); и устанавливайте $('#product').val(prod).

Если покажете ваш текущий HTML (имена/идентификаторы полей), могу подправить код под вашу форму.
Похожие вопросы
    Показать ещё