16

每当更改另一个输入字段的值时，我想更改输入字段的值。

我已经尝试了一段时间，但我似乎无法让它工作

<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);
}​

这是小提琴。

4

5 回答 5

13

有几件事。

  1. 首先，如果我是你，我会使用最新版本的 jQuery。我们现在是1.8。

  2. 我还将使用“keyup”作为事件触发器以及“更改”。在我看来，它更有用。我也喜欢使用 jQuery 来绑定事件。见http://api.jquery.com/on/

  3. 您的代码中有一些错误。请注意该$("$total_price_amount") 部分引发了错误

  4. 如果您只想显示一组小数点，请使用.toFixed(). 但请注意，这将返回一个字符串。

  5. 来自文本框的输入值是 type string，因此要对它们进行数学计算，您需要将它们解析为 anint或 afloat

这是我更新的 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 中删除了该部分，因为它不再需要。

希望这对您有所帮助。

于 2012-09-05T19:35:01.993 回答
6 
$("#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 。

于 2012-09-05T19:00:36.517 回答
2

只是看起来像一个错字

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

应该

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

使用 '#' 获取 id

于 2012-09-05T19:00:55.347 回答
2

只是为了安全起见，你应该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 演示

于 2012-09-05T19:01:21.477 回答
0

这是一个带有更改事件的示例。您可以使用 keydown 或 -up 之类的事件，只要适合您的目的。（live-method 用于在运行时创建的元素。）

  $('#first').live("change", (function(){       
            $('#idofinputfield').val('mynewvalue');         
    }))
于 2012-09-05T19:02:01.120 回答