計算行內總價值

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