Выполните сложение с полями формы. не покидая страницу

Question

Я хочу выполнить некоторые математические операции с некоторыми полями формы (в основном вычислить что-то;))

У меня есть три поля, и я хочу сложить их вместе, умножив их на фиксированное число.

В настоящее время я делаю это с PHP, и он отлично работает, но я изменил дизайн веб-сайта, чтобы он был полностью HTML5 и CSS3, и думаю, что было бы здорово, если бы пользователь мог ввести детали в форму, а затем увидетьрезультат мгновенно.

Какой лучший способ сделать это?

У вас есть пример кода или учебные пособия?

Answer 1

Это определенно что-то для javascript;) Из-за простоты использования, я опишу это с помощью jQuery.

$(document).ready(function() {
   $("#calculate").click(function(e) {
      var value1 = $("#value1").val();
      var value2 = $("#value2").val();
      var value3 = $("#value3").val();

      var result = (value1 + value2 + value3) * 5;
      $("#result").val(result);
      e.preventDefault();
   };
}

Предполагается, что у вас есть 4 поля ввода. Первые три имеют идентификаторы value1, value2 и value3, а последние имеют идентификатор result, где будет записан результат. Кроме того, вы включаете кнопку с идентификатором calculate, которая при нажатии запускает вычисление.

Answer 2

var elems = document.getElementsByClassName ('toAdd');

var myLength = elems.length, итого = 0;

для (var i = 0; i

document.getElementById ('total'). Value = total;

Answer 3

С jQuery вы можете сделать следующее:

<script type="text/javascript">
$(document).ready(function ()
{
    $("input").keyup(function ()
    {
        field_one = $("input[name='some_field']").val();
        field_two = $("input[name='some_field_2']").val();
        field_three = $("input[name='some_field_3']").val();

        result = field_one+field_two+field_three;

        /* any other calculations */

        $("input[name='result_input']").val(result);
    });
});
</script>

Вам не нужен jQuery, но он довольно полезен для упрощения такого рода вещей.Замените $ ("input") на селектор, который специфичен для входов, которые вы используете для вычисления результата.

Answer 4

Или JavaScript или Ajax могут решить вашу проблему.Они могут выполнять вашу работу динамически.