動態Javascript訂單表格，從選擇和輸入字段值計算彙總

我已經在這個小時中絞盡腦汁，現在已經有好幾個小時了。我一直在嘗試使用我在Google上找到的其他訂單形式的JavaScript，並對其進行修改以適應我的需求，但是我現在在這方面缺乏專業知識是我最大的障礙。我想知道這裏有人能幫助我。如果您能找到我的解決方案，我會非常樂意在您的PayPal賬戶中支付20美元。動態Javascript訂單表格，從選擇和輸入字段值計算彙總

這正是我想要實現的，但作爲一個Web表單：http://justinwhalley.net/orderform/orderform.xlsx

這是網頁形式我編寫了但沒有使用Javascript迷上了它：http://justinwhalley.net/orderform/

計算需要...

對於每個部件/產品：

免費盒=有序盒* 1
單元總數=（有序盒+免費盒）*單位每盒
小計與促銷=有序盒*每盒*分銷商的價值

單位對於訂單總數...

總箱=有序盒（全部）* 2這是X2佔免費盒以及]
單元總數=總的Uni TS（全部）
小計=小計與促銷（全部）
小計稅額=小計* 1.13
航運&處理= 10
訂單總額=小計與稅+運費&處理

任何幫助非常感謝，並希望其他人也可以從這個解決方案中受益。

在此先感謝，賈斯汀。

<form> 
    <table id="order-table"> 
    <tr> 
     <th class="part-number">Part #</th> 
     <th class="units-per-box">Units Per Box</th> 
     <th class="distributor-value">Distributor Value</th> 
     <th class="ordered-boxes">Boxes</th> 
     <th class="free-boxes">Free Boxes</th> 
     <th class="total-units">Total Units</th> 
     <th class="part-subtotal">Subtotal with Promo</th> 
    </tr> 
    <tr class="part-heading"> 
     <td colspan="7">ROOF VENTS - 45, 50 & 85 Sq. Inch Roof Vent. (RR - Rodent Resistant)</td> 
    </tr> 
    <tr class="part-row odd"> 
     <td class="part-number">AT1045</td> 
     <td class="units-per-box">12</td> 
     <td class="distributor-value">$<span>11.34</span></td> 
     <td class="ordered-boxes"><select name="at1045-ordered-boxes" class="ordered-boxes-input" id="at1045-ordered-boxes"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="1">2</option> 
      <option value="1">3</option> 
      <option value="1">4</option> 
      <option value="1">5</option> 
      <option value="1">6</option> 
      <option value="1">7</option> 
      <option value="1">8</option> 
      <option value="1">9</option> 
     </select></td> 
     <td class="free-boxes"><input type="text" class="free-boxes-input" id="at1045-free-boxes" name="at1045-free-boxes" disabled="disabled" /></td> 
     <td class="total-units"><input type="text" class="total-units-input" id="at1045-total-units" name="at1045-total-units" disabled="disabled" /></td> 
     <td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1045-part-subtotal" name="at1045-total-units" disabled="disabled" /></td> 
    </tr> 
    <tr class="part-row even"> 
     <td class="part-number">AT1050</td> 
     <td class="units-per-box">12</td> 
     <td class="distributor-value">$<span>12.96</span></td> 
     <td class="ordered-boxes"><select name="at1050-ordered-boxes" class="ordered-boxes-input" id="at1050-ordered-boxes"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="1">2</option> 
      <option value="1">3</option> 
      <option value="1">4</option> 
      <option value="1">5</option> 
      <option value="1">6</option> 
      <option value="1">7</option> 
      <option value="1">8</option> 
      <option value="1">9</option> 
     </select></td> 
     <td class="free-boxes"><input type="text" class="free-boxes-input" id="at1050-free-boxes" name="at1050-free-boxes" disabled="disabled" /></td> 
     <td class="total-units"><input type="text" class="total-units-input" id="at1050-total-units" name="at1050-total-units" disabled="disabled" /></td> 
     <td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1050-part-subtotal" name="at1050-part-subtotal" disabled="disabled" /></td> 
    </tr> 
    <tr class="part-row odd"> 
     <td class="part-number">AT1050-RR</td> 
     <td class="units-per-box">12</td> 
     <td class="distributor-value">$<span>19.04</span></td> 
     <td class="ordered-boxes"><select name="at1050rr-ordered-boxes" class="ordered-boxes-input" id="at1050rr-ordered-boxes"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="1">2</option> 
      <option value="1">3</option> 
      <option value="1">4</option> 
      <option value="1">5</option> 
      <option value="1">6</option> 
      <option value="1">7</option> 
      <option value="1">8</option> 
      <option value="1">9</option> 
     </select></td> 
     <td class="free-boxes"><input type="text" class="free-boxes-input" id="at1050rr-free-boxes" name="at1050rr-free-boxes" disabled="disabled" /></td> 
     <td class="total-units"><input type="text" class="total-units-input" id="at1050rr-total-units" name="at1050rr-total-units" disabled="disabled" /></td> 
     <td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1050rr-part-subtotal" name="at1050rr-total-units" disabled="disabled" /></td> 
    </tr> 
    <tr class="part-row even"> 
     <td class="part-number">AT1085</td> 
     <td class="units-per-box">9</td> 
     <td class="distributor-value">$<span>19.44</span></td> 
     <td class="ordered-boxes"><select name="at1085-ordered-boxes" class="ordered-boxes-input" id="at1085-ordered-boxes"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="1">2</option> 
      <option value="1">3</option> 
      <option value="1">4</option> 
      <option value="1">5</option> 
      <option value="1">6</option> 
      <option value="1">7</option> 
      <option value="1">8</option> 
      <option value="1">9</option> 
     </select></td> 
     <td class="free-boxes"><input type="text" class="free-boxes-input" id="at1085-free-boxes" name="at1085-free-boxes" disabled="disabled" /></td> 
     <td class="total-units"><input type="text" class="total-units-input" id="at1085-total-units" name="at1085-total-units" disabled="disabled" /></td> 
     <td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at1085-part-subtotal" name="at1085-part-subtotal" disabled="disabled" /></td> 
    </tr> 
    <tr class="part-heading"> 
     <td colspan="7">ROOF ROLL VENT - 20' All in One Roll</td> 
    </tr> 
    <tr class="part-row odd"> 
     <td class="part-number">AT2020</td> 
     <td class="units-per-box">6</td> 
     <td class="distributor-value">$<span>77.76</span></td> 
     <td class="ordered-boxes"><select name="at2020-ordered-boxes" class="ordered-boxes-input" id="at2020-ordered-boxes"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="1">2</option> 
      <option value="1">3</option> 
      <option value="1">4</option> 
      <option value="1">5</option> 
      <option value="1">6</option> 
      <option value="1">7</option> 
      <option value="1">8</option> 
      <option value="1">9</option> 
     </select></td> 
     <td class="free-boxes"><input type="text" class="free-boxes-input" id="at2020-free-boxes" name="at2020-free-boxes" disabled="disabled" /></td> 
     <td class="total-units"><input type="text" class="total-units-input" id="at2020-total-units" name="at2020-total-units" disabled="disabled" /></td> 
     <td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at2020-part-subtotal" name="at2020-total-units" disabled="disabled" /></td> 
    </tr> 
    <tr class="part-heading"> 
     <td colspan="7">EXHAUST VENTS - 4" Exhaust Vent (AT1050 Style)</td> 
    </tr> 
    <tr class="part-row even"> 
     <td class="part-number">AT3010</td> 
     <td class="units-per-box">8</td> 
     <td class="distributor-value">$<span>12.96</span></td> 
     <td class="ordered-boxes"><select name="at3010-ordered-boxes" class="ordered-boxes-input" id="at3010-ordered-boxes"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="1">2</option> 
      <option value="1">3</option> 
      <option value="1">4</option> 
      <option value="1">5</option> 
      <option value="1">6</option> 
      <option value="1">7</option> 
      <option value="1">8</option> 
      <option value="1">9</option> 
     </select></td> 
     <td class="free-boxes"><input type="text" class="free-boxes-input" id="at3010-free-boxes" name="at3010-free-boxes" disabled="disabled" /></td> 
     <td class="total-units"><input type="text" class="total-units-input" id="at3010-total-units" name="at3010-total-units" disabled="disabled" /></td> 
     <td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at3010-part-subtotal" name="at3010-total-units" disabled="disabled" /></td> 
    </tr> 
    <tr class="part-heading"> 
     <td colspan="7">EXHAUST VENT ADAPTER - 4-6" Adapter for Bathroom or Range Hood fan for AT1050 ONLY</td> 
    </tr> 
    <tr class="part-row odd"> 
     <td class="part-number">AT3022</td> 
     <td class="units-per-box">8</td> 
     <td class="distributor-value">$<span>13.23</span></td> 
     <td class="ordered-boxes"><select name="at3022-ordered-boxes" class="ordered-boxes-input" id="at3022-ordered-boxes"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="1">2</option> 
      <option value="1">3</option> 
      <option value="1">4</option> 
      <option value="1">5</option> 
      <option value="1">6</option> 
      <option value="1">7</option> 
      <option value="1">8</option> 
      <option value="1">9</option> 
     </select></td> 
     <td class="free-boxes"><input type="text" class="free-boxes-input" id="at3022-free-boxes" name="at3022-free-boxes" disabled="disabled" /></td> 
     <td class="total-units"><input type="text" class="total-units-input" id="at3022-total-units" name="at3022-total-units" disabled="disabled" /></td> 
     <td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at3022-part-subtotal" name="at3022-total-units" disabled="disabled" /></td> 
    </tr> 
    <tr class="part-heading"> 
     <td colspan="7">INTAKE VENT - Air Intake Vent</td> 
    </tr> 
    <tr class="part-row even"> 
     <td class="part-number">AT7045</td> 
     <td class="units-per-box">8</td> 
     <td class="distributor-value">$<span>19.71</span></td> 
     <td class="ordered-boxes"><select name="at7045-ordered-boxes" class="ordered-boxes-input" id="at7045-ordered-boxes"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="1">2</option> 
      <option value="1">3</option> 
      <option value="1">4</option> 
      <option value="1">5</option> 
      <option value="1">6</option> 
      <option value="1">7</option> 
      <option value="1">8</option> 
      <option value="1">9</option> 
     </select></td> 
     <td class="free-boxes"><input type="text" class="free-boxes-input" id="at7045-free-boxes" name="at7045-free-boxes" disabled="disabled" /></td> 
     <td class="total-units"><input type="text" class="total-units-input" id="at7045-total-units" name="at7045-total-units" disabled="disabled" /></td> 
     <td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at7045-part-subtotal" name="at7045-total-units" disabled="disabled" /></td> 
    </tr> 
    <tr class="part-heading"> 
     <td colspan="7">VENT ACCESSORIES - Wave Deflector</td> 
    </tr> 
    <tr class="part-row odd"> 
     <td class="part-number">AT9010</td> 
     <td class="units-per-box">48</td> 
     <td class="distributor-value">$<span>2.00</span></td> 
     <td class="ordered-boxes"><select name="at9010-ordered-boxes" class="ordered-boxes-input" id="at9010-ordered-boxes"> 
      <option value="0">0</option> 
      <option value="1">1</option> 
      <option value="1">2</option> 
      <option value="1">3</option> 
      <option value="1">4</option> 
      <option value="1">5</option> 
      <option value="1">6</option> 
      <option value="1">7</option> 
      <option value="1">8</option> 
      <option value="1">9</option> 
     </select></td> 
     <td class="free-boxes"><input type="text" class="free-boxes-input" id="at9010-free-boxes" name="at9010-free-boxes" disabled="disabled" /></td> 
     <td class="total-units"><input type="text" class="total-units-input" id="at9010-total-units" name="at9010-total-units" disabled="disabled" /></td> 
     <td class="part-subtotal"><input type="text" class="part-subtotal-input" id="at9010-part-subtotal" name="at9010-total-units" disabled="disabled" /></td> 
    </tr> 
    <tr> 
     <th colspan="3"></th> 
     <th colspan="2">Total Boxes</th> 
     <th>Total Units</th> 
     <th>Subtotal with Promo</th> 
    </tr> 
    <tr> 
     <td class="subtotal" colspan="3">Subtotal:</td> 
     <td colspan="2"><input type="text" class="total-boxes-input" id="total-boxes" disabled="disabled" /></td> 
     <td><input type="text" class="total-units-input" id="total-units" disabled="disabled" /></td> 
     <td><input type="text" class="subtotal-input" id="subtotal" disabled="disabled" /></td> 
    </tr> 
    <tr class="instructions"> 
     <td colspan="3"></td> 
     <td colspan="2">Must be 18 or under</td> 
     <td colspan="2"></td> 
    </tr> 
    <tr class="totals"> 
     <td colspan="5"></td> 
     <td class="totals-label">Subtotal:</td> 
     <td><input type="text" class="subtotal-input" id="subtotal" disabled="disabled" /></td> 
    </tr> 
    <tr class="totals"> 
     <td colspan="5"></td> 
     <td class="totals-label">Subtotal With Tax:</td> 
     <td><input type="text" class="subtotal-tax-input" id="subtotal-tax" disabled="disabled" /></td> 
    </tr> 
    <tr class="totals"> 
     <td colspan="5"></td> 
     <td class="totals-label">Shipping &amp; Handling:</td> 
     <td><input type="text" class="shipping-handling" id="shipping-handling" disabled="disabled" value="10" /></td> 
    </tr> 
    <tr class="totals"> 
     <td colspan="5"></td> 
     <td class="totals-label">Order Total:</td> 
     <td><input type="text" class="order-total" id="order-total" disabled="disabled" /></td> 
    </tr> 
    </table> 
    </form>

來源

2012-11-20 JustinWH

歡迎堆棧溢出。你有什麼錯誤嗎？ –

我正在嘗試從其他腳本中找到一堆代碼，並試圖修改它，但沒有成功。我基本上只是結束了我所有的JavaScript並在這裏發佈。 – JustinWH

下面的腳本應該做的工作（記得要更新的選擇的選項的值，現在他們都在1代碼）：

<script type="text/javascript"> 
    $table = $('#order-table'); 
    calculateFormFields(); 

    $(document).ready(function() { 
     $table.find('.ordered-boxes-input').bind('click', function() { 

      calculateFormFields(); 
     }); 
    }); 
    function calculateFormFields() { 
     var rows = $table.find('tr'); 
     var SubtotalTotalBoxes = 0; 
     var SubtotalTotalUnits = 0; 
     var Subtotal_SubWithPromo = 0; 
     var Total_Subtotal = 0; 
     var Total_SubtotalWithTax = 0; 
     var OrderTotal = 0; 
     for (var i = 0; i < rows.length; i++) { 
      var row = rows[i]; 
      var numberOfBoxes = 0; 
      //Free boxes 
      var orderedInput = $(row).find('.ordered-boxes-input'); 
      if (orderedInput.length == 1) { 
       numberOfBoxes = parseInt(orderedInput.val()); 
       $(row).find('.free-boxes-input').val(numberOfBoxes);//Set number of boxes selected 
       $(row).find('.total-units-input').val(numberOfBoxes * 2);//Set number of total units 
       var distributorValueSpan = $($(row).find('.distributor-value')[0]).text(); 
       var distributorValue = parseFloat(distributorValueSpan.replace('$','')); 
       var unitsPerBox = $($(row).find('.units-per-box')).text(); 
       unitsPerBox = parseFloat(unitsPerBox.replace('$','')); 
       var subtotal = distributorValue * unitsPerBox * numberOfBoxes; 
       SubtotalTotalBoxes += numberOfBoxes; 
       SubtotalTotalUnits = SubtotalTotalBoxes * 2; 
       Subtotal_SubWithPromo += subtotal; 
       $(row).find('.part-subtotal-input').val(subtotal); 
      } 


     } 

     Total_Subtotal = Subtotal_SubWithPromo; 
     Total_SubtotalWithTax = Total_Subtotal * 1.13; 
     OrderTotal = Total_SubtotalWithTax + 10; 

     $('#total-boxes').val(SubtotalTotalBoxes); 
     $('#total-units').val(SubtotalTotalUnits); 
     $('#subtotal').val(Subtotal_SubWithPromo.toFixed(2)); 
     $('.totals').find('#subtotal').val(Subtotal_SubWithPromo.toFixed(2)); 
     $('#subtotal-tax').val(Total_SubtotalWithTax.toFixed(2)); 
     $('#order-total').val(OrderTotal.toFixed(2)); 

    } 
</script>

來源

2012-11-20 17:28:09

工作正常！非常感謝。我會改變這些值。 – JustinWH

不客氣。很高興它的工作。 –

有一件事，我試圖將.toFixed（2）添加到小計中，並總計修正小數位數，但它只是打破它。 – JustinWH

動態Javascript訂單表格，從選擇和輸入字段值計算彙總

回答

相關問題