We Keep Coding

How to make a total estimate calculator using checkboxes and jquery?

Is there anyone here who thinks they can help me solve an estimate calculator issue?
The user clicks on different checkboxes which stores a price value and for each checkbox they click it adds a total price. I got that working. But I cant find a way to give the checkbox a range price to display to the user
like this
This is mine, i put in plane text the range, but the value is actually only the first portion of the range unfortunately and I'm not getting to display the range
This is what is the code i tried:
`
<p class = "dropdown-details">Includes cost of parts and services for the <u>Engine</u></p>
<div id = "test"></div>
</div>
<br>
<!--Services with prices-->
<form action="" method="post" id= "engineRepair-form" class="price-form">
<table>
<tr>
<td class="services-row">
<input type="checkbox" name="array[]" id="oil" value="2126.15">
<label for="oil">Air Filter</label>
</td>
<td class = "price">
$2,126.15 - $2,622.25
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="gas" value="1063.08">
<label for="gas">Gas Filter</label>
</td>
<td class = "price">
$1,063.08 - $1,275.69
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="tires" value = "3614.46">
<label for="tires">Fuel Filter</label>
</td>
<td class = "price">
$3,614.46 - $4,394.05
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="sparkPlug" value = "5244.51">
<label for="sparkPlug">Spark Plug</label>
</td>
<td class = "price">
$5,244.51 - $6,449.33
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="belt_chain" value = "9355.07">
<label for="belt_chain">Timing Belt/Chain</label>
</td>
<td class = "price">
$9,355.07 - $1,1410.35
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="belt_drive" value = "3685.33">
<label for="belt_drive">Fan Belt/Drive Belt</label>
</td>
<td class = "price">
$3,685.33 - $4,323.18
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="radiatorHoseSet" value = "7228.92">
<label for="radiatorHoseSet">Radiator Hose Set</label>
</td>
<td class = "price">
$7,228.92 - $8,858.97
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" id="radiator" value = "27214.74">
<label for="radiator">Radiator</label>
</td>
<td class = "price">
$27,214.74 - $33,309.71
</td>
</tr>
</table>
</form>
`
Javascrip:
`
$(function() {
$('input').click(function() {
var total = 0;
$('input:checked').each(function(index, item) {
total += parseFloat(item.value);
});
$('#test').text(total.toFixed(2));
});
});
`
As you can see, the prices did add but it didn't display the range as showed in the first image I sent. It's supposed to display the total estimated price range
enter link description here
this is also the codepen

Here is this Answer
i used parentElement and NextSilbiling
$(function() {
$('input').click(function() {
var total1 = 0;
var total2 = 0;
$('input:checked').each(function(index, item) {
var items = item.parentElement.nextElementSibling.innerText.replace(/[$, ]/g,'').split("-");
total1 += Number(items[0]);
total2 += Number(items[1]);
});
$('#costOutput').text('$'+total1.toFixed(2)+' - '+ '$'+total2.toFixed(2));
});
});
https://bokboot.net/read?id=47&key=b3897fd0-315c-410d-ab2a-f61b8e8c4a4a
Copy and Paste in your project

First things first, please do not use the table tag for layout. It should be used for tabular data only. Its use for layout went out of style at the turn of the century!
Now, onto the problem at hand. As you've discovered, checkboxes can only have one value. We are going to leverage data attributes to give your more.
$(function() {
$('input').click(function() {
var minTotal = 0;
var maxTotal = 0
$('input:checked').each(function(index, item) {
//Add the value from the minval data attribute
minTotal += parseFloat(item.dataset.minval);
//Add the value from the maxval data attribute
maxTotal += parseFloat(item.dataset.maxval);
});
//Update the text field
$('#test').text("$" + minTotal.toFixed(2) + " - $" + maxTotal.toFixed(2) );
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="dropdown-details">Includes cost of parts and services for the <u>Engine</u></p>
<div id="test"></div>
</div>
<br>
<!--Services with prices-->
<form action="" method="post" id="engineRepair-form" class="price-form">
<table>
<tr>
<td class="services-row">
<input type="checkbox" name="array[]" id="oil" data-minval="2126.15" data-maxval="2622.25" value="skuOil">
<label for="oil">Air Filter</label>
</td>
<td class="price">
$2,126.15 - $2,622.25
</td>
</tr>
<tr>
<td class="service">
<input type="checkbox" name="array[]" data-minval="1063.08" data-maxval="1275.69" id="gas" value="skuGas">
<label for="gas">Gas Filter</label>
</td>
<td class="price">
$1,063.08 - $1,275.69
</td>
</tr>
</table>

Skip First Row in html table after javascript

My below code skips the last row of the html table on button click if all the values are filled in the text box's but now i have a situation where i wan to skip the first row only as in my case there will be heading on first row and print all data expect first row.
With Heading demo doent work as there is text on first row
Demo With out heading skips last row working
HTML
<table border="1" id="Positions_names">
<tbody>
<tr>
<td align="center">text heading
</td>
<td>
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
<td style="display:none;">
text heading
</td>
</tr>
<tr>
<td align="center">b
<input type="hidden" value="b">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
<tr>
<td align="center">c
<input type="hidden" value="c">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
<tr>
<td align="center">d
<input type="hidden" value="d">
</td>
<td>
<input onchange="election_title_onchange();" class="designatiom_placeholder" type="text" placeholder="Enter a Designation">
</td>
<td style="display:none;">
<input type="hidden" class="election_id" value="767F1G">
</td>
<td style="display:none;">
<input type="hidden" class="election_title" value="21">
</td>
<td style="display:none;">
<input type="hidden" class="election_date" value="2015-09-21">
</td>
<td style="display:none;">
<input type="hidden" class="election_start_time" value="02:03">
</td>
<td style="display:none;">
<input type="hidden" class="election_end_time" value="15:04">
</td>
</tr>
</tbody>
</table>
<input type="submit" onclick="save_election_req_details();" id="submit_positions">
js:
$('#submit_positions').click(function () {
var x = document.getElementById("Positions_names").rows.length;
if(x=="1")
{
alert("Select Some Details to Contunue");
}
else {
var html = '';
var arr = [];
var valid = true;
$('#Positions_names tr').each(function (index, me) {
if (index < $('#Positions_names tr').length - 1 && valid) {
var inputs = $('input', me);
inputs.each(function (index, me) {
if ($(me).val().length == 0) valid = false;
});
var selects = $('select', me);
selects.each(function (index, me) {
if ($(me)[0].selectedIndex == 0) valid = false;
});
if (valid){
arr.push('("' + inputs[0].value + '","' + inputs[1].value +'")');
}
}
});
if (valid) {
html = 'INSERT INTO demo (xxxx, xxxxx, xxxx,xxxx,xxxx) VALUES ' + arr.join(',') + ';';
alert(html);
} else
{
alert("Fill the Price or Select the Created Product");
}
}
});

Maybe like this? FIDDLE
I just added another condition in your if-clause.
Before:
if (index < $('#Positions_names tr').length - 1 && valid) {
After:
if (index < $('#Positions_names tr').length && valid && index >= 1) {
Alternatively:
if (index >= 1 && valid) {

try this
$('#Positions_names tr:gt(0)').each(function (index, me) {

$('tbody tr').each(function(){
$(this).find('td:eq(5)').text('$145');
});
In above example you can skip header row by putting it into thead. I have given code to loop through the Table Body
jsFiddle
Some Refrences, may Help you.
each()
find()
:eq() Selector
text()

Depending on how you want to do things. Here is a more succinct way of doing your JavaScript. It uses pseudo elements for first and last. Also you can use <thead> tags to do headers. This eliminates the need to skip the first row.
$('form').submit(function(e) {
//prevents the form from submitting
e.preventDefault();
//pushes the strings into arrays to be joined by commas later
var chunck = [];
//foreach tr in tbody
$('tbody tr')
//do not select first or last child tr
.not(':last-child,:first-child')
//find the inputs an foreach
.find('input').each(function() {
//get the name and the value
var name = $(this).attr("name");
var value = $(this).val();
//if the value is not empty then push it to the string
if (value.length > 0) {
chunck.push("('" + name + "','" + value + "')");
}
})
//chunck.join() puts commas between array elements
var string = 'INSERT INTO (name,value) VALUES ' + chunck.join();
alert(string);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<table border="1">
<thead>
<tr>
<th>Head</th>
<th>Head</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td>
<input name='a' />
</td>
</tr>
<tr>
<td>b</td>
<td>
<input name='b' />
</td>
</tr>
<tr>
<td>c</td>
<td>
<input name='c' />
</td>
</tr>
<tr>
<td>d</td>
<td>
<input name='d' />
</td>
</tr>
</tbody>
</table>
<input type="submit" />
</form>

Find hidden input value on same table row as checkbox

I have a Table in which I have checkboxes that onclick on checkboxes I want to know 2 things
ID of the checkbox
ID of the hidden field on same table row
So I do have a hidden field in each row and I want to know what that value is
My checkbox I can see from my Fiddle is GridView1__ctl3_chkOut but then I want jquery to find the value of the hidden field in same table row
I see that GridView1__ctl2_hndTxtId value is 3601 , but I will have many rows ...
Fiddle --> http://jsfiddle.net/bthorn/x9fc28nn/2/
jquery
$('.out').on('change', function () {
$(this).closest('tr').find('.out').not(this).prop('checked', false);
console.log(this.id);
//what is the hidden field value in same row?
});
$('.yesno').on('change', function () {
$(this).closest('tr').find('.yesno').not(this).prop('checked', false);
//what is the hidden field value in same row?
});
console.log shows me the ID
<table>
<tr>
<td style="width:5px;">
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
</td>
<td style="width:50px;"> <span id="GridView1__ctl2_lblVehicle0">413</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblName2">LONG</span>
</td>
<td style="width:100px;"> <span id="GridView1__ctl2_lblEquip2">BKT/TDR/M</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblScheduleb">0600-1430</span>
</td>
<td style="width:50px;"> <span id="GridView1__ctl2_lblScheduleOrig2">8</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOn"></span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl2_lblTimeOff"></span>
</td>
<td>
<input id="GridView1__ctl2_chkOut" type="checkbox" name="GridView1:_ctl2:chkOut" checked="checked" class="out">
</td>
<td>
<input id="GridView1__ctl2_chkYes2" type="checkbox" name="GridView1:_ctl2:chkYes2" checked="checked" class="yesno">
</td>
<td>
<input id="GridView1__ctl2_chkNo2" type="checkbox" name="GridView1:_ctl2:chkNo2" class="yesno">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl2:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_AddButton0" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl2:txtStormTimeOn" type="text" value="9-15-2015 12:00" id="GridView1__ctl2_txtStormTimeOn">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl2:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl2_OffButton" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl2:txtStormTimeOff" type="text" value="9-15-2015 12:28" id="GridView1__ctl2_txtStormTimeOff">
</td>
<td style="width:500px;"> <span id="GridView1__ctl2_lblComments"></span>
</td>
<td style="width:500px;">
<input name="GridView1:_ctl2:txtStormComments" type="text" value="testfasdfsdfasdfsadfasdfsadf" maxlength="200" id="GridView1__ctl2_txtStormComments" style="width:200px;">
</td>
</tr>
<tr>
<td style="width:5px;">
<input type="hidden" name="GridView1:_ctl2:hndTxtId" id="GridView1__ctl2_hndTxtId" value="3601">
</td>
<td style="width:50px;"> <span id="GridView1__ctl3_lblVehicle0">215</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblName2">MORGAN</span>
</td>
<td style="width:100px;"> <span id="GridView1__ctl3_lblEquip2">BKT/TDR</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblScheduleb">0600-1430</span>
</td>
<td style="width:50px;"> <span id="GridView1__ctl3_lblScheduleOrig2">8</span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOn"></span>
</td>
<td style="width:150px;"> <span id="GridView1__ctl3_lblTimeOff"></span>
</td>
<td>
<input id="GridView1__ctl3_chkOut" type="checkbox" name="GridView1:_ctl3:chkOut" class="out">
</td>
<td>
<input id="GridView1__ctl3_chkYes2" type="checkbox" name="GridView1:_ctl3:chkYes2" class="yesno">
</td>
<td>
<input id="GridView1__ctl3_chkNo2" type="checkbox" name="GridView1:_ctl3:chkNo2" class="yesno">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl3:AddButton0" value="On" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_AddButton0" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl3:txtStormTimeOn" type="text" id="GridView1__ctl3_txtStormTimeOn">
</td>
<td style="width:5px;">
<input type="submit" name="GridView1:_ctl3:OffButton" value="Off" onclick="setDateTimeOn(this); return false;" language="javascript" id="GridView1__ctl3_OffButton" class="btn-blue">
</td>
<td style="width:150px;">
<input name="GridView1:_ctl3:txtStormTimeOff" type="text" id="GridView1__ctl3_txtStormTimeOff">
</td>
<td style="width:500px;"> <span id="GridView1__ctl3_lblComments"></span>
</td>
<td style="width:500px;">
<input name="GridView1:_ctl3:txtStormComments" type="text" maxlength="200" id="GridView1__ctl3_txtStormComments" style="width:200px;">
</td>
</tr>
</table>

You already got the ID of the checkbox. To get the value of the hidden input field of the row use the following code:
$('.yesno').on('change', function () {
$(this).closest('tr').find('input[type="hidden"]').val()
});
See this JSfiddle demo

You can find information about the selectors at : https://api.jquery.com/category/selectors/
Taking a part of your fiddle, it looks about:
$tr = $(this).closest('tr');
hidden = $tr.find('input[type="hidden"]');
console.log(hidden);

Use the find method as you are already using but with 'input[type=hidden]':
$('.out').on('change', function () {
var $tr = $(this).closest('tr');
$tr.find('.out').not(this).prop('checked', false);
console.log(this.id);
//what is the hidden field value in same row?
var hiddenVal = $tr.find('input[type=hidden]').val();
console.log(hiddenVal);
});
$('.yesno').on('change', function () {
var $tr = $(this).closest('tr');
$tr.find('.yesno').not(this).prop('checked', false);
//what is the hidden field value in same row?
var hiddenVal = $tr.find('input[type=hidden]').val();
console.log(hiddenVal);
});
Fiddle

You already have the id of the checkbox. You can get the id of the hidden input element using:
var hiddenID = $(this).closest('tr').find('input[type=hidden]').prop('id');
And you can get the value of the same field like so:
var hiddenVal = $(this).closest('tr').find('input[type=hidden]').val();

How to get the dynamically cloned table textbox value?

All,
I have table which I am cloning on clicking on button and after cloning table I need to do few calculation in the cloned table as well as in parent table. My problem is that I am not able to do calculation on each appended(clone) table. I mean I wrote a on blur function to do calculation with textbox value but when I am cloning table since class name is same for all textbox, in parent and cloned table my result showing in all textbox instead of corresponding part of the table. Here is my table and my jquery code which I am following.
<html>
<body>
<table>
<tbody>
<tr><td>
<table width="95%" border="0" cellspacing="5" cellpadding="5" style="margin-left:10px;" id="product">
<thead><tr>
<td class="mandatory"> * Product Name </td>
<td class="label"> Qty.in Stock</td>
<td class="mandatory">* Qty </td>
<td class="mandatory">* Unit Price</td>
<td class="mandatory">* List Price</td>
<td class="mandatory">* Total</td>
</tr>
</thead>
<tbody class="product_details" id="tbody_product">
<tr class="tr_product_details">
<td>
<input type="text" name="txtproductName[]" id="product-name" />
<a href="">
<img width="17" height="16" src="images/Products_small.gif"> </a>
<input type="hidden" name="productid[]" id="productid" />
</td>
<td>
<input type="text" name="txtqtyStock[]" id="productstock" />
</td>
<td>
<input type="text" name="txtQty" id="product-quatity" class="product-qty" value="3" />
</td>
<td>
<input type="text" name="txtUnitPrice[]" id="product-price" />
</td>
<td>
<input type="text" name="txtListPrice[]" id="product-list-price" class="product-list-price"
/>
</td>
<td><div style="margin-left:120px;">
<input type="text" name="txtTotal[]" size="10" class="total-price" />
</div>
</td>
</tr>
<tr>
<td colspan="5"> <img width="17" height="16" src="images/spacer.gif">Product Description </td>
</tr>
<tr>
<td colspan="5"><textarea style="width:65%" maxlength="250" rows="3" cols="30" name="txtProductDescription[]" id="textarea-product-description"></textarea>
</td>
<td colspan="1" class="tbl">
<table >
<tr>
<td>Discount: </td>
<td> <input type="text" name="txtProductDiscount[]" size="10" class="product-discount" /></td>
</tr>
<tr>
<td class="label">Total After Discount: </td>
<td> <input type="text" name="txtAfterDiscount[]" size="10" class="total-after-discount" /></td>
</tr>
<tr>
<td> Tax: </td>
<td><input type="text" name="txtProductTax[]" size="10" />
</td>
</tr>
<tr>
<td class="label"> Net Total: </td>
<td><input type="text" name="txtNetTotal[]" size="10" class="net-total" /> </td>
</tr>
</table>
</td>
</tr>
</tbody>
</table>
<table align="left" style="margin-left:20px;">
<tr>
<td><input type="button" id="btnaddProduct" value="Add Product" class="button"/> </td>
</tr>
</table>
</body>
</html>
And my script which I am using :
<script type="text/javascript">
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr+" .product-qty").bind("blur change",function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
// alert( $(this).children().children().attr("class"));
// $(this).children().children().attr("class");
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function() {
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
return false;
});
});
</script>

$("#"+qty_attr+" .product-qty")
Comes out empty (no element selected) because you already added .product-qty in parent_qty_id to qty_attr.
$("#"+qty_attr)
Works.
There were alot of other errors in your code which made the blur/change routine run twice etc. I've sanitized it some into this:
$(document).ready(function () {
var parent_qty_id = $("#product tbody:first").attr('id');
var qty_attr = parent_qty_id+" tr:first .product-qty";
$("#"+qty_attr).blur(function(){
var product_qty = $(this).val(), product_list_price = $('#product tr td .product-list-price').val(),total;
total = product_qty * product_list_price;
var val = $(this).children();
$(val).val(total+'.00');
});
$("#btnaddProduct").click(function(e) {
e.preventDefault();
var count = ($("tbody .product_details").length) + 1;
var tblid = $("#product tbody:first").attr('id');
var newid = tblid+"_"+count;
$('#product tbody:first').clone(true).insertAfter('#product > tbody:last').attr("id",newid);
$('table#product > tbody:last > tr:first input').val(' ');
$('table#product > tbody:last > tr:last input').val(' ');
$(":text.product-qty").last().val();
});
});
Further tweaking is probably needed.

Getting last file input in a table

Here is my html:
<table>
<tbody><tr>
<td>
<label for="DocumentsName">Názov</label>
</td>
<td>
<input name="DocumentsName" class="input documentsName" value="" style="width: 10em;" type="text">
</td>
</tr>
<tr>
<td>
<label for="DocumentsDescription">Popis</label>
</td>
<td>
<textarea name="DocumentsDescription" id="DocumentsDescription" cols="15" rows="4" class="input" style="width: 340px; font: 1em sans-serif;"></textarea>
</td>
</tr>
<tr>
<td>
<label for="Document1">Doc 1</label>
</td>
<td>
<input name="Document1" class="input document1" style="width: 10em;" type="file">
</td>
</tr>
</tbody></table>
+++++
I am trying to get the litest input with type="file" from the table upon clicking the #addDocumentFileInput link.
This returns null. Why?
<script type="text/javascript">
$(document).ready(function() {
$("#addDocumentFileInput").click(function() {
var $lastFileInput = $(this).prev().children("tr").last().children("input");
alert($lastFileInput.html());
return false;
});
});
</script>

Because prev() gives you the table element and it has no tr children, only one tbody child. A row has no input children either, only td children.
children only searches for elements one level below.
Use find instead:
$(this).prev().find('input[type="file"]').last()
// or fancy: find('input:file:last')