I have this type of exercise in jquery. Go here http://jsfiddle.net/LAntL/3/
For Item 1, if I add #no of quantity of Size 7, it should be multiplied by Item 1's Price displayed in text box and the result should be shown in Item 1's Ext textbox.
then if I do same for size 8.5 of Item 1, it should perform the same.
But the Ext will have (Price x Size 7 Qty) + (Price x Size 8.5 Qty)
Same will happen for Item 2. And along with this, Total quantity and Total price will be updated on keypress event of each textbox.
I'm a beginner in jquery and got this killing exercise.
Please help someone.
Thanks in advance.
I'd suggest that you assign some classes to your fields so that jQuery can easily find them:
"lineQty" - add this class to all the qty fields
"lineTotal" - add this class to all the line total fields
"linePrice" - I think you can see where I'm going with this
"lineExt" - add to all ext fields
Then the following .keyup function will do the updates on all lines automatically.
$(document).ready(function() {
$(".lineQty").keyup(function() {
// 'this' is the field the user is typing in
// so find the tr that it belongs to
var $row = $(this).closest("tr"),
total = 0,
// get the price for the current row:
price = $row.find(".linePrice").val();
// loop through every qty field for the current row and add
// the entered value to the total, using unary plus to convert
// to a number, and a default of 0 if non-numeric data is entered
$row.find(".lineQty").each(function() {
total += +this.value || 0;
});
// set the total for the current row
$row.find(".lineTotal").val(total);
// set the price for the current row
$row.find(".lineExt").val(total * price);
// now add up the grand totals
var grandTotal = 0,
grandPrice = 0;
$(".lineTotal").each(function() {
grandTotal += +this.value || 0;
});
$(".lineExt").each(function() {
grandPrice += +this.value || 0;
});
$("[name='data[totalQuantity]']").val(grandTotal);
$("[name='data[totalPrice]']").val(grandPrice);
});
});
Working demo: http://jsfiddle.net/LAntL/5/ (only works on the first line because I couldn't be bothered assigning classes to all your fields - you would need to add the classes I talk about above to every field as per what I did for the first line).
Okay, you want to learn something, so I will describe a possible way, and don't give you the finished solution.
First of all, you should mark the tables which contains items with class="item". Now you can write a selector in jQuery which gets every item separately. Then you should mark all cells (<td>) which have a special function. Total, Price, Disc and Ext. Your table should look like this:
<table class="item">
<tr>
<td>...</td>
<td class="total">...</td>
<td class="price">...</td>
<td class="disc">...</td>
<td class="ext">...</td>
</tr>
</table>
Now you can write a selector for all input fields inside of the table with class "item".
$('.item input').change(function(){});
Inside of this function you can handle the calculation. At first I would recommend to get the item:
$('.item input').change(function(){
var item = $(this).closest('table.item');
var totalInput = $(item).find('.total input');
var priceInput = $(item).price('.price input');
// ...
var allWriteableInputs = $(item).find('input[readonly!="readonly"]');
// do the calculation
var sum = 0;
$(allWriteableInputs).each(function(i, input){
sum += $(input).val();
});
$(totalInput).val(sum);
});
If you go this way, you don't need:
The onkeypress="return isNumberKey(event);" and
the id="product1Total" for every inputbox
I hope this thought-provoking impulse helps you a little bit. You have still a long way to go, my young padawan ;-)
Related
I'm having troubles thinking a solution to this problem.
I have this table and a JSON like this one:
{:id=>"e-123",
:subject_initials=>"IN",
:grade=>"12"}
I need to search on the table the id of the person (which in this case is "e-123") and search on the first row the initials of the subject and put the grade on the X and Y position.
The result of the example above should be something like this
Any idea how to do this?
Need to search through the heading inputs to get a column index and search through the user id inputs to get a row index then use eq() method to isolate the one you need to update
var $subjectInput = $('tr').first().find('input').filter(function() {
return this.value === data.subject_initials
});
var $idInput = $('tr').find('td:eq(1) input').filter(function() {
return this.value.toLowerCase() === data.id
});
var colIdx = $subjectInput.parent('td').index();
var rowIdx = $idInput.closest('tr').index();
$('tr').eq(rowIdx).find('td').eq(colIdx).find('input').val(data.grade)
Adding some additional classes on these 2 types of inputs would help make the selectors for finding them easier
If the rows are generated dynamically adding an ID to the row and course name class to the data entry inputs you could simplify the whole thing immensely
<tr id="e-123">
.....
<input class="form-control course_IN">
JS
$('#' + data.id).find('input.course_' + data.subject_initials).val(data.grade)
DEMO
function addTotal(){
var txtTotal = document.getElementById('txtTotal').value;
var txtGrandTotal = document.getElementById('txtGrandTotal');
txtGrandTotal.value += parseInt(txtTotal);
}
this is delete code
$(".delete-row").click(function(){
$("table tbody").find('input[name="record"]').each(function(){
if($(this).is(":checked")){
$(this).parents("tr").remove();
}
});
});
if the user deletes the row then the values from the Grand Total Should decrease. anything I should do any body
how to add values to the "Grand Total" to the Total input box Total is the dynamically created table data and I want to add values to that "Grand Total input box" but values are appending not the adding and also I have added an image of the screen or output. Thanks in advance.
Instead of
txtGrandTotal.value += parseInt(txtTotal);
as txtGrandTotal.value isn't converted to int, it is string
so you should do:
if (!txtGrandTotal.value)
txtGrandTotal.value = parseInt(txtTotal);
else
txtGrandTotal.value = parseInt(txtGrandTotal.value) + parseInt(txtTotal);
hey can I get your source code I need form IP billing master as you have? if you don't mind
I am displaying an alert box after clicking on a button but the string text is going down.
Here is my code:
jQuery('input[name="addtocart"]').each(function()
{
jQuery(this).on("click", function(event)
{
qty = jQuery(this).parent().find('input[name="qty"]').val();
var qty1 = parseFloat(qty);
qth = jQuery(this).parent().parent().find('.qtyonhand').text();
var qth1 = parseFloat(qth);
itemName = jQuery(this).parent().parent().parent().find('.cell-desc
span').text();
if(qty1 > qth1){
alert("For the following item, the ordered quantity exceeds the
current available quantity.Please adjust the quantity and
retry.\n"+itemName+"-"+"Available Qty:"+qth1);
}
});
});
Here is the image:
In the above image, availability text is displaying on the next line.
How can I display the string in a single line? Please help.
It seems like you need to replace the newlines with spaces.
Add this code before the if statement:
itemName = itemName.replace(/\n/g, " ");
Regex comes from this thread
if(qty1 > qth1){
alert("For the following item, the ordered quantity exceeds the
current available quantity.Please adjust the quantity and
retry."+itemName+"-"+"Available Qty:"+qth1);
}
Please remove the \n from the alert content
I have some code that appends new table rows when data is inserted into an existing row.
You can see the code in action here.
On entering a product, the new row is appended to the table with a unique input name.
The user is then required to enter a price and qty.
What I want is a 2 step calculation. In the input box Total, I want the sum of price * qty for that specific row. Secondly, I want the div grandtotal to display the sum of all the input boxes, all dynamic to the number of rows the user inserts.
Normally I would just use:
function fill() {
var txt8 = document.getElementById("TextBox8").value;
var txt9 = document.getElementById("TextBox9").value;
document.getElementById("TextBox10").value = txt8 + txt9;
}
But this is for static a static table where names and ID's are known. How do I make this work for a dynamically generated table?
Apologies, I forgot to give you the fiddle link: http://jsfiddle.net/yUfhL/230/
To get all inputs that have an ID that starts with linetotal, you could write the following in jQuery:
$('input[id^=linetotal]')
Now, to calculate the total, just iterate over the collection:
var total = 0;
$('input[id^=linetotal]').each(function() {
total += parseInt(this.value, 10) || 0;
});
Your output, then:
$('#grandtotal').text(total);
Edit
To first calculate the line totals for every line, you could iterate through them like so:
$('table.order-list tr').each(function() {
var price = parseInt( $('input[name=price]', this).val(), 10 );
var qty = parseInt( $('input[name=qty]' , this).val(), 10 );
$('input[id^=linetotal]', this).val(price * qty);
});
Of course, you wouldn't have to iterate over all rows at all times. At the change event, you're only interested in the current row, which is accessible by $(this).closest('tr')
I'm working on a pretty big table/form that is dynamically created depending on stock availability. The table has 5 fields: Code, Prod.Name, Amount, Price and SubTotal. The user is supposed to set a number in the Amount field and then there's a jQuery script that multiplies that amount for the price to display the SubTotal. In the table, a product looks like this:
<tr>
<td>Princess 01</td>
<td>Conjunto corpiño y cola less <strong>Talle 85</strong></td>
<td><input type="text" id="princess-lingerie-id-963" name="[princess-lingerie][id_963]" value=""></td>
<td>$<input type="text" id="price_princess-lingerie-id-963" value="99" readonly="readonly"/></td>
<td id="subTotal_princess-lingerie-id-963" name="subTotal"></td>
</tr>
My problem is that I have many different products that belong to different product categories, so while this belongs to the "princess-lingerie" (don't laugh) category, a product from the "cosmetica" category looks like this:
<tr>
<td>D02/3</td>
<td>Magic Dual aroma Frutos Rojos</td>
<td><input type="text" id="cosmetica-stock-id-1008" name="[cosmetica-stock][id_1008]" value=""></td>
<td>$<input type="text" id="price_cosmetica-stock-id-1008" value="26" readonly="readonly"/></td>
I have actually already created the little bit of logic which would work for only one field, but I don't know how to extend it to the whole table. Could anyone give me a hand with it? ...I'm a little bit overwhelmed and don't know where to start right now.
$(document).ready(function(){
$("#princess-lingerie-id-963").keyup(function() {
var howMany = parseInt($("#princess-lingerie-id-963").val());
var subTotal = parseInt($("#price_princess-lingerie-id-963").val()) * howMany;
//assign subTotal to the td
$("#subTotal_princess-lingerie-id-963").html(subTotal);
});
});
Shad is right to suggest adding useful classes. To handle the calculations in a sustainable way across a multi-row table, you'll also need a way to generically identify which row you're calculating on. I'm sure this could be greatly improved, but here's a basic example:
The jsfiddle demo is here.
// there are two cells where the 'id' has this pattern, but only one is selectable (the other is read-only)
// still, it would be better to give it a class if at all possible to avoid confusion
// and possible tampering by users
$("input[id*=-id-]").keyup(function() {
var howMany = parseInt($(this).parent().next().find('input').val(), 10);
var subTotal = parseInt($(this).val(), 10) * howMany;
//assign subTotal to the td
$(this).parent().next().next().html(subTotal);
});
EDIT:
Updated to include radix and condition for blank value:
http://jsfiddle.net/RzBeM/2/
$("input[id*=-id-]").keyup(function() {
var howMany = parseInt($(this).parent().next().find('input').val(), 10);
var subTotal = parseInt($(this).val(), 10) * howMany;
if (isNaN(subTotal)) subTotal = 0;
//assign subTotal to the td
$(this).parent().next().next().html(subTotal);
});
First, I would start giving your inputs useful classes, like 'qty' and 'price', and then the final cell can have a class of 'subtotal'. That makes the next step possible:
jQuery('#TABLEID tr').each(function(i,E){
var subT=parseInt(jQuery(E).find('.qty').val(),10) * parseFloat(jQuery(E).find('.price').val());
jQuery(E).find('.subtotal').text('$' + subT.toFixed(2));
});
I use jQuery to iterate over each tr in the table, and run the necessary calculations.
The final solution could use a further tweaked version:
jQuery(function(){
jQuery('.qty').keyup(function(){
var E=jQuery(this).parents('tr').filter(':first');
var subT=parseInt(E.find('.qty').val(),10) * parseFloat(E.find('.price').val());
E.find('.subtotal').text('$' + subT.toFixed(2));
});
});