I need to create sum of the values selected, but i have small problem with the jquery bit.
My html table
<TR>
<TD>
<INPUT disabled onchange=updateDetails() value=33441 CHECKED type=checkbox name=invoiceRow dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees for Searches</TD>
<TD>285.00</TD></TR>
<TR>
<TD><INPUT onchange=updateDetails() value=36486 CHECKED type=checkbox name=invoiceRow dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees</TD>
<TD>3213.03</TD></TR>
my javascript is:
where #InvoiceItemsRows is <tbody> tag
function updateDetails() {
$("#InvoiceItemsRows input[type=checkbox][checked]").parent().last().each(
function(index, value) {
alert(value.html());
}
);
}
Javascript, maybe not as fancy as some of the other ones people have posted but it makes sense.
$(document).ready(function() {
$('[name=invoiceRow]').click(function() {
updateDetails();
});
function updateDetails() {
var total = 0;
var currentnum = 0;
$("input:checked").each(
function(index, value) {
currentnum = $(this).val();
currentnum = Number(currentnum);
total = total + currentnum;
});
alert(total);
}
});
HTML
<TR>
<TD>
<INPUT disabled value="33441" CHECKED type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees for Searches</TD>
<TD>285.00</TD></TR>
<TR>
<TD><INPUT value="36486" CHECKED type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"><INPUT value=false type=hidden name=isProfFee></TD>
<TD>Professional fees</TD>
<TD>3213.03</TD></TR>
I fixed some of the missing quotes you may want to finish fixing them though.
Try this (you have to close <Input> tags):
function updateDetails() {
var sum = 0;
$("#InvoiceItemsRows input[type=checkbox]:checked").each(
function() {
sum += parseFloat($(this).closest('tr').children('td:eq(2)').text());
}
);
return sum;
}
alert(updateDetails());
You'll have to change:
$("#InvoiceItemsRows input[type=checkbox][checked]")
To:
$("#InvoiceItemsRows input:checked")
That new rule will return all 'checked' elements. Have a look at the documentation of the :checked selector.
Try this:
var total = 0;
$('#InvoiceItemsRows input:checked').each(function() {
total += $(this).val();
});
I suspect you want to total what's in the <td> though?
you have invalid html your your values need quotes
<tr>
<td>
<input disabled="disabled" onchange="updateDetails()" value="33441" checked="checked" type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"> <input type="hidden" name="isProfFee">
</td>
<td>
Professional fees for Searches
</td>
<td>
285.00
</td>
</tr>
<tr>
<td>
<input onchange="updateDetails()" value="36486" checked="checked" type="checkbox" name="invoiceRow" dpieagent_iecontroltype="5"> <input type="hidden" name="isProfFee">
</td>
<td>
Professional fees
</td>
<td>
3213.03
</td>
</tr>
and then
$("#InvoiceItemsRows input:checked")
Related
I have data that is displayed in the form of a table and each row has a checkbox.
I am trying to fetch the data of each row when the checkbox is clicked against that row.
<tr>
<td><input type="text" name="child_name"></td>
<td><input type="text" name="child_age"></td>
<td><input type="checkbox" ></td>
</tr>
<tr>
<td><input type="text" name="child_name"></td>
<td><input type="text" name="child_age"></td>
<td><input type="checkbox" ></td>
</tr>
These will get generated dynamically, so the naming needs to same for the input box, however when i am fetching the value typed by the user,it fetches the value of only first row, and the values is getting repeated multiple times
$(document).ready(function(){
$('input[type="checkbox"]').click(function(){
if($(this).prop("checked") == true){
$tr = $(this).closest('tr');
var arr = [];
var data = $tr.children("td").map(function(){
var one = $("[name='child_name']").val();
var two = $("[name='child_age']").val();
arr.push(one)
arr.push(two)
return arr;
}).get();
console.log(data);
$('#post-result').append(data);
}
else if($(this).prop("checked") == false){
console.log("Checkbox is unchecked.");
}
});
});
Can anyone please tell how to resolve the issue
The name attribute in this case could complicate things a little bit. What I would do is use data-attributes to have specific identifiers for each row. Something like this:
UPDATED
I changed the behavior to work with dynamically added rows.
Using $(document).on("click"... you can affect future elements of the same type while $("[type='checkbox']").click() works only for currently existing elements.
I also took some liberty in expanding the example.
var children = [];
$(document).on("click", ".child-selector", function() {
var id = $(this).data("id");
if($(this).is(":checked")) {
var info = [];
info.push($(".child-name[data-id='"+ id +"']").val());
info.push($(".child-age[data-id='"+ id +"']").val());
console.log(info);
// An example of using objects to give some structure to the data
// and then store it to an array with all the checked rows
var child = {};
child.id = id;
child.name = $(".child-name[data-id='"+ id +"']").val();
child.age = $(".child-age[data-id='"+ id +"']").val();
children.push(child);
console.log(children);
} else {
console.log("Checkbox is unchecked.");
// An example of removing the specific children from the array
children.forEach(function(child, index) {
if(child.id == id) {
children.splice(index, 1);
}
});
console.log(children);
}
});
var clickCounter = 0;
var dataCounter = 13;
$("#add-child").click(function() {
var html = '<tr>'+
'<td><input type="text" class="child-name" data-id="'+ dataCounter +'" value="Child '+ clickCounter +'"></td>'+
'<td><input type="text" class="child-age" data-id="'+ dataCounter +'" value="'+ clickCounter +'"></td>'+
'<td><input class="child-selector" type="checkbox" data-id="'+ dataCounter +'"></td>'+
'</tr>';
$("table").append(html);
clickCounter++;
dataCounter++;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" class="child-name" data-id="9" value="John Connor"></td>
<td><input type="text" class="child-age" data-id="9" value="12"></td>
<td><input class="child-selector" type="checkbox" data-id="9"></td>
</tr>
<tr>
<td><input type="text" class="child-name" data-id="10" value="Jane Connor"></td>
<td><input type="text" class="child-age" data-id="10" value="12"></td>
<td><input class="child-selector" type="checkbox" data-id="10"></td>
</tr>
<tr>
<td><input type="text" class="child-name" data-id="11" value="Tom Connor"></td>
<td><input type="text" class="child-age" data-id="11" value="13"></td>
<td><input class="child-selector" type="checkbox" data-id="11"></td>
</tr>
<tr>
<td><input type="text" class="child-name" data-id="12" value="T800"></td>
<td><input type="text" class="child-age" data-id="12" value="1"></td>
<td><input class="child-selector" type="checkbox" data-id="12"></td>
</tr>
</table>
<button type="button" id="add-child">Add Child</button>
Now, if you need to send the data via post you should review your usage of name because as it currently is it would only send one value.
You can use the context parameter of $(selector [, context]) to only search inside the current <tr>:
$(document).ready(function() {
$('input[type="checkbox"]').click(function() {
if ($(this).prop("checked") == true) {
$tr = $(this).closest('tr');
var arr = [];
var one = $("[name='child_name']", $tr).val();
var two = $("[name='child_age']", $tr).val();
arr.push(one)
arr.push(two);
console.log(arr);
$('#post-result').append(arr);
} else if ($(this).prop("checked") == false) {
console.log("Checkbox is unchecked.");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="text" name="child_name" value="A Name"></td>
<td><input type="text" name="child_age" value="A Age"></td>
<td><input type="checkbox"></td>
</tr>
<tr>
<td><input type="text" name="child_name" value="B Name"></td>
<td><input type="text" name="child_age" value="B Age"></td>
<td><input type="checkbox"></td>
</tr>
</table>
<pre id="post-result"></pre>
I have a form with various items with checkboxes and those items may be repeated multiple times. I'd like to have another table or form that shows all those items and has a running total for the number of items that are checked and it updates as they are checked.
Let's say I've got the initial form like this:
<form name="myform">
<input type="checkbox" name="model1" value="2">2 x model1
<input type="checkbox" name="model2" value="2">2 x model2
<input type="checkbox" name="model3" value="2">2 x model3
<input type="checkbox" name="model1" value="1">1 x model1
<input type="checkbox" name="model1" value="4">4 x model1
<input type="checkbox" name="model3" value="5">5 x model3
<p>
Totals: <br>
<input type="text" name="totalmodel1" value="0" size="2"><br>
<input type="text" name="totalmodel2" value="0" size="2"><br>
<input type="text" name="totalmodel3" value="0" size="2"><br>
</form>
How can I get the totals to update as the items are checked off. I've used javascript to update lots of other stuff like this and I've found examples that will add up my choices if they are all to be added together, but I haven't been able to successfully make it work with adding multiple items separately.
Any and all help is appreciated.
I made a JS Fiddle as an example of where to start... Here
Basically what I did was:
Relate the input text to checkboxes:
var modelNum = ($(this).attr("name")).slice(($(this).attr("name").length) - 1, $(this).attr("name").length);
var child = "totalmodel" + modelNum;
Make input text only appear if related checkbox is checked:
if (this.checked) {
$("input").each(function() {
if ($(this).attr("name") == child) {
$(this).show();
}
});
} else {
$("input").each(function() {
if ($(this).attr("name") == child) {
$(this).hide();
}
});
}
And show you how to get the value of text (assuming user will enter integer):
$("input").each(function(){ //This is how you get the value of each...
if($(this).is(":text")){
var value = $(this).attr("value");
}
});
So I had previously found an example at http://www.madirish.net/11 that did what I wanted but it was only for one item to total up. I needed to total multiple items separately. I had been trying to modify his code to my needs and it wasn't working, but then I realized his code wouldn't work when I pasted it into jsfiddle. So I tried it on my own server and it worked. I gave up on jsfiddle (I'm sure it's my fault somehow that it didn't work) and began testing on my own server. Here's an example output of what I did to get it to work (please ignore the ugly layout...I didn't need it to be pretty while testing).
<script type="text/javascript">
function checkTotal1() {
document.listForm.total1.value = '';
var sum = 0;
if (document.getElementsByName("choice1").length == 1) {
if (document.listForm.choice1.checked) {
sum = sum + parseInt(document.listForm.choice1.value);
}
} else {
for (i=0;i<document.listForm.choice1.length;i++) {
if (document.listForm.choice1[i].checked) {
sum = sum + parseInt(document.listForm.choice1[i].value);
}
}
}
document.listForm.total1.value = sum;
}
function checkTotal2() {
document.listForm.total2.value = '';
var sum = 0;
if (document.getElementsByName("choice2").length == 1) {
if (document.listForm.choice2.checked) {
sum = sum + parseInt(document.listForm.choice2.value);
}
} else {
for (i=0;i<document.listForm.choice2.length;i++) {
if (document.listForm.choice2[i].checked) {
sum = sum + parseInt(document.listForm.choice2[i].value);
}
}
}
document.listForm.total2.value = sum;
}
function checkTotal3() {
document.listForm.total3.value = '';
var sum = 0;
if (document.getElementsByName("choice3").length == 1) {
if (document.listForm.choice3.checked) {
sum = sum + parseInt(document.listForm.choice3.value);
}
} else {
for (i=0;i<document.listForm.choice3.length;i++) {
if (document.listForm.choice3[i].checked) {
sum = sum + parseInt(document.listForm.choice3[i].value);
}
}
}
document.listForm.total3.value = sum;
}
function checkTotal4() {
document.listForm.total4.value = '';
var sum = 0;
if (document.getElementsByName("choice4").length == 1) {
if (document.listForm.choice4.checked) {
sum = sum + parseInt(document.listForm.choice4.value);
}
} else {
for (i=0;i<document.listForm.choice4.length;i++) {
if (document.listForm.choice4[i].checked) {
sum = sum + parseInt(document.listForm.choice4[i].value);
}
}
}
document.listForm.total4.value = sum;
}
function checkTotal5() {
document.listForm.total5.value = '';
var sum = 0;
if (document.getElementsByName("choice5").length == 1) {
if (document.listForm.choice5.checked) {
sum = sum + parseInt(document.listForm.choice5.value);
}
} else {
for (i=0;i<document.listForm.choice5.length;i++) {
if (document.listForm.choice5[i].checked) {
sum = sum + parseInt(document.listForm.choice5[i].value);
}
}
}
document.listForm.total5.value = sum;
}
</script>
<form name="listForm">
<table>
<tr>
<td align="left" valign="top">
<input type="checkbox" name="choice1" value="1" onchange="checkTotal1()">1 x mod1<br>
<input type="checkbox" name="choice1" value="1" onchange="checkTotal1()">1 x mod1<br>
<input type="checkbox" name="choice2" value="2" onchange="checkTotal2()">2 x mod2<br>
<input type="checkbox" name="choice2" value="2" onchange="checkTotal2()">2 x mod2<br>
<input type="checkbox" name="choice3" value="1" onchange="checkTotal3()">1 x mod3<br>
<input type="checkbox" name="choice3" value="1" onchange="checkTotal3()">1 x mod3<br>
<input type="checkbox" name="choice3" value="1" onchange="checkTotal3()">1 x mod3<br>
<input type="checkbox" name="choice4" value="1" onchange="checkTotal4()">1 x mod4<br>
<input type="checkbox" name="choice5" value="1" onchange="checkTotal5()">1 x mod5<br>
<input type="checkbox" name="choice5" value="1" onchange="checkTotal5()">1 x mod5<br>
</td>
<td align="left" valign="top">
<table>
<tr>
<th>Product Model</th>
<th>Qty Received</th>
<th>Qty Checked</th>
</tr>
<tr>
<td>mod1</td>
<td align="right">2</td>
<td><input type="text" size="3" name="total1" value="0"></td>
</tr>
<tr>
<td>mod2</td>
<td align="right">4</td>
<td><input type="text" size="3" name="total2" value="0"></td>
</tr>
<tr>
<td>mod3</td>
<td align="right">3</td>
<td><input type="text" size="3" name="total3" value="0"></td>
</tr>
<tr>
<td>mod4</td>
<td align="right">1</td>
<td><input type="text" size="3" name="total4" value="0"></td>
</tr>
<tr>
<td>mod5</td>
<td align="right">2</td>
<td><input type="text" size="3" name="total5" value="0"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
I have then following table:
<table style="width:100%" id="testTable">
<tr>
<th>length per</th>
<th>width per</th>
<th>length</th>
<th>width</th>
<th>total</th>
</tr>
<tr align='right'>
<td>
<input type="text" name="length-per-input">
</td>
<td>
<input type="text" name="width-per-input">
</td>
<td>
<input type="text" name="length-total-input">
</td>
<td>
<input type="text" name="width-total-input">
</td>
<td>
<input type="text" name="total-output" disabled="disabled">
</td>
</tr>
<tr align='right'>
<td>
<input type="text" name="length-per-input">
</td>
<td>
<input type="text" name="width-per-input">
</td>
<td>
<input type="text" name="length-total-input">
</td>
<td>
<input type="text" name="width-total-input">
</td>
<td>
<input type="text" name="total-output" disabled="disabled">
</td>
</tr>
</table>
<input type=button value='+' onclick="addRow()" />
<input type=button value='Calculate' onclick="Calculate()" />
I also have the javascript which adds the value and puts it in total:
<script>
function Calculate() {
var lengthPerInput = $("input[name='length-per-input']").val();
var widthPerInput = $("input[name='width-per-input']").val();
var lengthTotal = $("input[name='length-total-input']").val();
var widthTotal = $("input[name='width-total-input']").val();
var total = (lengthTotal/lengthPerInput) + (widthTotal/widthPerInput);
$("input[name='total-output']").val(total);
}
</script>
The aim here is to have it iterate over the two rows, then add each one separately.
I know how to get each row by using:
$('#testTable tr').each(function(){
console.log(this);
$(this).find('length-per-input').each(function(){
console.log(this);
})
})
But using the row (accessed via "this") I don't know how to get the correct cells, get their value, then perform the calculate on that row for the total.
Any advice on this please? Thank you!
function Calculate(tr_row) {
var lengthPerInput = tr_row.find("input[name='length-per-input']").val();
var widthPerInput = tr_row.find("input[name='width-per-input']").val();
var lengthTotal = tr_row.find("input[name='length-total-input']").val();
var widthTotal = tr_row.find("input[name='width-total-input']").val();
var total = (lengthTotal/lengthPerInput) + (widthTotal/widthPerInput);
tr_row.find("input[name='total-output']").val(total);
}
For every row you call function to summ the values
To the function you pass the row, then it can collect values on that row
$('#testTable tr').each(function(){
Calculate($(this))
})
You can use each() function to iterate through table and use find() function to find cell values.
function Calculate() {
$('#testTable tr').each(function() {
var lengthPerInput = $(this).find("input[name='length-per-input']").val();
var widthPerInput = $(this).find("input[name='width-per-input']").val();
var lengthTotal = $(this).find("input[name='length-total-input']").val();
var widthTotal = $(this).find("input[name='width-total-input']").val();
var total = (lengthTotal/lengthPerInput) + (widthTotal/widthPerInput);
$(this).find("input[name='total-output']").val(total);
});
}
Working Plunker
How to get a table cell value using jQuery?
I'm trying to grab the text from the nearest span tag with the class 'item_price' and save it to a variable - can anyone tell me whats wrong
Also I am trying to grab the 'hidden' input also
$('#ajax_basket').on('keyup','input',function(event) {
var qty = $(this).val();
var item_price = $(this).find('span.item_price').text();
var hidden_id;
console.log(qty);
console.log(item_price);
});
<form id="ajax_basket">
<table>
<tr><td><input type="hidden" name="1[rowid]" value="5333a934f53d623eb18c490b57522d93"></td></tr>
<tr>
<td>Apple iPhone 2G</td>
<td><input type="text" name="1[qty]" value="1" maxlength="2" size="1" class="input-mini qty" /></td>
<td style="text-align:right" class="item_price_row">$<span class="item_price">15.00</span></td>
<td style="text-align:right" class="sub_total">$15.00</td>
</tr>
<tr>
<td>Apple iPhone 5G</td>
<td><input type="text" name="1[qty]" value="1" maxlength="2" size="1" class="input-mini qty" /></td>
<td style="text-align:right" class="item_price_row">$<span class="item_price">115.00</span></td>
<td style="text-align:right" class="sub_total">$115.00</td>
</tr>
</tr>
</table>
</form>
You have to backstep to the parent tr, then find
$('#ajax_basket').on('keyup','input',function(event) {
var qty = this.value
var item_price = $(this).closest("tr").find('span.item_price').text();
var hidden_id;
console.log(qty);
console.log(item_price);
});
The below line
$(this).find('span.item_price').text();
gets searches for span with class item_price among descendents of text box.
Try something like below:
$(this).parent().parent().find('span.item_price').text();
I'm starting at learning javascript and I have a problem
here is my html code:
<tr>
<td>
Qty1 : <input class="txt" type="number" id="qty1"/>
</td>
<td>Value: <input type="text" class="getPrice" id="id1"></td>
</tr>
<tr>
<td>
Qty2 : <input class="txt" type="number" id="qty2"/>
</td>
<td>Value: <input type="text" class="getPrice" id="id2"></td>
</tr>
<tr>
<td>
Qty3 : <input class="txt" type="number" name="qty" id="qty3"/>
</td>
<td>Value: <input type="text" class="getPrice" id="id3"></td>
</tr>
<br><br>
<tr>
<td>Summation of value : </td>
<td><span id="sums">0</span></td>
</tr>
and here is my js code
/* get data */
qty1.oninput = function() {
var inputF1 = document.getElementById("id1");
inputF1.value = qty1.value*2;
};
qty2.oninput = function() {
var inputF2 = document.getElementById("id2");
inputF2.value = qty2.value*3;
};
qty3.oninput = function() {
var inputF3 = document.getElementById("id3");
inputF3.value = qty3.value;
};
/* calculate sumation */
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".getPrice").each(function() {
$(this).on('input',function(){
calculateSum();
});
});
calculateSum();
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".getPrice").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sums").html(sum.toFixed(2));
}
My problem is that when I click on the Qty input fields then the summation should be calculated. However, I have to enter values for the value input fields for my calculate function works.
How I can fix it? My expected result is that when I input the qyt input field it must calculate the summation and return the result.
For example, when I entered 1 in Qty1 field the summation should be 2 then I entered 3 in Qty2 the summation should return 11 and so on.
Thank you for your help!
my demo code: https://jsfiddle.net/1c0r6uhd/
You will have to call calculateSum after each value field is updated. Currently, you call it on the input event, which is fired before the actual value has been updated. Here is an example:
$('#qty1').on('input', function() {
$('#id1').val(this.value * 2).change();
})
$('#qty2').on('input', function() {
$('#id2').val(this.value * 3).change();
});
$('#qty3').on('input', function() {
$('#id3').val(this.value).change();
});
$('.getPrice').change(function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".getPrice").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sums").html(sum.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>
Qty1 : <input class="txt" type="number" id="qty1"/>
</td>
<td>Value: <input type="text" class="getPrice" id="id1"></td>
</tr>
<tr>
<td>
Qty2 : <input class="txt" type="number" id="qty2"/>
</td>
<td>Value: <input type="text" class="getPrice" id="id2"></td>
</tr>
<tr>
<td>
Qty3 : <input class="txt" type="number" name="qty" id="qty3"/>
</td>
<td>Value: <input type="text" class="getPrice" id="id3"></td>
</tr>
<br><br>
<tr>
<td>Summation of value : </td>
<td><span id="sums">0</span></td>
</tr>
</tbody>
</table>