Javascript通过文本框进行实时计算

Question

我有3个文本框，（ datefrom, dateto, per_day ）

我希望能够输入这些框并进行以下计算，而无需刷新页面或提交表单：

dateto - datefrom = TOTAL

然后

TOTAL * per_day

这有可能使用javascript - 有没有人有任何例子？

我努力了：

<script type="text/javascript">
$("#todate").on('keyup',function(){
        var days_amount = $(this).val() - $("#fromdate").val()
        var total = (days_amount) * $("#cost_per").val()
        $(".total_text").html(total);
})
</script>

From Date: <input type="text" name="fromdate" id="fromdate" value="10" /><br />
    To Date: <input type="text" name="todate" id="todate" value="" /><br />
    Cost Per: <input type="text" name="cost_per" id="cost_per" value="" /><br />
    <p>Total: <span class="total_text"></span></p>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

但我得到输出：

​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Answer 1

您可以。 随着事情变得越来越复杂，它可以帮助使用框架来构建这种自动更新视图的代码，例如我喜欢Knockout但还有很多其他的。

Answer 2

您可以使用jquery从输入字段中获取日期

$("#elementId").val()

将所有转换为日期类型

var date1 = new Date("#date1");
var date2 = new Date("#date2");
var timeDiff = Math.abs(date2.getTime() - date1.getTime());
var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24)); 

并使用jquery将结果放入一个新字段

$("#result").text("value")
$("#result").html("value")
$("#result").val("value")

这取决于现场。