Рассчитать итоговую стоимость встроенной формы

Question

Я новичок в бутстрап-кодировании. У меня есть простой вопрос, но я не могу найти ответ.

Это то, в чем я нуждаюсь: у меня есть вес одного предмета, количество единиц, необходимых для вычисления общего веса.

Может ли кто-нибудь помочь мне, пожалуйста?

<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, чтобы вытащить значение ваших входов с их идентификаторами, а затем выполнить свои расчеты. Вам просто нужно назначить переменную для каждого идентификатора входа и для вычисления, затем вывести на #total.

* Я изменил ваш тип ввода на number с text также.

$(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