1

我已经为此绞尽脑汁好几个小时了。我一直在尝试使用我在 Google 上找到的其他订单表单中的 JavaScript 并对其进行修改以满足我的需求，但我在这方面缺乏专业知识是我目前最大的障碍。我想知道这里是否有人可以帮助我。如果您能给我一个解决方案，我会非常乐意在您的 PayPal 帐户中投入 20 美元。

这正是我想要完成的，但作为一个网络表单：http: //justinwhalley.net/orderform/orderform.xlsx

这是我编写的网络表单，但没有连接 Javascript：http: //justinwhalley.net/orderform/

需要计算...

对于每个零件/产品：

  • 免费盒 = 订购盒 * 1
  • 总单位数 =（订购的箱子 + 免费箱子）* 每箱的单位数
  • 促销小计 = 订购盒 * 每盒单位 * 分销商价值

对于订单总数...

  • Total Boxes = Ordered Boxes (all) * 2 [考虑到免费盒子也是 x2]
  • 总单位 = 总单位（全部）
  • 小计 = 促销小计（全部）
  • 含税小计 = 小计 * 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>
4

1 回答 1

1

以下脚本应该可以完成工作（请记住更新所选选项的值，现在它们在您的代码中都是 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-20T17:28:09.013 回答