在两个输入之间计算并导致另一个输入

时间:2017-12-26 13:43:03

标签: javascript jquery

以下脚本仅适用于您输入数量时的第一个块。

该功能是否以任何方式执行计算,具体取决于输入数量的块。

 $(document).ready(function() {
 $('.somente-numero').keyup(function (e) {
	$(this).val($(this).val().replace(/[^0-9\.]/g,''));
	var v1 = Number(document.getElementById("v1").value);
    var v2 = Number(document.getElementById("v2").value);
    var v7 = document.getElementById("v7").value = parseFloat(v1 * v2).toFixed(2);
 });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- bloco 1 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly />

<br>

<!-- bloco 2 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />

 <!-- bloco 3 -->

 .................

 <!-- bloco n -->

3 个答案:

答案 0 :(得分:3)

请使用此脚本更新您的代码。

 $(document).ready(function () {
       $('.somente-numero').keyup(function (e) {
                var currentVal = $(this).val();
                var replaceD = currentVal.replace(/[^0-9\.]/g, '');
                $(this).val(replaceD);
                var v1 = Number($(this).prev().prev().val());
                var v2 = Number($(this).val());
                var calculatedval = parseFloat(v1 * v2).toFixed(2);
                $(this).next().next().val(calculatedval);
            });
      });

答案 1 :(得分:1)

您可以将公共区块保留在公共类(例如.bloco)下。然后找到最近的.bloco并找到.input1.input2.input3

&#13;
&#13;
$(document).ready(function() {
 $('.somente-numero').keyup(function (e) {
   $(this).val($(this).val().replace(/[^0-9\.]/g,''));
   $elBloco = $(this).closest('.bloco');
   var v1 = Number($elBloco.find('.input1').val());
   var v2 = Number($elBloco.find('.input2').val());
   var v7 = $elBloco.find('.input3').val(parseFloat(v1 * v2).toFixed(2));
 });
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- bloco 1 -->
<div class="bloco">
    <label>preço</label> <input type="text" class="somente-numero input1" name="produto_solicitado[0][valor_org]" size="10" value="100.00"/> 
    <label>quantidade</label> <input type="text" class="somente-numero input2" name="produto_solicitado[0][quantidade]" size="10"/> 
    <label>total</label> <input type="text" class="input3" name="produto_solicitado[0][valor_total_prod]" size="10" readonly />
</div>

<br>

<!-- bloco 2 -->
<div class="bloco">
    <label>preço</label> <input type="text" class="somente-numero input1" name="produto_solicitado[1][valor_org]" size="10" value="200.00"/> 
    <label>quantidade</label> <input type="text" class="somente-numero input2" name="produto_solicitado[1][quantidade]" size="10"/> 
    <label>total</label> <input type="text" class="input3" name="produto_solicitado[1][valor_total_prod]" size="10" readonly />
</div>
 <!-- bloco 3 -->

 .................

 <!-- bloco n -->
&#13;
&#13;
&#13;

答案 2 :(得分:1)

试试这个,只更新javascript:

 $(document).ready(function() {
 $('.somente-numero').keyup(function (e) {
	$(this).val($(this).val().replace(/[^0-9\.]/g,''));
	var _id = $(this).attr('id');
    var result = 1.0;
    $('input[id^='+_id.charAt(0)+']').each(function(i, el){
     if ($(el).val().length != 0){
        result *= Number($(el).val());
     }
 });
 result = parseFloat(result).toFixed(2);
 $('#'+_id.charAt(0)+'7').val(result);
 });
 });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- bloco 1 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[0][valor_org]" id="v1" size="10" value="100.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[0][quantidade]" id="v2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[0][valor_total_prod]" id="v7" size="10" readonly />

<br>

<!-- bloco 2 -->
<label>preço</label> <input type="text" class="somente-numero" name="produto_solicitado[1][valor_org]" id="x1" size="10" value="200.00"/> 
<label>quantidade</label> <input type="text" class="somente-numero" name="produto_solicitado[1][quantidade]" id="x2" size="10"/> 
<label>total</label> <input type="text" name="produto_solicitado[1][valor_total_prod]" id="x7" size="10" readonly />

 <!-- bloco 3 -->

 .................

 <!-- bloco n -->