上变化

Question

的Javascript/AJAX/Jquery的动态计算形式I具有将要被从MySQL数据库和人类输入填充小的形状。我想要做的是根据其他的计算另外两个字段。

实施例形式：

• 指示符（MySQL的）（下拉）
• 小时等量（MySQL的）
• SKS当量（MySQL的）
• 金额（用户）
• 小时共计（量*小时等量）
• SKS总（金额* SKS等效）
• 提交（但吨到保存到表）

这对于我试图解决的计算操作的示例

• 指示器= A
• 小时等量= 20
• SKS当量= 15
• 金额= 2
• 小时总计（金额*小时当量）= 40
• SKS合计（金额* S KS Equivalent）= 30

我已经四处搜寻并尝试了一些解决方案，但我无法完全找到我在找的东西，而且我的技能在Javascript/Ajax/Jquery中并不是很出色，所以我没有'能够做任何事都能工作，尽管我已经尝试过了。

怎么办呢？

这是HTML表单

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

Answer 1

您的解决方案在这里：https://jsfiddle.net/tv94prmu/。计算功能是变化事件的结果。结果将显示一个字段后将被填充

$(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库页面。

Answer 2

如果我得到正确的答案。

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

• 请注意，你已经设置了一些你的元素的id用大写和一些与camelCase。这是不好的做法，为了更好的实践，决定你正在工作的模式。

  将来回到您的代码时，它会更容易处理。

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 */ 
 
    });

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