javascript - 動的 Javascript 注文フォーム、選択および入力フィールドの値から合計を計算する

Question

私はこれについて何時間も頭を悩ませてきました。Google で見つけた他の注文フォームの JavaScript を使用して、自分のニーズに合うように変更しようとしてきましたが、この分野での専門知識の欠如が現在の最大の障害です。ここにいる誰かが私を助けてくれるかどうか疑問に思っています。解決策を教えていただければ、喜んで 20 ドルをあなたの PayPal アカウントに振り込みます。

これはまさに私が達成したいことですが、Web フォームとして: http://justinwhalley.net/orderform/orderform.xlsx

これは私がコーディングした Web フォームですが、Javascript が接続されていません: http://justinwhalley.net/orderform/

計算が必要...

各部品/製品について:

フリーボックス = オーダーボックス * 1
合計ユニット数 = (オーダー済みボックス + 無料ボックス) * ボックスあたりのユニット数
プロモーションを含む小計 = 注文ボックス数 * ボックスあたりのユニット数 * ディストリビューターの価値

ご注文合計金額は...

ボックスの合計 = 注文したボックス (すべて) * 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>

score 1 · Accepted Answer

次のスクリプトで作業を行う必要があります（選択したオプションの値を更新することを忘れないでください。現在、コードではすべて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>

javascript - 動的 Javascript 注文フォーム、選択および入力フィールドの値から合計を計算する

1 に答える 1

Related

Reference