Question

我有一个小表单，将从Mysql数据库和人工输入填充。我想要做的是根据其他字段计算其他2个字段。

示例表单：

指标（MySQL）（下拉列表）
小时当量（MySQL）
SKS Equivalent（MySQL）
金额（用户）
小时总计（金额*小时当量）
SKS总计（金额* SKS当量）
提交（按钮保存到表格中）

这是我尝试解决的计算操作的示例

指标= A
小时当量= 20
SKS Equivalent = 15
金额= 2
小时总计（金额*小时当量）= 40
SKS总计（金额* SKS当量）= 30

我已经四处搜索并尝试了一些解决方案，但我找不到我要找的东西，而且我的技能在Javascript / Ajax / Jquery中并不是很好，所以我无法做任何事情工作，虽然我悲惨地试过。

怎么做？

这是HTML表单

＆＃13;

<form>
<fieldset>
<legend>PSC Achievement</legend>
<!-- Button Drop Down -->
<div class="form-group">
  <label for="buttondropdown">Indicator</label>
         <button type="button" data-toggle="dropdown">
          Choose
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pull-right">
        </ul>
      </div>
	  
  <label for="txtsks">SKS Equivalent</label>  
  <input id="txtsks" name="txtSks" type="text">
    
  <label for="txtjam">Hour Equivalent </label>  
  <input id="txtjam" name="txtHour"type="text">
  
  <label for="textjml">Amount</label>  
  <input id="textjml" name="txtAmount" type="text">

  <label for="Totalhour">Hour Total</label>  
  <input id="Totalhour" name="Totalhour" type="text">  
 
  <label for="Totalsks">SKS Total</label>  
  <input id="Totalsks" name="Totalsks" type="text">
    
  <label for="btn_submit"></label>
  <button id="btn_submit" name="btn_submit">Submit</button>
</fieldset>
</form>

＆＃13;

Answer 1

如果我的答案正确的话。

您需要提供有关代码的更多信息，但据我所知，您需要为表单添加事件处理程序（如下所示）。

请注意，您已使用大写设置元素的某些ID，而使用camelCase设置了一些ID。这是不好的做法，为了更好的实践，决定你正在工作的模式。

将来回到代码时会更容易处理。

＆＃13;

txtsks.addEventListener("blur", function( event ) {
/* call SKS Equivalent function */
}, true);

txtjam.addEventListener("blur", function( event ) {
/* call Hour Equivalent function */
}, true);

textjml.addEventListener("blur", function( event ) {
/* call Amount (User) function */
}, true);

Totalhour.addEventListener("blur", function( event ) {
/* call Hour Total (Amount*Hour Equivalent) function */
}, true);

Totalsks.addEventListener("blur", function( event ) {
/* call SKS Total (Amount*SKS Equivalent) function */
}, true);

btn_submit.addEventListener("click", function ( event ) {
  /* call Submit(Button to save into table) function */
  });

＆＃13;

<form>
<fieldset>
<legend>PSC Achievement</legend>
<!-- Button Drop Down -->
<div class="form-group">
  <label for="buttondropdown">Indicator</label>
         <button type="button" data-toggle="dropdown">
          Choose
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu pull-right">
        </ul>
      </div>
	  
  <label for="txtsks">SKS Equivalent</label>  
  <input id="txtsks" name="txtSks" type="text">
    
  <label for="txtjam">Hour Equivalent </label>  
  <input id="txtjam" name="txtHour"type="text">
  
  <label for="textjml">Amount</label>  
  <input id="textjml" name="txtAmount" type="text">

  <label for="Totalhour">Hour Total</label>  
  <input id="Totalhour" name="Totalhour" type="text">  
 
  <label for="Totalsks">SKS Total</label>  
  <input id="Totalsks" name="Totalsks" type="text">
    
  <label for="btn_submit"></label>
  <button id="btn_submit" name="btn_submit">Submit</button>
</fieldset>
</form>

＆＃13;

Answer 2

您的解决方案：https://jsfiddle.net/tv94prmu/。 Calc函数是change事件的结果。填写一个字段后将显示结果

$(function(){
$('#txtsks,#txtjam,#textjml').change(function(){
calc();
})
function calc(){
    $('#Totalhour').val(parseInt($('#txtjam').val())*parseInt($('#textjml').val()))

  $('#Totalsks').val(parseInt($('#txtsks').val())*parseInt($('#textjml').val()))

}
})

此外，您需要在页面中包含jquery库。

Javascript / Ajax / Jquery在更改时动态计算表单

2 个答案: