I have a simple invoicing page so I can invoice my client, however when I am going to perform multiplication to the quantity and price, the row total is not adding. Here's my jQuery so far.
$(":input").bind('keypress keydown keyup change', function(){
var price = parseFloat($(this).closest('.tr').find('.price').val(),10),
var qty = parseFloat($(this).closest('tr').find('.quantity').val(),10);
var v = '';
if(!isNaN(price) && !isNaN(qty)) {
v = price * qty;
}
$(this).closest('tr').find('.rowtotal').val(v.toString());
});
And this is my HTML:
<table>
<tr>
<td>1</td>
<td><input name="item_name[]"class="form-control"></td>
<td><input name="item_description[]"class="form-control"></td>
<td><input name="item_price[]"class="form-control price"></td>
<td><input name="item_quantity[]"class="form-control quantity"></td>
<td><span class="rowtotal">0.00</span></td>
</tr>
<tr>
<td>2</td>
<td><input name="item_name[]"class="form-control"></td>
<td><input name="item_description[]"class="form-control"></td>
<td><input name="item_price[]"class="form-control price"></td>
<td><input name="item_quantity[]"class="form-control quantity"></td>
<td><span class="rowtotal">0.00</span></td>
</tr>
</table>
Now on my page, it shows no error while reviewing the console, but it does not perform the operation that I have created following this post "Automatically updating input field with math using jquery?"
Any help is appreciated.
TIA
You've got a typo in this line:
var price = parseFloat($(this).closest('.tr').find('.price').val(),10),
^^ Shouldn't be a class selector
Should be:
var price = parseFloat($(this).closest('tr').find('.price').val(),10),
Next line is fine. Additionally, you can replace all those events with:
$(":input").on("input", function() {
// Triggers on any input event
});
You also have a few other issues:
There is no overload for parseFloat which takes two parameters
You are using .val() to set the text of the span. You need to use .text() instead
You should probably cache the <tr> selector. You don't need to go find it each time.
$(":input").on('input', function(){
var $tr = $(this).closest("tr");
var price = parseFloat($tr.find('.price').val()),
qty = parseFloat($tr.find('.quantity').val());
var v = '';
if(!isNaN(price) && !isNaN(qty)) {
v = price * qty;
}
$tr.find('.rowtotal').text(v.toString());
});
Working Example
Related
Good Afternoon... I am trying to do the addition of textbox value and show in total textbox using onBlur but not able to do the same. Textbox are generated using foreach loop as per buffaloID base on database which having same name and id. ( Ref. Attached Image) For first textbox, the function gives the value but for next textboxes, not able to get the same.
My Modal Table Code.
#foreach ($buffalodata as $item )
<tr>
<td>{{$item->buffaloID}}</td>
<td><input type="number" id="eachmorningmilk" name="eachmorningmilk" value="00"></td>
<td><input type="number" id="eacheveningmilk" name="eacheveningmilk" value="00"></td>
<td><input type="text" id="eachtotalmilk" name="eachtotalmilk" value="00" readonly></td>
</tr>
#endforeach
JavaScript Code for Function to run onblur
$("#eachmorningmilk").blur(function(){
eachbmorning = parseInt($("#addmilkbuffalo #eachmorningmilk").val());
eachbevening = parseInt($("#addmilkbuffalo #eacheveningmilk").val());
var eachbuffalototalmilk = eachbmorning + eachbevening;
document.getElementById('eachtotalmilk').value=eachbuffalototalmilk;
})
Ref. Images
Please use the onchange method and assign unique id and name to each field. You can refer to the below code and it will work.
HTML
<tr>
<td>{{$item->buffaloID}}</td>
<td><input type="number" id="eachmorningmilk{{$item->buffaloID}}" name="eachmorningmilk{{$item->buffaloID}}" onchange="totalmilk({{$item->buffaloID}})" value="00"></td>
<td><input type="number" id="eacheveningmilk{{$item->buffaloID}}" onchange="totalmilk({{$item->buffaloID}})" name="eacheveningmilk{{$item->buffaloID}}" value="00"></td>
<td><input type="text" id="eachtotalmilk{{$item->buffaloID}}" name="eachtotalmilk{{$item->buffaloID}}" value="00" readonly></td>
JS
function totalmilk(id){
var morningmilk = "#eachmorningmilk"+id;
var eveningmilk = "#eacheveningmilk"+id;
var totalmilk = "eachtotalmilk"+id;
eachbmorning = parseInt($(morningmilk).val());
eachbevening = parseInt($(eveningmilk).val());
var eachbuffalototalmilk = eachbmorning + eachbevening;
document.getElementById(totalmilk).value=eachbuffalototalmilk;
}
I have the following table
<table id="customFields" class="table table-bordered table-hover additionalMargin alignment">
<thead>
<tr>
<th colspan="2"></th>
<th>Some Title</th>
</tr>
</thead>
<tbody>
<tr>
<td><label class="subjectline" for="User1">User NOC M1</label></td>
<td id="slLabel">SLA</td>
<td id="slInput"><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td>
<td><a class="addCF" href="javascript:void(0);">+ additional user</a></td>
</tr>
</tbody>
</table>
I then have the following javascript to add additional rows
$(function() {
$(".addCF").click(function(){
$("#customFields").append('<tr><td></td><td>SL_B</td> <td><input type="text" name="slOptions[User][NOC M1]" class="form-control" id="User1"></td> <td> Remove</td></tr>');
});
$("#customFields").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});
This currently works how I want it to. However, there are a couple of things I am having issues with.
Firstly, when you first view it, you will see the label SL_A. In the cloned version, I manually set it to SL_B. All other clones then have SL_B. What I am trying to do is have SL_ followed by the next letter in the alphabet. So the third row should be SL_C. I am not too sure how I can achieve this.
My second issue relates to the name of the cloned input. At the moment, they all have the same name e.g. slOptions[User][NOC M1]
When a new row is added, the name should change to something unique, maybe using the additional letter of the alphabet above e.g. slOptions[User][NOC M1B]
Would it be possible to achieve these things?
I have set up a Fiddle for demonstration
Thanks
You could store a reference to the possible letters as well as your current letter and then within your function determine the appropriate one to use :
// Store the possible letters
var possibleLetters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
// Store the current letter
var currentLetter = 'A';
$(function() {
$(".addCF").click(function(){
// Resolve the next letter to add
var nextIndex = possibleLetters.indexOf(currentLetter) + 1;
// Update your reference
currentLetter = possibleLetters[nextIndex];
// Append it
$("#customFields").append('<tr><td></td><td>SL_' + currentLetter + '</td> <td><input type="text" name="slOptions[User][NOC M1' + currentLetter + ']"...');
// More code omitted for brevity
});
// Still more code omitted for brevity
});
You can see an example of this in action here and demonstrated below :
Here is your solution for both the issues:
See: https://jsfiddle.net/pdxgrpqz/
$(function() {
alp = "A";
$(".addCF").click(function(){
alp = (alp.substring(0,alp.length-1)+String.fromCharCode(alp.charCodeAt(alp.length-1)+1));
$("#customFields").append('<tr><td></td><td>SL_'+alp+'</td> <td><input type="text" name="slOptions[User][NOC M1'+alp+']" class="form-control" id="User1"></td> <td> Remove</td></tr>');
});
$("#customFields").on('click','.remCF',function(){
$(this).parent().parent().remove();
});
});
I need your help!
I have fiddle and what I want is multiplicate two td's values and the result go to the next td.
$(document).ready(function(){
$( "input[id^='unitval']" ).keyup(function() {
var input_value = parseFloat($(this).val());
var Cant = $("#item_Cant").text();
var totval = (input_value * Cant);
if (!isNaN(input_value)) { // the input is a number
//$("#totval1").val(totval); // update second field
$(this).closest('td').next().find('input').val(totval);
} else { // the input wasn't a number
$("#totval1").val("not a number?"); // show an error mesage
}
});
});
But just works with the first row because the second one still multiplicating with the td of first row not the actual td
I tried to change the:
var Cant = $("#item_Cant").text();
with
var Cant = $("input[id^='item_Cant']").text();
But don't works, I have not idea why, even first row.
But in this line I need the correct Jquery for get the last td input value in the same tr.
I tried many lines but without success, hope you can understand me.
Thanks for your help.
You are always referring to item_Cant ID every time you do your calculation. You need to find the quantity element with respect to your current input field.
Here's one approach that'll work with your current structure:
$(document).ready(function () {
$("input[id^='unitval']").keyup(function () {
var input_value = parseFloat($(this).val());
var Cant = $(this).closest('tr').find('[id^="item_Cant"]').text();
var totval = (input_value * Cant);
if (!isNaN(input_value)) { // the input is a number
//$("#totval1").val(totval); // update second field
$(this).closest('td').next().find('input').val(totval);
} else { // the input wasn't a number
$("#totval1").val("not a number?"); // show an error mesage
}
});
});
Here's a fiddle: http://fiddle.jshell.net/P89Tj/1/
You cannot have multiple identical ids on a page.
Use classes instead:
$(document).ready(function(){
$( "input.unitval" ).keyup(function() {
var input_value = parseFloat($(this).val());
var Cant = $(this).parent().prev().text();
var totval = (input_value * Cant);
if (!isNaN(input_value)) { // the input is a number
//$("#totval1").val(totval); // update second field
$(this).parent().parent().find('.totval').val(totval);
} else { // the input wasn't a number
$("#totval1").val("not a number?"); // show an error mesage
}
});
});
<table width="500" border="1">
<tr>
<td>Quantity</td>
<td>VAL1</td>
<td>RESULT Quantity*VAL1</td>
<td>VAL2</td>
<td>RESULT Quantity*VAL2</td>
</tr>
<tr>
<td>5</td>
<td><input class="unitval" type="text"/></td>
<td><input readonly class="totval" type="text"/></td>
<td><input class="unitval" type="text"/></td>
<td><input readonly class="totval" type="text"/></td>
</tr>
<tr>
<td>4</td>
<td><input class="unitval" type="text"/></td>
<td><input readonly class="totval" type="text"/></td>
<td><input class="unitval" type="text"/></td>
<td><input readonly class="totval" type="text"/></td>
</tr>
</table>
http://fiddle.jshell.net/8CGXf/
I have a table with a template to insert rows, I would like to make those rows clickable so that I can edit them. How do I append an href value to the template?
My Template
<tr class="template" style="display:none;">
<td><span class="item_num"> Num </span></td>
<td><span class="item_desc"> Description </span></td>
<td><span class="item_price"> Price </span></td>
<td><span class="item_ref">ref</span></td>
</tr>
My Javascript
var newRow = $('#quote .template').clone().removeClass('template');
var quoteItem = {
number: 1,
description: myDescriptionVariable,
price: myPriceVariable,
};
template(newRow, quoteItem)
.insertAfter('#quote tr.template')
.fadeIn()
function template(row, quoteItem) {
row.find('.item_num').text(quoteItem.number);
row.find('.item_desc').text(quoteItem.description);
row.find('.item_price').text(quoteItem.price);
row.find('.item_ref').attr('href','hello');
return row;
}
You can use .data()
row.find('.item_ref').data('ref','hello');
with
<span class="item_ref" data-ref="" > Edit</span>
Then you can use it like --
console.log($('.item-ref').data('ref'));
If you just wish to store data somehow then this might be useful. Let me know if there's something more you want to do. Or what kind of data href holds and how you want to use it further.
UPDATE
From what I understand up till now is, you want to add rows dynamically that needs to editable after insertion. Each row contain some fields with certain values. And you want to save ref in item_ref class.
So here's how you can do it -
var num = 1;
var myDescriptionVariable = 111;
var myPriceVariable = 999;
// You may have some other element triggers cloning
$("button").click(function(){
var newRow = $('#quote .template').clone().removeClass('template');
var quoteItem = {
number: num,
description: 'Description ' + myDescriptionVariable, // added to distinguish items
price: myPriceVariable + ' USD', // added to distinguish items
linkToPopup: myDescriptionVariable + '_link_goes_here' // added to distinguish items
};
template(newRow, quoteItem)
.insertAfter('#quote tr.template')
.show();
});
function template(row, quoteItem) {
row.find('.item_num').text(quoteItem.number);
row.find('.item_desc').text(quoteItem.description);
row.find('.item_price').text(quoteItem.price);
// here 'href' will hold desired link_to_popup
row.find('.item_ref').data('href',quoteItem.linkToPopup);
myDescriptionVariable+= 1; // added to distinguish items
myPriceVariable+=2; // added to distinguish items
num+=1; // added to distinguish items
return row;
}
$("#quote").on("click", ".item_ref",function(){
// this will give to desired link_to_pop_val
alert($(this).data('href'));
});
I've added a button to give demonstration. This approach definitely avoid unnecessary DOM elements like hidden inputs to be added for each row. With .data() you same multiple kind of information for every field like -
$("span").data('key_1', value_1);
$("span").data('key_2', value_2);
$("span").data('key_2', value_3);
fiddle for demonstration
I think that's what you want to do and should serve the purpose. :)
There are actually a few ways to do this, one of them being:
Add some inputs to your template that are hidden
Bind a click event to the row that will hide the spans and show the input
You would of course need a save button and do something with the values, but I didn't do that part.
A condensed not fully working demo: http://plnkr.co/edit/GGM0d9wfNcoZBd5kKCwA
<tr class="template" style="display:none;">
<td><span class="item_num"> Num </span><input type="text" style="display:none" /></td>
<td><span class="item_desc"> Description </span> <input type="text" style="display:none" /></td>
<td><span class="item_price"> Price </span><input type="text" style='display:none' /></td>
<td><span class="item_ref">ref</span><input type="text" style='display:none' /></td>
</tr>
jquery:
$(document).on('click', '#quote tr', function(e) {
$('span', this).hide();
$('input', this).show();
});
$('#add').on('click', function(e) {
var newRow = $('#quote .template').clone().removeClass('template');
var quoteItem = {
number: 1,
description: 'myDescriptionVariable',
price: 100,
};
template(newRow, quoteItem)
.insertAfter('#quote tr.template')
.fadeIn()
});
function template(row, quoteItem) {
row.find('.item_num').text(quoteItem.number).next().val(quoteItem.number);
row.find('.item_desc').text(quoteItem.description).next().val(quoteItem.description);
row.find('.item_price').text(quoteItem.price).next().val(quoteItem.price);
row.find('.item_ref').attr('href','hello').next().val('hello');
return row;
}
I have a table that looks like this:
<table>
<tr>
<td class="packing-vol">0.19</td>
<td class="qty-cell"><input type="text" name="qty[]" class="qty" value="2" /></td>
</tr>
<tr>
<td class="packing_total">0.70</td>
<td class="qty-cell"><input type="text" name="qty[]" class="qty" value="1" /></td>
</tr>
</table>
I'm looping through each occurence of .packing-vol getting it's text, then I want to get the qty from the same row so I go up to it's parent then drill into the .qty class. But when I alert(qty) i get 'undefined' message.
var total = 0;
jQuery('.packing-vol').each(function(i) {
var qty = jQuery(this).parent("td.qty-cell .qty").val();
alert(qty);
var cur = parseFloat(jQuery(this).text());
if(!isNaN(cur)){
total = total + cur;
}
});
I think you should do this:
var qty = jQuery(this).parent().find("td.qty-cell .qty").val();
You need to go 1 level up (using .parent) and then find your field inside with .find
parent is just one level upwards. You can't use it to go inside trees again.
parents is multiple levels upwards. You can't use it to go inside trees again.
You can use parent/parents and then use find to do what you want, or even better:
var total = 0;
jQuery('.packing-vol').each(function(i) {
var qty = jQuery(this).parent().children('.qty-cell').children('.qty').val();
alert(qty);
var cur = parseFloat(jQuery(this).text());
if (!isNaN(cur)){
total = total + cur;
}
});
You could also use find, but it is slower than going directly inside, because it has to search the DOM object.
But you could also do:
var qty = jQuery(this).parent().find("td.qty-cell .qty").val();
Instead of
var qty = jQuery(this).parent("td.qty-cell .qty").val();
Try:
var qty = jQuery(this).parent().find(".qty").val();