I would like to calculate the total price according to 2 selected radio buttons. Here is what I have:
Radio buttons
html input class is fare
<td class='v2'><input type='radio' name='fare' value='STANDARD' id='rbt2'>625,06</td>
<td class='v2'><input type='radio' name='fare2' value='STANDARD' id='rbt9'>884,34</td>
$(document).ready(function(){
$("#rbt, #rbt2, #rbt3, #rbt4, #rbt5, #rbt6, #rbt7").click(function(){
$("#fare").html($(this).closest("td").text());
});
});
$(document).ready(function(){
$("#rbt8, #rbt9, #rbt10, #rbt11, #rbt12, #rbt13, #rbt14").click(function(){
$("#fare2").html($(this).closest("td").text());
});
});
Jquery calculator
$(document).ready(function(){
//iterate through each radio and add keyup
//handler to trigger sum event
$(".fare").each(function() {
$(this).keyup(function(){
calculateTotal();
});
});
});
function calculateTotal() {
var total = 0;
//iterate through each radio and add the values
$(".fare").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!==0) {
total += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#total").html(total.toFixed(2));
}
html output
<tr>
<td class="sc2" id="fare"></td>
<td>+</td>
<td class="sc2" id="fare2"></td>
<td>=</td>
<td><span class="total">0</span></td>
</tr>
The total is not being shown. Help greatly appreciated. Thanks!
Here ya go:
$(document).ready(function(){
...
$(".fare").keyup(function(){
calculateTotal(); <--- you don't need to use each() here.
});
});
function calculateTotal() {
...
$("#total").html(total.toFixed(2));
}
html output
<tr>
...
<td><span id="total">0</span></td> <---- change 'class' to 'id'
</tr>
Note the changes.
Related
<tbody id="dailysale_tbody">
<tr class="items">
<td><select id="items_select" name="dailysale[luitem_id]"><option value=""></option></select></td>
<td><select id="brands_select" name="dailysale[lubrand_id]"><option value=""></option></select></td>
<td><select id="models_select" name="dailysale[lumodel_id]"><option value=""></option></select></td>
<td><input class="texts" id="dailysale_qty" name="dailysale[qty]" type="text" /></td>
<td><input class="texts" id="dailysale_price" name="dailysale[price]" type="text" /></td>
<td><input class="texts" id="dailysale_total" name="dailysale[total]" type="text" /></td>
<td><input type="checkbox" class="delete_row"></td>
</tr>
$(function() {
$('#dailysale_qty, #dailysale_price').keyup(function() {
var last_item = $('.items').find('#dailysale_qty');
var qty = last_row.find('#dailysale_qty').val();
var price = last_row.find('#dailysale_price').val();
var sub_total = last_row.find('#dailysale_total');
var s_total = qty * price;
if (isNaN(s_total)) {
sub_total.val('0');
}
else
sub_total.val(s_total);
});
});
I am able to perform calculations on this row. However, when I dynamically add rows with jquery, calculations are not working on the other rows.
When the calculating function is bind a button onclick, everything works well. But not on input keyup as required. I want to perform calculations on the new added row with onkeyup on qty and price input fields.
Note than upon cloning, the ids are stripped of the current row and assigned to the new row for reference.
You probably not registering keyup function when you adding new row.
You should do :
$('#dailysale_qty, #dailysale_price').unbind('keyup').keyup( function(...
Every time you adding new row.
#Nosyara The suggested line of code isn't working. Here is how am adding new rows. The commented line is what you suggested.
$(function(){
$('#newitembtn').click(function(){
//$('#dailysale_qty, #dailysale_price').unbind('keyup').keyup(function() {
var last_row = $('#dailysale_tbody').find('tr:last');
var newrow = last_row.clone();
last_row.find('#items_select').removeAttr('id');
last_row.find('#brands_select').removeAttr('id');
last_row.find('#models_select').removeAttr('id');
last_row.find('#dailysale_qty').removeAttr('id');
last_row.find('#dailysale_price').removeAttr('id');
last_row.find('#dailysale_total').removeAttr('id');
newrow.find('#items_select').val('');
newrow.find('#brands_select').val('');
newrow.find('#models_select').val('');
newrow.find('#dailysale_qty').val('');
newrow.find('#dailysale_price').val('');
newrow.find('#dailysale_total').val('');
last_row.after(newrow);
});
});
});
i tried a code for summing values of two text boxes and store it into another text box. The summing is working properly. but i didn't getting the result into a text box.please help me with the code snippet..
<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
<script>
$(document).ready(function(){
$('#tablesum').find('input:text').each(function() {$(this).keyup(function(){
newSum.call(this);
});
});
});
function newSum() {
var sum=0;
var thisRow = $(this).closest('tr');
var total=0;
//iterate through each input and add to sum
$(thisRow).find("td:not(.total) input").each(function() {
console.log($(this).attr('id') );
sum += parseInt(this.value);
});
//change value of total
$(thisRow).find(".total").html(sum);
// the grand total
$('.total').each(function() {
total += parseInt($(this).html());
});
$('.result').val(total);
}
</script>
//html
<tr>
<td> i) Full Time employees</td>
<td class="tdright total" ><input type=text id="2.1_1_1" name="2.1_1_1" title="qry"></td>
<td><input type=text id="2.1_1_2" name="2.1_1_2" title="qry"></td>
<td><input type=text id="2.1_1_3" name="2.1_1_3" title="qry"></td>
</tr>
saving two text box values and outputting the result in anothor,
http://jsfiddle.net/stanze/kxu22e3h/
I'm using a checkbox to check all other checkboxes in a table.
After a checkbox being checked INSIDE the table (on change) I sum up every textbox value in the same tr.
It works well on Firefox and Chrome.
On IE11 and below (it's important for me that it works in EVERY browser) the first change of the "all" checkbox just tick the others, but doesn't sum up the textbox values.
On the second click he sums up but untick the checkboxes.
So it works in the wrong way because the first "change" is ignored or sth.
Sorry for my bad english and bad description.
<thead>
<tr>
<th>Auswahl <input type="checkbox" id="allcheck" /></th>
<th>Kunden-Nr.</th>
<th>Personal-Nr.</th>
<th>Vorname</th>
<th>Name</th>
<th>Gutscheintyp</th>
<th>Betrag €</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center"><input type="checkbox" name="check" /></td>
<td align="left">1</td>
<td align="left">2</td>
<td align="left">3</td>
<td align="left">4</td>
<td align="left" class="typ">5</td>
<td align="center" class="texttd">
<input type="text" class="txt" maxlength="5" onclick="this.select()" value="20.00" /></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="5"></th>
<th colspan="1"">Summe</th>
<th colspan="1" id="sum">0,00</th>
</tr>
</tfoot>
allcheck is the id of the checkbox, checking all others. :)
// TICK ALL CHECKBOXES
$('#allcheck').click (function () {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
});
// SUM UP TEXTBOXES IF CHECKBOX CHECKED
$('input[type="checkbox"]').change(function() {
var sum = 0.00;
$("table tr td input:checked").each(function(){
test = $(this).closest('tr').find('input[type="text"]').val();
test = test.replace( ",",".");
if (isNaN(test)) {
sum = 0.00;
}
sum += parseFloat(test, 10);
$("#sum").html(sum.toString().replace(".",","));
});
sum = parseFloat(sum, 10);
sum = sum.toFixed(2);
$("#sum").html(sum.toString().replace(".",","));
});
I hope these information are enough for you to help me a little. :)
Seems that changing "checked" property does not always trigger "change" event.
So you must move your sum calculation into separate function and call it explicitly in "#allcheck" click handler
(also cleaned your code a bit)
// TICK ALL CHECKBOXES
$('#allcheck').click (function () {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
updateSum();
});
// SUM UP TEXTBOXES IF CHECKBOX CHECKED
$('tbody input[type="checkbox"]').change(updateSum);
function updateSum() {
var sum = 0.00;
$("tbody input:checked").each(function(){
var test = $(this).closest('tr').find('input[type="text"]').val();
var testNum = parseFloat(test.replace( ",", "."));
if (!isNaN(testNum)) {
sum += testNum;
}
});
$("#sum").text(sum.toFixed(2).replace(".",","));
}
JSFiddle
instead of click event use change event for all check checbox. on change will fire after changing to new value and this.checked will give you correct value :
$('#allcheck').change(function() {
var checkedStatus = this.checked;
$('table tbody').find('input[type="checkbox"]').each(function () {
$(this).prop('checked', checkedStatus);
});
});
so I have some checkboxes, when each one is checked I'm able to get the id number I need from the associated table row and place them into my contacts array.
I also have a Select all checkbox which is meant to grab all the id numbers and stick them into the same array.
Having a bit of trouble trying to figure out the correct syntax to target the tbody, select every table row's data-id, or every table row's input's value.
http://jsfiddle.net/leongaban/7LCjH/
^ In my fiddle example you can see the numbers get added to my array (or the gray div for visualization).
How would you grab all the id numbers from the tbody rows from the Select all checkbox?
jQuery
var contacts = [];
// add multiple select / deselect functionality
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
//contacts.push($('#tbody').children(tr > td > input).val();)
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
$('#arrayContent').empty();
$('#arrayContent').append(contacts+',');
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
HTML
<table>
<thead>
<tr>
<td><input type="checkbox" id="selectall"/></td>
<td>Select All</td>
</tr>
<tr>
<td colspan="2"><hr/></td>
</tr>
</thead>
<tbody id="tbody">
<tr data-coworker-id="1">
<td><input type="checkbox" class="case" name="case" value="1"/></td>
<td>1</td>
</tr>
<tr data-coworker-id="2">
<td><input type="checkbox" class="case" name="case" value="2"/></td>
<td>2</td>
</tr>
<tr data-coworker-id="3">
<td><input type="checkbox" class="case" name="case" value="3"/></td>
<td>3</td>
</tr>
</tbody>
You can modify your select all handler like so:
$("#selectall").click(function () {
$('.case').attr('checked', this.checked).each(function() {
contacts.push($(this).val())
});
});
Here is a working example:
var contacts = [];
// add multiple select / deselect functionality
$("#selectall").click(function () {
var els = $('.case')
if (els.first().is(':checked') ) {
els.prop('checked', false);
$('#arrayContent').empty();
} else {
els.attr('checked', true);
$.each(els, function(index, el) {
contacts.push( $(el).val() );
});
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join( ', ' ) );
}
//contacts.push($('#tbody').children(tr > td > input).val();)
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function() {
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
$('#arrayContent').empty();
$('#arrayContent').append(contacts+',');
if ($(".case").length == $(".case:checked").length) {
$("#selectall").attr("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
and here is fiddle link :: http://jsfiddle.net/kkemple/7LCjH/24/
You can try this
$("#selectall").click(function () {
if($('.case:checked').length == $('.case').length){
//deselect all
$('.case').removeAttr("checked");
contacts = [];
}
else{
//select all
$('.case').attr("checked", "checked").each(function(){
var $tr = $(this).closest("tr");
var id = $tr.data('coworker-id');
contacts.push(id);
})
}
$('#arrayContent').empty();
$('#arrayContent').append(contacts.join(','));
//contacts.push($('#tbody').children(tr > td > input).val();)
});
jsFiddle
Use find instead of children and then loop the elements to add them to the array.
$("#selectall").click(function () {
$('.case').attr('checked', this.checked);
$('tbody').find("input").each(function () {
contacts.push($(this).val()+",");
});
$('#arrayContent').append(contacts);
});
The .find() and .children() methods are similar, except that the latter only travels a single level down the DOM tree.
Source: http://api.jquery.com/find/
I know this doesn't quite answer the question using children, but you can use $('#tbody').find('input') to find all the input fields within an element.
My head is not thinking right today. Could any of you help? =)
Only checked int values in second column need to be calculated and alerted in sum.
<table width="100%">
<tr><td>Product Name</td><td>Price $</td></tr>
<tr><td><input type="checkbox"> Product 1</td><td>200</td></tr>
<tr><td><input type="checkbox"> Product 2</td><td>300</td></tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$('input').change(function() {
var sum = 0;
$("input:checked").each(function(){
sum += parseInt($("input:checked").closest('td').next().html());
});
alert(sum);
});
</script>
Thanks.
Looks like you should be using $(this) inside the .each() to find the closest <td> to the currently selected checkbox in the loop.
// Bind to all checkboxes...
$('input[type="checkbox"]').change(function() {
var sum = 0;
$("input:checked").each(function(){
// Use $(this) here
sum += parseInt($(this).closest('td').next().html(), 10);
// Always use the optional radix to parseInt() -----^^^^^
});
alert(sum);
});
Try this:
$('input:checkbox').change(function() {
var sum = 0;
$("input:checked").each(function() {
sum += parseInt($(this).closest('td').next().text(), 10);
});
alert(sum);
});
You need to listen for the change event on all checkboxes, not only those :checked. Also, be sure to pass the radix parameter to parseInt. Finally, this will refer to the item being evaluated in the each function.
Example: http://jsfiddle.net/38AeT/