JavaScriptの数量入力フィールドと価格の合計を計算する方法

Question

テーブルに請求書フォームがあります。項目に数量を追加すると、各項目の合計が計算されます。数量は空白でリストされていますが、項目の量はあります。私はフィールドに量を追加するときにのみ合計を取得したい。現在、私は量なしで合計を計算することができた。 が親切enter link description here

   <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; 
    } 

Answer 1

このリンクを使用して、次のコードは読み取り専用の入力フィールドの金額が「合計」*印の表示に数量の合計を追加します。注：一般にclassを複数の要素に使用する必要があります。idは、各要素に対して一意にする必要があります。その量を読み取り専用フィールドにしたい場合は、定義された値の直後にキーワードreadonlyを追加してください。私はonFocusの代わりにonBlurを使用して、値を変更する前にユーザーが値を編集できるようにしました。

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>