JustinWH
Reputation: 11
Dynamic Javascript Order Form, Calculating Totals from Select and Input Field Values
I've been racking my brain on this one for hours now. I've been trying to use JavaScript from other order forms I've found on Google and modify it to fit my needs but my lack of expertise in this area is my biggest obstacle right now. I'm wondering if anyone on here can help me. I'd be more than happy to throw $20 in your PayPal account if you can get me to a solution.
This is exactly what I want to accomplish, but as a web form: http://justinwhalley.net/orderform/orderform.xlsx
This is the web form I've coded out but with no Javascript hooked up to it: http://justinwhalley.net/orderform/
Calculations required...
For each part/product:
- Free Boxes = Ordered Boxes * 1
- Total Units = (Ordered Boxes + Free Boxes) * Units Per Box
- Subtotal with Promo = Ordered Boxes * Units Per Box * Distributor Value
For order totals...
- Total Boxes = Ordered Boxes (all) * 2 [it is x2 to account for free boxes as well]
- Total Units = Total Units (all)
- Subtotal = Subtotal with Promo (all)
- Subtotal with Tax = Subtotal * 1.13
- Shipping & Handling = 10
- Order Total = Subtotal with Tax + Shipping & Handling
Any help is very much appreciated, and hopefully others can benefit from this solution as well.
Thanks in advance, Justin.
<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 & 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>
Upvotes: 1
Views: 3427
Answers (1)
Pablo Cobas
Reputation: 11
The following script should do the work (remember to update the values of the selected options, right now they are all 1 in your code) :
<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>
Upvotes: 1
Related Questions
- Doing calculations on dynamic form fields
- Javascripts calculates total based on form selections
- Calculating order form total
- Calculate quantity and total on an order form in javascript
- dynamic forms multiple input fields calculate
- Populate the grand total value base on value of each input fields
- Totals for several select options with javascript
- How to calculate total from select fields with Javascript?
- Calculating with JavaScript within form, outputting to dynamic field, code not working
- Calculating the total of an online order form using javascript