javascript - 尝试根据用户输入获取总量

Question

我有一个页面，用户可以在其中提交表单，工作正常，但我想要一个数量字段，用户可以在其中输入数字，并且在总计框中，它将在他们更新数量时显示总数。我想实现这一点而不必重新加载页面。我认为 javascript 是执行此操作的最佳选择，但我不确定如何去做，因为我对 javascript 的经验为 0。非常感谢任何帮助!!!

到目前为止我的代码:

    <form>
        <table align="center">
            <tr>
                <td colspan="3" align="center"><img src="<?php echo getProductImage($product_id); ?>" title="<?php echo getProductName($product_id); ?>" /></td>
            </tr>
            <tr>
                <td colspan="3"><br/></td>
            </tr>
            <tr>
                <td align="center">Quantity:</td>
                <td colspan="2"></td>
            </tr>
            <tr>
                <td><input type="number" min="64" max="9999" name="quantity" /></td>
                <td>&nbsp;&nbsp;@&nbsp;&nbsp;$<?php echo number_format((getProductPrice($product_id)/2),4); ?>/per item&nbsp;&nbsp;=&nbsp;&nbsp;</td>
                <td>Total Goes Here</td>
            </tr>
        </table>
    </form>

Answer 1

参见 this JSFiddle(注意添加的 data-product-price 属性)

HTML

<table align="center">
    <tr>
        <td align="center">Quantity:</td>
        <td colspan="2"></td>
    </tr>
    <tr>
        <td><input type="number" min="64" max="9999" name="quantity" /></td>
        <td>&nbsp;&nbsp;@&nbsp;&nbsp;$345.50/per item&nbsp;&nbsp;=&nbsp;&nbsp;</td>
        <td data-product-price="345.50"></td>
    </tr>
</table>

JavaScript

$(function(){
    $("input[name='quantity']").on("input", function(){
        var $outputCell = $(this).parent().siblings("[data-product-price]").eq(0); 
        $outputCell.html((+$outputCell.data("product-price") * +$(this).val()).toFixed(2));
    });
});