上變化

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>