实时计算

Question

我正在处理一个表单，我想在不提交表单的情况下动态显示/更新input[text]的值。

以此为例：

LEGEND：

price=$60（固定值）

8 Kilo = 1 Spin [每8公斤它相当于1次旋转。 9kilos = 2Spins]

Amount = Spin*Price

当用户在＆＃39; kilo＆＃39;中键入10时，＆＃39;旋转＆＃39;价值将会更新，并且“金额”会被更新。值将自动计算。计算应该在用户输入时实时发生。

＆＃13;

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
https://stackoverflow.com/questions/ask#
<table class="table table-striped table-bordered table-hover " id="dataTables-example">
<tr>
    <th>ID</th>
    <th>SERVICE</th>
    <th>KILO</th>
    <th>SPINS</th>
    <th>PRICE</th>
    <th>AMOUNT</th>
  	</tr>
<tr>
<form id="new_transaction" method="post" class="form-horizontal" action="scripts/add_transaction.php">
    <td>1</td>
    <td>WASH</td>
    <td>
      <div class="form-group">
        <div class="col-sm-12">
          <input type="text" class="form-control" name="kilo" id="kilo1">
        </div>
      </div>
    </td>
    <td>
      <div class="form-group">
        <div class="col-sm-12">
          <input type="text" class="form-control" name="spins" readonly>
        </div>
      </div>
    </td>
    <td>
      <div class="form-group">
        <div class="col-sm-12">
          <input type="text" class="form-control" name="price" value="$60" readonly>
        </div>
      </div>
    </td>
    <td>
      <div class="form-group">
        <div class="col-sm-12">
          <input type="text" class="form-control" name="amount"readonly>
        </div>
      </div>
    </td>
  </tr>
</form>
</table>

＆＃13;

＆＃13;

＆＃13;

THE FORM

DESIRED OUTPUT

Answer 1

添加onchange =＆＃34; updateSpin（）＆＃34;和价值=＆＃34;＆＃34;对你的千位输入，也为你的旋转输入和你的金额输入添加一个id。添加脚本以链接jquery，然后添加带有updateSpin函数的脚本。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<script>
function updateSpin(){
    var kilo = $(this).val();
    var spins = Math.ceil(kilo/8);
    //update spins
    $("#spinsID").val(spins);
    //update amount
    $("#amountID").val(spins);
}
</script>

希望可能有所帮助。 编辑**将地板功能更改为ceil也可以。更简单一点。