JQuery: изменение значения при изменении значения другого поля ввода

Я хочу изменить значение поля ввода всякий раз, когда изменяется значение другого.

Я пробовал какое-то время, и я не могу заставить его работать

<input class="span4 input-big" id="dare_price" name="price" size="30" type="text" onChange="updatePrice()" />
<input class="span4 input-big" id="total_price_amount" readonly="readonly" value=""/>​


function updatePrice() {
    var price = $("#dare_price").val();
    var total = (price + 1) * 1.05;
    $("$total_price_amount").val(total);
}​

Здесь скрипка.

Ответы

Ответ 1

$("#dare_price").change(function(){
   var total = Number($this).val()) + ...;
   $('#total_price').val(total);
});

Если вы программно изменяете значения, вам необходимо конвейерно их использовать через ваш метод -

function changePrice(value){
   $('#dare_price').val(value);
   $('#dare_price').trigger('change');
}

Обновлен DEMO для этого управляемого событиями подхода.

Ответ 2

Несколько вещей.

  1. Во-первых, я бы использовал самую новую версию jQuery, если бы я был вами. Сейчас мы на 1.8.

  2. Я также использовал бы "keyup" в качестве триггера события, а также "change". по моему мнению, он более удобен. Мне также нравится связывать события с помощью jQuery. См. Http://api.jquery.com/on/

  3. в вашем коде были некоторые ошибки. Обратите внимание, что часть $("$total_price_amount") ошибку

  4. Если вы хотите показывать только определенное число десятичной точки, используйте .toFixed(). Но учтите, что это вернет строку.

  5. входные значения из текстовых полей - это string типа, поэтому для выполнения математических расчетов с ними вам необходимо проанализировать их с помощью int или float

Здесь мой обновленный JSFiddle

http://jsfiddle.net/DigitalBiscuits/QWSQp/71/

И фактический код, который я использовал

$(document).ready(function()
{
    function updatePrice()
    {
        var price = parseFloat($("#dare_price").val());
        var total = (price + 1) * 1.05;
        var total = total.toFixed(2);
        $("#total_price_amount").val(total);
    }
    $(document).on("change, keyup", "#dare_price", updatePrice);
});

обратите внимание, что я удалил часть onChange="updatePrice()" из HTML, поскольку она больше не нужна.

Надеюсь, это поможет вам.

Ответ 3

Чтобы быть в безопасности, вы должны parseFloat() вашу цену. Кроме того, прежде чем делать это, вы должны убедиться, что это даже номер! В противном случае вы получите NaN

function updatePrice() {
    var price = $("#dare_price").val();
    var total = (parseFloat(price) + 1) * 1.05;
    console.log(total);

    // Other big problem was the $total_price_amount typo that should of had # instead
    $("#total_price_amount").val(total);
}​

jsFiddle Demo

Ответ 4

Просто выглядит как опечатка

$("$total_price_amount").val(total);

Должно быть

$("#total_price_amount").val(total);

Используйте '#', чтобы получить идентификатор

Ответ 5

Вот пример с событием изменения. Вы можете использовать такие события, как keydown или -up, что подходит для ваших целей. (Живой метод используется для элементов, созданных во время выполнения.)

  $('#first').live("change", (function(){       
            $('#idofinputfield').val('mynewvalue');         
    }))