使用jQuery计算javascript中两个输入字段的乘积

我有一个输入字段，我想填充表单中较早出现的两个输入字段的乘积。使用jQuery计算javascript中两个输入字段的乘积

<div class="form-group"> 
    <label for="item_name" class="col-lg-2 control-label">Item:</label> 
    <div class="col-lg-2"> 
     <input type="text" name="item_name[]" placeholder="Name"> 
    </div> 
    <div class="col-lg-2"> 
     <input type="text" name="item_qty[]" placeholder="Quantity"> 
    </div> 
    <div class="col-lg-2"> 
     <input type="text" name="item_price[]" placeholder="Price"> 
    </div> 
    <div class="col-lg-2"> 
     <input type="text" name="item_total[]" placeholder="Total"> 
    </div> 
</div>

这些输入字段可以出现多次，所以我试图环比item_total[] arrray和附加一个侦听焦点事件。

$.each($("[name='item_total[]']"), function(index, value) { 
    $(this).focus(function() { 
     var value = ? 
     //not sure how to select the value of the two previous input fields 
     // var value = $("item_qty[index]") * $("item_price[index]"); 
     console.log(value); 
    }); 
});

来源

2014-10-16 Luke

，而不是总文本框的重点做了计算上的数量和价格的文本框变化 – 2014-10-16 23:47:40

一旦我得到它的工作在这里，我会重构它应对变化的事件 - 由于 – Luke 2014-10-16 23:50:28

我加了答案，有一看 – 2014-10-17 00:04:33

You can do like this

$('input[name="item_qty[]"],input[name="item_price[]"]').on("change",function(){ 
    var $container = $(this).closest('.form-group'); 
     qty = Number($('input[name="item_qty[]"]',$container).val())||0, 
     price = Number($('input[name="item_price[]"]',$container).val())||0; 

    $('input[name="item_total[]"]',$container).val(qty * price); 

    })

另一种解决方案与选择开始：

$('input[name^="item_qty"],input[name^="item_price"]').on("change",function(){ 
    var $container = $(this).closest('.form-group'); 
     qty = Number($('input[name^="item_qty"]',$container).val())||0, 
     price = Number($('input[name^="item_price"]',$container).val())||0; 

    $('input[name^="item_total"]',$container).val(qty * price); 

    })

来源

2014-10-16 23:56:58

我将如何告诉每个选择器的多次出现之间的差异。我的表单有几行上面的输入字段，所以'$（'input [name =“item_qty []”]'）'不够具体？ – Luke 2014-10-17 00:07:39

我已经将范围添加到div.form-group – 2014-10-17 00:21:51

FYI ...添加了另一个解决方案''开始''选择器，您可以管理没有下标它将工作的名称[]，名称[0]，名称[ 1] ...' – 2014-10-17 00:36:49

-2

你可以做soemthing这样

input1 = $(this).closest($("[name='item_price']")).val()

或者这样

input1 = $("[name='item_price']")[index]).val()

来源

2014-10-16 23:44:05 Ishita

'最接近'不会这样工作，它只看祖先，第二个版本是无效的语法 – charlietfl 2014-10-16 23:45:17

以下假设你在输入名字[]由于重复行，将重复的行实例

可以遍历到最近的包装容器，这将form-group使用closest()是，再看看内内隔离值使用find()

我想你想要什么容器是改变处理器适用于用户输入和计算总当他们改变

$("input[name=item_qty\\[\\]], input[name=item_price\\[\\]]").change(function(){ 
    var $container = $(this).closest('.form-group'); 
    var qty = $container.find('[name=item_qty\\[\\]]') || 0; 
    var price = $container.find('[name=item_price\\[\\]]') || 0; 
    $container.find('[name=item_total\\[\\]]').val(qty * price);         

});

jQuery需要在选择器中转义特殊字符，这就是为什么上面有这么多的\\。

见selectors API Docs

来源

2014-10-16 23:58:57 charlietfl

对于重复输入行是正确的，这几乎就是我想的，但是'item_total []'需要特定于那一行输入。 – Luke 2014-10-17 00:10:09

它是，假设'form-group'是重复的行 – charlietfl 2014-10-17 00:10:58

got ya。感谢清除它 - 因此查找的范围只是该行内的元素，而不是整个页面内的元素？ - 什么'|| 0;'实现？ – Luke 2014-10-17 00:13:29

像下面将工作转义规则。

var quantityEl = $('input[name="item_qty[]"]'), 
    priceEl = $('input[name="item_price[]"]'), 
    totalEl = $('input[name="item_total[]"]') 
; 

var calculateTotal = function() { 
    var quantity = +quantityEl.val().trim(), 
     price = +priceEl.val().trim(), 
     total = quantity * price 
    ; 

    if (!isNaN(total)) { 
     totalEl.val(total); 
    }  
}; 

priceEl.on('change keyup paste', calculateTotal); 
quantityEl.on('change keyup paste', calculateTotal);

来源

2014-10-17 00:01:24

使用jQuery计算javascript中两个输入字段的乘积

回答

相关问题