根据另一个输入框和乘以的货币更改输入值

时间:2015-01-08 20:48:16

标签: javascript jquery html

我正在尝试将输入框的值设置为另一个输入框的值。 value乘以商品的价格。我将货币包含在带有类的span标签中。我需要将该值乘以.productTextInput输入文本框。该值将显示在.subTotal框中。我该如何做到这一点?

jQuery的:

$(".productTextInput").each(function() {
    $(this).change(function() {
        var priceAmount = $(this).parents().find(".priceAmount").text();

        $(this).parents().find(".subTotal").val(parseInt($(this).val(), 10) * parseInt(priceAmount, 10));
    });
});

HTML:

<table class="productTable productSmall" cellspacing="0">
    <tbody>
        <tr>
            <td style="width: 27%;">
               <strong>American (wild) plum</strong>
            </td>
            <td class="custom-tag"></td>
            <td class="custom-tag">
                Prunus americana
            </td>
            <td class="custom-tag">
                Bare Root
            </td>
            <td class="custom-tag" style="border-right: 2px solid #000;">
                2' - 3' size
            </td>
            <td style="text-align:right;padding-right: 10px;">
                $<span class="priceAmount">1.75</span>
            </td>
            <td class="quantity">
                <input id="Units_4996263" class="productTextInput" name="AddToCart_Amount" value="1" type="text">
            </td>
            <td>
                <input class="subTotal" name="subTotal" readonly="readonly" type="text">
            </td>
       </tr>
   </tbody>
</table>

3 个答案:

答案 0 :(得分:2)

parseFloat上使用priceAmountparseInt返回一个整数(删除小数)。 parseFloat保留小数。

由于parseInt,您当前的代码priceAmount始终为1

更改为:

$(this).parents().find(".subTotal").val(parseInt($(this).val(), 10) * parseFloat(priceAmount));

答案 1 :(得分:1)

如果你想要一个带小数的数字,你应该使用parseFloat而不是parseInt

此外,您应该删除您正在呼叫的each功能:

$(".productTextInput").each(function() {
   $(this).change(function() {

只需使用click函数,$(this)将引用点击的元素。您可以将代码简化为以下内容:

$(".productTextInput").change(function() {

     var priceAmount = parseFloat($(this).closest("tr").find(".priceAmount").text());

     $(this).closest("tr").find(".subTotal").val(parseInt($(this).val()) * priceAmount)  

});

FIDDLE

答案 2 :(得分:1)

您不需要对此使用.each,因为$('.productTextInput')会查找提供的类的每个元素。

我在代码片段中省略了parseInt / parseFloat,但JSFiddle有它。 http://jsfiddle.net/6qf7oc55/3/

$('.productTextInput').blur(function() {
    num = this.value;
    price = $(this).closest('tr').find('.priceAmount').text();
    sub = num * price;
    $('.subTotal').val(sub.toFixed(2));
});