2017-04-13 110 views
-1

我在表格中有發票表單。我想在添加數量的時候計算每件商品的總數。我列出的商品的數量爲空白,但包含商品的數量。只有當我向該領域添加數量時,我纔想得到總數。目前,我已經能夠計算沒有數量的總數。 請使用此鏈接enter link description here如何計算在javascript中的數量輸入字段的價格總和

   <table width="82%" class='table borderless'> 

     <tr> 
     <td>ITEM</td> 
     <td>Quantity</td> 
     <td>Amount</td> 
     </tr> 
     <tr> 
     <td width="15%">Saddle (75mm x 3/4) : </td> 
     <td width="11%"> 

      <input type="text" name="num" id="num">    </td> 
     <td ><input onFocus="findTotal()" type="text" name="qty" id="qty" value="55"/></td> 
     </tr> <tr> 
     <td width="15%">Ferrule (19mm) : </td> 
     <td width="11%"> 

      <input type="text" name="num" id="num">    </td> 
     <td ><input onFocus="findTotal()" type="text" name="qty" id="qty" value="60"/></td> 
     </tr> <tr> 
     <td width="15%">HDPE Pipe (25mm) : </td> 
     <td width="11%"> 

      <input type="text" name="num" id="num">    </td> 
     <td ><input onFocus="findTotal()" type="text" name="qty" id="qty" value="4.5"/></td> 
     </tr> <tr> 
     <td width="15%">Stopcock (19mm) : </td> 
     <td width="11%"> 

      <input type="text" name="num" id="num">    </td> 
     <td ><input onFocus="findTotal()" type="text" name="qty" id="qty" value="45"/></td> 
     </tr> 
    </table> 
    <button type="submit" name="process" class="btn btn-primary" id="submit">Submit Estimate</button> 







function findTotal(){ 
     var arr = document.getElementsByName('qty'); 
     var tot=0; 
     for(var i=0;i<arr.length;i++){ 
      if(parseInt(arr[i].value)) 
       tot += parseInt(arr[i].value); 
     } 
     document.getElementById('total').value = tot; 
    } 
+0

你是如何調用''findTotal你需要'findTotal'每次輸入更改來電,形式發送或按鈕被點擊。 –

+0

你還沒有描述你有什麼確切的問題。你所說的就是你的最終目標是什麼。你必須告訴我們你發佈的代碼有什麼問題。 – csmckelvey

+0

請詳細說明你想要什麼以及到目前爲止所嘗試過的。首先,現在'findTotal()'函數的作用是對'amount'列中的所有數字進行求和。這可能是錯誤的。我只能假設你需要將每一行之間的每一行相乘,然後計算結果。你現在的解決方法是混亂的,你的指示是不夠的。 –

回答

0

下面的代碼將增加顯示的總量的*在只讀輸入字段金額標記爲「合計」。注意:一般class應該用於多個元素,id應該對每個元素都是唯一的。如果您希望金額也是隻讀字段,只需在定義的值之後立即添加關鍵字readonly。我用onBlur而不是onFocus來允許用戶在改變之前編輯這些值。

function findTotal(){ 
 
     var arr = document.getElementsByName('qty'); 
 
     var scale = document.getElementsByName('num'); 
 
     var tot = 0; 
 
     for(var i=0;i<arr.length;i++){ 
 
      if(arr[i].value != "" && scale[i].value != ""){ 
 
       tot += parseInt(scale[i].value) * parseInt(arr[i].value); 
 
      
 
      } 
 
     } 
 
     document.getElementById('total').value = tot; 
 
}
<table width="82%" class='table borderless'> 
 

 
     <tr> 
 
     <td>ITEM</td> 
 
     <td>Quantity</td> 
 
     <td>Amount</td> 
 
     </tr> 
 
     <tr> 
 
     <td width="15%">Saddle (75mm x 3/4) : </td> 
 
     <td width="11%"> 
 

 
      <input value = 0 type="text" onBlur="findTotal()" name="num">    </td> 
 
     <td ><input onBlur()="findTotal()" type="text" name="qty" value="55"/></td> 
 
     </tr> <tr> 
 
     <td width="15%">Ferrule (19mm) : </td> 
 
     <td width="11%"> 
 

 
      <input value = 0 type="text" onBlur="findTotal()" name="num">    </td> 
 
     <td ><input onBlur="findTotal()" type="text" name="qty" value="60"/></td> 
 
     </tr> <tr> 
 
     <td width="15%">HDPE Pipe (25mm) : </td> 
 
     <td width="11%"> 
 

 
      <input value = 0 type="text" onBlur="findTotal()" name="num">    </td> 
 
     <td ><input onBlur="findTotal()" type="text" name="qty" value="4.5"/></td> 
 
     </tr> <tr> 
 
     <td width="15%">Stopcock (19mm) : </td> 
 
     <td width="11%"> 
 

 
      <input type="text" name="num" value = 0 onBlur="findTotal()">    </td> 
 
     <td ><input onBlur="findTotal()" type="text" name="qty" value="45"/></td> 
 
     </tr> 
 
     <tr> 
 
      <td>Total: </td> 
 
      <td><input type="text" id='total' value=""readonly></input></td> 
 
     </tr> 
 
    </table> 
 
    <button type="submit" name="process" class="btn btn-primary" id="submit" onclick="findTotal()">Submit Estimate</button>

相關問題