填寫每個輸入字段值的總價值基礎

Question

我想在提交表單之前自動計算並填寫總計。總計將基於我的5個輸入字段。

<input type="number" name="inspection_fee"> 
<input type="number" name="storage_fee"> 
<input type="number" name="local_fee"> 
<input type="number" name="cert_fee"> 
<input type="number" name="others_fee"> 

<input type="number" name="total_fee"> 

我知道如何做php的方式，因爲它會把變量提交後，然後計算它完全是這樣的。

<?php 
$inspection_fee = $paymentSettings->inspection_fee; 
$storage_fee = $paymentSettings->storage_fee; 
$cert_fee = $paymentSettings->cert_fee; 
$local_fee = $paymentSettings->local_fee; 
$others_fee = $paymentSettings->others_fee; 

$total_fee = $inspection_fee + $storage_fee + $cert_fee + $local_fee + $others_fee; 
?> 

但是如何在使用javascript提交之前填充總數？就像我更改檢驗費一樣，總費用會根據總價值自動調整。 尋求幫助。 在此先感謝。

Answer 1

將onblur事件附加到所有輸入字段以調用JavaScript函數。我已將「name」屬性更改爲在JS函數中使用的「id」屬性。

 <input type="number" id="inspection_fee" onblur="calculateTotalFee();"> 
     <input type="number" id="storage_fee" onblur="calculateTotalFee();"> 
     <input type="number" id="local_fee" onblur="calculateTotalFee();"> 
     <input type="number" id="cert_fee" onblur="calculateTotalFee();"> 
     <input type="number" id="others_fee" onblur="calculateTotalFee();"> 
     <br/> 
     <input type="number" id="total_fee"> 

     <script type="text/javascript"> 
      function calculateTotalFee(){ 
       var totalFee = 0; 
       var inspectionFee = document.getElementById("inspection_fee").value.trim() === "" ? 0 : 
        document.getElementById("inspection_fee").value.trim(); 
       var storageFee = document.getElementById("storage_fee").value.trim() === "" ? 0 : 
        document.getElementById("storage_fee").value.trim(); 
       var localFee = document.getElementById("local_fee").value.trim() === "" ? 0 : 
        document.getElementById("local_fee").value.trim(); 
       var certFee = document.getElementById("cert_fee").value.trim() === "" ? 0 : 
        document.getElementById("cert_fee").value.trim(); 
       var othersFee = document.getElementById("others_fee").value.trim() === "" ? 0 : 
        document.getElementById("others_fee").value.trim(); 

       totalFee = parseInt(inspectionFee) + parseInt(storageFee) + 
         parseInt(storageFee) + parseInt(localFee) + parseInt(certFee) + parseInt(othersFee); 

       document.getElementById("total_fee").value = totalFee; 
      } 
     </script> 

Answer 2

1. 設置的總輸入字段設置爲只讀
2. 創建一個函數中添加了所有的投入和total_fee設定值
3. 綁定你的函數的輸入input（使用Array.prototype.reduce好機會）事件

const inputs = ['inspection_fee', 'storage_fee', 'local_fee', 'cert_fee', 'others_fee'] 
 
const total = document.querySelector('input[name="total_fee"]') 
 

 
const sumTotal =() => { 
 
    total.value = inputs.reduce((sum, input) => 
 
    sum += parseInt(document.querySelector(`input[name="${input}"]`).value || 0, 10), 0) 
 
} 
 

 
inputs.forEach(input => { 
 
    document.querySelector(`input[name="${input}"]`).addEventListener('input', sumTotal, false) 
 
})

<input type="number" name="inspection_fee"> 
 
<input type="number" name="storage_fee"> 
 
<input type="number" name="local_fee"> 
 
<input type="number" name="cert_fee"> 
 
<input type="number" name="others_fee"> 
 

 
<input type="number" name="total_fee" readonly>