计算行内总价值

Question

我是新的bootstrap编码。我有一个简单的问题，但我找不到答案。

这就是我需要的：我有单件重量，我需要计算总重量的单位数。

有人可以帮助我吗？

<div class="col-xs-4 control-group form-group"> 
    <div class="controls"> 
     <label>Unit Weight:</label> 
     <input type="text" class="form-control" id="uweight" required data-validation-required-message="Please enter your name."> 
     <p class="help-block"></p> 
    </div> 
</div> 
<div class="col-xs-4 control-group form-group"> 
    <div class="controls"> 
     <label>Units:</label> 
     <input type="text" class="form-control" id="units" required data-validation-required-message="Please enter your name."> 
     <p class="help-block"></p> 
    </div> 
</div> 
<div class="col-xs-4 control-group form-group"> 
    <div class="controls"> 
     <label>Total:</label> 
     <input type="text" class="form-control" id="total" > 
     <p class="help-block"></p> 
    </div> 
</div> 

Answer 1

您可以使用jQuery将您的输入的值与他们的ID一起拉动，然后执行您的计算。您只需为每个输入ID和计算分配一个变量，然后输出到#total。

*我已将您的输入类型从text也更改为number。

$(document).ready(function() { 
 
    $(document).on('change', '.form-control', function() { 
 
    var yourWeight, yourUnits, yourTotal; 
 
    yourWeight = $(' #uweight ').val(); 
 
    yourUnits = $(' #units ').val(); 
 
    yourTotal = (parseFloat(yourWeight)) * (parseFloat(yourUnits)); 
 
    $(' #total ').val(yourTotal.toFixed(2)); 
 
    }); 
 
});

body { 
 
    padding-top: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="container"> 
 
    <form name="calcForm"> 
 
    <div class="row"> 
 
     <div class="col-xs-4 control-group form-group"> 
 
     <div class="controls"> 
 
      <label>Unit Weight:</label> 
 
      <input type="number" class="form-control" id="uweight" required data-validation-required-message="Please enter your name."> 
 
      <p class="help-block"></p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4 control-group form-group"> 
 
     <div class="controls"> 
 
      <label>Units:</label> 
 
      <input type="number" class="form-control" id="units" required data-validation-required-message="Please enter your name."> 
 
      <p class="help-block"></p> 
 
     </div> 
 
     </div> 
 
     <div class="col-xs-4 control-group form-group"> 
 
     <div class="controls"> 
 
      <label>Total:</label> 
 
      <input type="number" class="form-control" id="total" disabled/> 
 
      <p class="help-block"></p> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </form> 
 
</div>

Answer 2

添加calculate类给每个输入后面jQuery keyup function结合，当用户释放钥匙，计算可以在运行时被完成，和将输出到#total

$(document).ready(function() { 
 

 
    //Calculate both inputs value on the fly 
 
    $('.calculate').keyup(function() { 
 
     var Tot = parseFloat($('#units').val()) + parseFloat($('#uweight').val()); 
 
     $('#total').val(Tot); 
 
    }); 
 

 
    //Clear both inputs first time when user focus on each inputs and clear value 00 
 
    $('.calculate').focus(function (event) { 
 
     $(this).val("").unbind(event); 
 
    }); 
 

 
    //Remove this it's just for example purpose 
 
    $('.calculate').keypress(function (e) { 
 
     if (e.which != 8 && e.which != 0 && (e.which < 48 || e.which > 57)) { 
 
      $("#errmsg").html("Digits Only").show().fadeOut("slow"); 
 
      return false; 
 
     } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" /> 
 
<div class="col-xs-4 control-group form-group"> 
 
    <div class="controls"> 
 
     <label>Unit Weight:</label> 
 
     <input type="text" class="form-control calculate" id="uweight" required value="00"> 
 
     <p class="help-block"></p> 
 
    </div> 
 
</div> 
 
<div class="col-xs-4 control-group form-group"> 
 
    <div class="controls"> 
 
     <label>Units:</label> 
 
     <input type="text" class="form-control calculate" id="units" required value="00"> 
 
     <p class="help-block"></p> 
 
    </div> 
 
</div> 
 
<div class="col-xs-4 control-group form-group"> 
 
    <div class="controls"> 
 
     <label>Total:</label> 
 
     <input type="text" class="form-control" id="total" readonly> 
 
     <p class="help-block"></p> 
 
    </div> 
 
</div> 
 
<div class="col-xs-12 control-group form-group" id="errmsg"></div>

Fiddle