Question

我想使用jQuery在表单中输出实时计算，但由于缺乏JS知识，我不知道从哪里开始。我想知道是否有人可以帮助我吗？

以下是我的字段值：

<input type="hidden" name="total_days" value="{total_days}" />
<input type="text" name="cost_per_day" value="" />
<p>Total Cost: $<span class="total_cost"></span></p>

页面加载时，total_days将预先填入一个值。 cost_per_day将由用户输入。我希望在用户输入表单时填充total_cost span，计算如下：

total_days * cost_per_day = total_cost

Answer 1

我在您的隐藏文本字段和用户文本字段中添加了一个ID以检索其值。它看起来像这样。

<input type="hidden" name="total_days" id = "totaldays" value="10" />
<input type="text" name="cost_per_day" id = "mytextfield" value="" />
<p>Total Cost: $<span class="total_cost"></span></p>

javascript如下：

$("#mytextfield").on('keyup',function(){
        var totalcost= $("#totaldays").val() * $(this).val() 
        $(".total_cost").html(totalcost);
})

希望这会有所帮助..

Answer 2

这个解决方案很有效但是我想做一个小改动，我想把答案总是小数点后两位。我尝试将.toFixed（2）添加到各个点，但它似乎没有用。像这样，

<script type="text/javascript">
$(document).ready(function() {
$("#mytextfield").on('keyup',function(){
   // alert('pressed')
   var totalcost= $("#totaldays").val() * $(this).val() 
   $(".total_cost").text(totalcost).toFixed(2);
})
});
</script>

有谁能告诉我如何才能达到两位小数？

由于

根据表单中的字段值输出实时计算

2 个答案: