计算总价值内联表格 [英] Calculate total value inline form

查看：24
本文介绍了计算总价值内联表格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我是引导程序编码的新手.我有一个简单的问题，但我找不到答案.

这就是我需要的:我有单个物品的重量，我需要计算总重量的单位数.

有人可以帮我吗?

<div class="控件"><标签>单位重量:</label><input type="text" class="form-control" id="uweight" required data-validation-required-message="请输入您的姓名."><p class="help-block"></p>

<div class="col-xs-4 control-group form-group"><div class="控件"><label>单位:</label><input type="text" class="form-control" id="units" required data-validation-required-message="请输入您的姓名."><p class="help-block"></p>

<div class="col-xs-4 control-group form-group"><div class="控件"><label>总计:</label><input type="text" class="form-control" id="total" ><p class="help-block"></p>

解决方案

您可以使用 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 {填充顶部: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="容器"><表格名称="calcForm"><div class="row"><div class="col-xs-4 control-group form-group"><div class="控件"><标签>单位重量:</label><input type="number" class="form-control" id="uweight" required data-validation-required-message="请输入您的姓名."><p class="help-block"></p>

<div class="col-xs-4 control-group form-group"><div class="控件"><label>单位:</label><input type="number" class="form-control" id="units" required data-validation-required-message="请输入您的姓名."><p class="help-block"></p>

<div class="col-xs-4 control-group form-group"><div class="控件"><label>总计:</label><input type="number" class="form-control" id="total" disabled/><p class="help-block"></p>

</表单>

I'm new with bootstrap coding. I have a simple question, but I cannot find the answer.

This is what I need: I have weight of a single item, the number of units I need to calculate total weight.

Can somebody help me please?

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

解决方案

You can use jQuery to pull in the value of your inputs with their IDs then perform your calculations. You just have to assign a variable to each input ID and the for the calculation, then output to #total.

*I've changed your input type to number from text also.

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

这篇关于计算总价值内联表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆