Автоматический расчет jQuery на основе поля

Question

У меня есть этот бит кода:

<label>Number of Shares:</label><input name="shares" id="shares" type="text" />

Total Value: &euro; 0.00

Все, что мне нужно сделать, это автоматически рассчитать, пока вы набираете общее значение. Например, если кто-то вводит 100 в поле, мне нужно умножить его на 1,50, поэтому 0,00 под полем будет заменено на 150,00.

Может кто-нибудь сказать мне, как я могу сделать это с помощью jQuery?

Answer 1

Это простой код. Я не добавил никакой функции проверки или форматирования

HTML

<label>Number of Shares:</label><input name="shares" id="shares" type="text" />
<br />
Total Value: &euro; <span id="result"></span>

Javascript

$(document).ready(function(){
    $('#shares').keyup(function(){
        $('#result').text($('#shares').val() * 1.5);
    });   
});

Демо-версия: http://jsfiddle.net/7BDwP/

Answer 2

вот очень хороший плагин для расчета jquery (он мне помог) - http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm
это будет полезная ссылка для вас

Answer 3

$("#shares").keyup(function() {
   var val = parseFloat($(this).val());
   // If val is a good float, multiply by 1.5, else show an error
   val = (val ? val * 1.5 : "Invalid number");
   $("#result").text(val);
})

И заключить результат в элемент

Total Value: &euro; <span id="result">0.00</span>

Использование события keyup приведет к обновлению текста в реальном времени.

Демо здесь .

Answer 4

Очень простой подход - использовать keyup.

HTML

<form id="order_form">
<input type="number" id="qty"/>
<input type="text" id="result"/>
</form>

JS

$(document).ready (function(){   
$('#qty').on('keyup change',function(){
    $('#result').val($(this).val() * 1.50);
    });

});

Это изменит выход в режиме реального времени.

Answer 5

// this approach should work...not sure

$("#shares").onchange= update( $(this).val() );

function update(inputVal)
{
 if( parseFloat( inputVal ) == true)
  $("resultDiv").html( inputVal * 1.5 );
}