I want to change the value of all input:text from the select menu. This value will change only the matched td.class from data-pset inside <select>
I can only think of this code. Please help me out where am I missing. (I'm new to jquery and still learning.)
$("select.set_price").change(function() {
var pset = $(this).data('pset');
$(this).find('td.' + pset).find('input.price').val($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th align="left">
<select class="set_price" data-pset="set1">
<option value="" disabled selected>Set1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</th>
</tr>
<tr>
<td>1</td>
<td class="set1"><input type="number" name="set1_1" value="1" /></td>
</tr>
<tr>
<td>2</td>
<td class="set1"><input type="number" name="set1_2" value="1" /></td>
</tr>
<tr>
<td>3</td>
<td class="set1"><input type="number" name="set1_3" value="1" /></td>
</tr>
<tr>
<th>#</th>
<th align="left">
<select class="set_price" data-pset="set1">
<option value="" disabled selected>Set2</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</th>
</tr>
<tr>
<td>4</td>
<td class="set2"><input type="number" name="set2_1" value="1" /></td>
</tr>
<tr>
<td>5</td>
<td class="set2"><input type="number" name="set2_2" value="1" /></td>
</tr>
<tr>
<td>6</td>
<td class="set2"><input type="number" name="set2_3" value="1" /></td>
</tr>
</table>
I expect all inputs under each set to change the value accordingly to the select change. Please click here for the fiddle : https://jsfiddle.net/stgcd5k7/
There's three issues in your jQuery code.
You're looking for the td elements inside the select as you call find(). Look for them from the DOM root instead.
You haven't added the price class to the input HTML.
The second .set_price element has its data-pset set to a value of set1 instead of set2.
Fix those issues and the logic works correctly:
$("select.set_price").change(function() {
var pset = $(this).data('pset');
$('td.' + pset).find('input.price').val($(this).val());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th align="left">
<select class="set_price" data-pset="set1">
<option value="" disabled selected>Set1</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</th>
</tr>
<tr>
<td>1</td>
<td class="set1"><input type="number" name="set1_1" value="1" class="price" /></td>
</tr>
<tr>
<td>2</td>
<td class="set1"><input type="number" name="set1_2" value="1" class="price" /></td>
</tr>
<tr>
<td>3</td>
<td class="set1"><input type="number" name="set1_3" value="1" class="price" /></td>
</tr>
<tr>
<th>#</th>
<th align="left">
<select class="set_price" data-pset="set2">
<option value="" disabled selected>Set2</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</th>
</tr>
<tr>
<td>4</td>
<td class="set2"><input type="number" name="set2_1" value="1" class="price" /></td>
</tr>
<tr>
<td>5</td>
<td class="set2"><input type="number" name="set2_2" value="1" class="price" /></td>
</tr>
<tr>
<td>6</td>
<td class="set2"><input type="number" name="set2_3" value="1" class="price" /></td>
</tr>
</table>
Related
I have a simple form with dynamic number of rows, each row having the same fields.
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">
<p>1</p>
</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<!-- Dynamic rows appear here -->
</tbody>
</table>
Form is present as a table, but it's not a strict requirement, so can be flexible here.
On form submission I need this form data to be converted to JSON.
I have this function to convert form into JSON:
function convertFormToJSON(form) {
const array = $(form).serializeArray();
const json = {};
$.each(array, function () {
json[this.name] = this.value || "";
});
return json;
}
But every row overwrites previous one, so I end up having only last row data in this JSON. I realize I need to have a loop and append each new row data into final JSON, but I struggle finding the criterion for this loop. Table rows? Or better not to use table and switch to a different form presentation?
Here is a simple non-jQuery way of collecting all the input data from this form with a variable number of input elements:
document.querySelector("button").onclick=ev=>{
let res=[...document.getElementById("tbody").children].map(tr=>
Object.fromEntries([...tr.querySelectorAll("input,select")].map(el=>
[el.name,el.value])));
console.log(res);
}
input,select {width:80px;}
<table class="table table-bordered" id="recordsTable">
<thead>
<tr>
<th class="text-center">#</th>
<th class="text-center">Name</th>
<th class="text-center">Email</th>
<th class="text-center">Action</th>
<th></th>
</tr>
</thead>
<tbody id="tbody">
<tr id="R1" name="record">
<td class="row-index text-center">1</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R2" name="record">
<td class="row-index text-center">2</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
<tr id="R3" name="record">
<td class="row-index text-center">3</td>
<td>
<input type="text" name="facultyName" />
</td>
<td>
<input type="text" name="facultyEmail" />
</td>
<td>
<select name="actionType">
<option value="default">--None--</option>
<option value="a1">Action 1</option>
<option value="a2">Action 2/Withdraw</option>
<option value="a3">Action 3</option>
</select>
</td>
</tr>
</tbody>
</table>
<button>collect data</button>
Here create a dynamic table row when clicking on + button add a new row and click on - button remove row design like this,
Here subject drop-down display and also instructor drop-down display but the problem is when select subject maths instructor drop-down show and when select a science instructor drop-down hide but it's changing in all drop-down.
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
if (jQuery.inArray(topic_name, names) != '-1') {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent().find('td').hide();
} else {
$(this).closest('table').find('tbody#schedule_table').find('td:last').parent('td').find('td').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr id="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" id="CourseScheduleScheduleInstructor" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr id="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text" id="CourseScheduleScheduleFromTime"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text" id="CourseScheduleScheduleToTime"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic" id="CourseScheduleScheduleSubject">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" id="CourseScheduleScheduleInstructor" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>
That happens because of duplicate identifiers, the id attribute must be unique in the same document.
That will be fixed by replacing the duplicate ones with common classes.
Then your selector could be simply :
$(this).closest('tr').find('.instructor_name');
$('body').on('change', '.course_topic', function() {
var topic_name = $(this).val();
var names = ['Registration', 'Lunch Break', 'Tea Break'];
var instructor_name = $(this).closest('tr').find('.instructor_name');
if ($.inArray(topic_name, names) != -1) {
instructor_name.hide();
} else {
instructor_name.show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table">
<tbody>
<tr>
<th>From Time</th>
<th>To Time</th>
<th>Subject</th>
<th>Instructor</th>
<th></th>
</tr>
</tbody>
<tbody id="schedule_table">
<tr class="ScheduleTable1">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule][schedule_instructor][]" default="" class="form-control select2me instructor_name" style="display: none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant</option>
</select>
</td>
<td><input type="button" class="btn btn-primary btn-style" onclick="remove('ScheduleTable1')" name="Delete" value="-"></td>
</tr>
<tr class="ScheduleTable0">
<td><input name="data[CourseSchedule][schedule_from_time][]" class="form-control from_timepicker" readonly="readonly" value="11:54 AM" type="text"></td>
<td><input name="data[CourseSchedule][schedule_to_time][]" class="form-control to_timepicker" readonly="readonly" value="01:54 AM" type="text"></td>
<td>
<select name="data[CourseSchedule]
[schedule_subject][]" default="" class="form-control select2me
course_topic">
<option value="">Select Subject</option>
<option value="gfgfg" selected="selected">gfgfg</option>
<option value="Registration">Registration</option>
<option value="Lunch Break">Lunch Break</option>
<option value="Tea Break">Tea Break</option>
</select>
</td>
<td>
<select name="data[CourseSchedule]
[schedule_instructor][]" default="" class="form-control select2me
instructor_name" style="display:
none;">
<option value="">Select Subject</option>
<option value="Chintan Mahant" selected="selected">Chintan Mahant
</option>
</select>
</td>
<td><input type="button" class="btn btn-
primary btn-style" id="AddScheduleRow1" name="Add" value="+">
</td>
</tr>
</tbody>
</table>
My objective is to get the value from span and assign the value to the dropdown on the same row.
Here is my jsFiddle: http://jsfiddle.net/bharatgillala/581hk9Ly/4/
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option values="-1"></option>
<option values="tom">tom</option>
<option values="tom">harry</option>
<option values="bob">bob</option>
</select>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
My objective is to loop through all the spans and if there is any text, get the text and assign the text to the closest dropdown.
I've already answered that for you yesterday. The code is fully commented below:
(function(d) {
// when all the DOMElements are already loaded into the document
d.addEventListener('DOMContentLoaded', function() {
// gets the generated table, and get all the dropdownlists inside it
var table = document.getElementById('gridviewInfo'),
ddls = [].slice.call(table.querySelectorAll('.judges'));
// loop through the dropdownlists
ddls.forEach(function(ddl, i) {
// get the label inside the last td
var lbl = ddl.parentNode.parentNode.lastElementChild.firstElementChild;
// change the dropdownlist selectedvalue to the label text
ddl.value = lbl.textContent.trim();
});
});
})(document);
<table id="gridviewInfo" runatr="server">
<tbody>
<tr>
<th scope=col>Available Boys.</th>
<th scope=col>Already Selected Boy</th>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl1" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s2" class="spanclass">tom</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl2" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s1" class="spanclass">harry</span>
</td>
</tr>
<tr>
<td style="WHITE-SPACE: nowrap" align=left>
<select id="sl3" class="judges">
<option value="-1"></option>
<option value="tom">tom</option>
<option value="harry">harry</option>
<option value="bob">bob</option>
</select>
</td>
<td>
<span id="s3" class="spanclass"></span>
</td>
</tr>
</tbody>
</table>
And here is your fiddle updated: http://jsfiddle.net/581hk9Ly/6/
And if you want a jQuery version:
$(document).ready(function() {
$('.spanclass').each(function() {
$(this).closest('tr').find('.judges').val($(this).text());
});
});
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
This question appears to be off-topic because it lacks sufficient information to diagnose the problem. Describe your problem in more detail or include a minimal example in the question itself.
Closed 8 years ago.
Improve this question
I've a table as given below:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table class="productList" width="600">
<tr>
<th colspan="9" align="left"> Select your product list</th>
</tr>
<tr class="head">
<td width="25" align="right"></td>
<td width="270" align="center">Product Name</td>
<td width="80" align="center">Quantity</td>
<td width="80" align="center">Unit Price</td>
<td width="80" align="center">Line Total</td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
<tr>
<td align="center"><label class="arow" data-icon="E"></label></td>
<td><select name="productname" class="datagridInput" disabled required>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
<td><input name="quantity" type="text" class="datagridInput" ></td>
<td><input name="purchase_price"type="text" class="datagridInput"></td>
<td><input name="linetotal" type="text" class="datagridInput" readonly></td>
</tr>
</table>
<label for="net_ammount">Net Ammount:</label>
<input type="text" name="net_ammount" class="summary" disabled>
</body>
</html>
Please help me to find sum of each "Line Total" column input value and show in "Net Amount" input element. every input has same id actually I found them with it's row and column index value..........
data are coming from the server. when user change the product code all field get enable and when user select product total line value showing in "Total Line" column. Please check at http://www.lpgbookkeeping.in/
username: blueflame2014
password: Blueflame#2014
I want when user select product code in datagrid . Sum of all "Line Total" show in Net Amount.
Please somebody help me........
Here is jsfiddle demo of my table
As you donot have any content on linetotal input so this may give NAN, but this method u have to write and call it on button click or any other event where u wana update the textbox.
function getTotal() {
var linetotal =0;
var line = document.forms[0].elements["linetotal"];
for (var i = 0, len = line.length; i < len; i++) {
linetotal = linetotal + parseInt(line[i].value) ;
}
document.getElementById("summary").value = linetotal;
}
ID can never be same ,Id is unique,classes can be same (multiple) in HTML
I by mistake put it in comment instead of answer box :)
Assuming you make the id of your "Net Amount" input element, "summary_net_amount", the answer is something like this:
function calculateLineTotals(){
var $linetotals = $("input[name=\"linetotal\"]");
var sum = 0;
$linetotals.each(function() {
sum += parseInt($(this).val());
});
$("#summary_net_amount").val(sum);
}
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>
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>