I have a table in asp.net mvc . in this table I have a checkbox for every row . I want when I check a checkbox find wage value in that row and sum with other rows wages that checked .
I want to do this sum via Jquery or java script .
#foreach (var item in Model)
{
<tr id="rowid">
<td>
<input type="checkbox" name="chk-#intCount" id="chk-#intCount" class="chkclass" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.TechnicalNo)
</td>
<td class="sum" id="wagein">
#Html.DisplayFor(modelItem => item.Wage)
</td>
<td class="sum" id="time">
#Html.DisplayFor(modelItem => item.Time)
</td>
</tr>
}
this is my code in asp.net mvc . how can I sum checked values in wage and time now ?
EDIT :
My jQuery code :
<script src="/Scripts/jquery-1.4.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('.chkclass').click(function() {
var sum = 0;
$('.chkclass:checked').each(function() {
sum += parseFloat($(this).closest('tr').find('.wagein').text());
});
$('#sum').html(sum);
});
});
</script>
my html code :
<tr>
<td>
<input type="checkbox" name="chk-1" id="chk-1" class="chkclass" />
</td>
<td class="sum wagein">
10
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chk-2" id="chk-2" class="chkclass" />
</td>
<td class="sum wagein">
10
</td>
</tr>
any idea ?! what is the problem ?!
Start by fixing your markup as it is highly broken. Remember that ids must be unique throughout your entire HTML document:
#foreach (var item in Model)
{
<tr>
<td>
<input type="checkbox" name="chk-#intCount" id="chk-#intCount" class="chkclass" />
</td>
<td>
#Html.DisplayFor(modelItem => item.Name)
</td>
<td>
#Html.DisplayFor(modelItem => item.TechnicalNo)
</td>
<td class="sum wagein">
#Html.DisplayFor(modelItem => item.Wage)
</td>
<td class="sum">
#Html.DisplayFor(modelItem => item.Time)
</td>
</tr>
}
then you could subscribe to the .click() event of the checkboxes and accumulate a sum for all wages:
$(function() {
$('.chkclass').click(function() {
var sum = 0;
$('.chkclass:checked').each(function() {
sum += parseFloat($(this).closest('tr').find('.wagein').text());
});
alert(sum);
});
});
And here's a live demo to see it in action: http://jsfiddle.net/pbkjr/
Ok, starting with the markup you have shown, correctly wrapped with <table></table> tags, with a div below to show the total:
<table>
<tr>
<td>
<input type="checkbox" name="chk-1" id="chk-1" class="chkclass" />
</td>
<td class="sum wagein">
10
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chk-2" id="chk-2" class="chkclass" />
</td>
<td class="sum wagein">
10
</td>
</tr>
</table>
<div id="total"></div>
The following jquery (which #Darin wrote) will sum all the checked rows when any checkbox is clicked:
$('.chkclass').click(function() {
var sum = 0;
$('.chkclass:checked').each(function() {
sum += parseFloat($(this).closest('tr').find('.wagein').text());
});
$('#total').html(sum);
});
This is very close to Darin's original, except that I have changed the last line to output the total to the div with id total. This seems more likely than writing the sum to every row!
This can be seen in this live example: http://jsfiddle.net/ADE3a/
jQuery(document).ready(function ($) {
var sum = 0;
$('input[type=checkbox]').click(function () {
sum = 0;
$('input[type=checkbox]:checked').each(function () {
sum += parseFloat($(this).closest('div').find('.payment').val());
});
$('#total').val(sum);
});
});
Darin Dimitrov
Thanks a ton. I was having a issue where I wanted do addition of hidden fields for checked check boxes and pass the checkbox value(true or false) to the controller.
#Html.CheckBoxFor was creating a hidden field right next to it for each checkbox
I was using $(this).next().val() this was giging me NAN issue. since it was getting the value of the hidden field.
Thanks you to your post I was able to get the next div hidden field value
I did something like below
Related
I have table with 3 columns. The third columns is a check box for each row.
<tr id='sub".$this->getHtmlId()."_".$cpt."' class='mui-row'>
<td class='mui-col-md-6'>".$row[0]."</td>
<td class='mui-col-md-2'>".$row[1]."</td>
<td class='mui-col-md-2' style='border:none'>
<component id='box' class=\ "CheckBoxComponent\" name=\ "chk".$row[3]. "\" />
</td>
</tr>";
what i want is that when I check a checkbox the delete button become visible and if i check a second or more it stay visible because I can delete multiple rows at the same time.
Right now, everything I have tried do that when I check a row the button appear I click a second one it disappear and when I click a third one it appear again
here some example that I tried :
$('#deleteButton').toggle('slow', function() {
// Animation complete.
});
var chkbox = $(\".check\");
button = $(\"#box\");
button.attr(\"disabled\",\"disabled\");
chkbox.change(function() {
if (this.checked) {
button.removeAttr(\"disabled\");
}
else {
button.attr(\"disabled\",\"disabled\");
}
});
You can get the count of checked checkbox by $(".check:checked").length
If there is a checked checkbox, show the button.
$(function() {
//hide on init
$("#deleteButton").hide();
$(".check").click(function() {
//get the number of checked
if ($(".check:checked").length) $("#deleteButton").show();
else $("#deleteButton").hide();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class='mui-row'>
<td class='mui-col-md-6'>1</td>
<td class='mui-col-md-2'>1</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
</tr>
<tr class='mui-row'>
<td class='mui-col-md-6'>2</td>
<td class='mui-col-md-2'>2</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
</tr>
<tr class='mui-row'>
<td class='mui-col-md-6'>3</td>
<td class='mui-col-md-2'>3</td>
<td class='mui-col-md-2' style='border:none'>
<input type="checkbox" class="check">
</td>
</tr>
</table>
<button id="deleteButton" type="button">Delete!</button>
I am making a page that contains a table with a button to add a row. It is a table for users to input data, and will eventually be submitted to a database.
Currently, I have a price and a quantity field in each row. When either of them change, I want to calculate the total and write it to another cell.
This is my event handler (wrapped in $(document).ready()):
$(".quantity_input, .price_input").change(function () {
console.log(this.value);
cal_total();
});
This is my current code:
function cal_total() {
if (isNaN(parseFloat(this.value))) {
alert("You must enter a numeric value.");
this.value = "";
return;
}
var cell = this.parentNode;
var row = cell.parentNode;
var total = parseFloat($("#items_table tr").eq(row.index).find("td").eq(3).find("input").first().val()) * parseFloat($("#items_table tr").eq(row.index).find("td").eq(4).find("input").first().val());
if (!isNaN(total)) {
$("#items_table tr").eq(row.index).find("td").eq(5).html(total.toFixed(2));
}
}
And this is what the inputs look like:
<input type='text' class='fancy_form quantity_input' name='quantities[]' size='4' style='text-align:center;border-bottom:none;'>
In addition to my original question, the event is never fired. Can anyone see why?
But more importantly, is this the best way to retrieve the values? I really don't think so but I cant come up with anything more clever.
Thank you!
you have to pass paremeter to calc_total to define input or tr
try this code
$(".quantity_input, .price_input").change(function () {
$(".quantity_input, .price_input").change(function () {
cal_total(this);
});
});
function cal_total(elem){
var row=$(elem).closest("tr")
var quantity=row.find(".quantity_input").val()-0
var price=row.find(".price_input").val()-0
var total=quantity * price
row.find(".totl_input").val(total)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
<tr>
<td>
<input class="quantity_input" />
</td>
<td>
<input class="price_input" />
</td>
<td>
<input class="totl_input" />
</td>
</tr>
</table>
I have buttons in a table which are created dynamically. I want to iterate through a table, get the tablerows which contain a checked checkbox and get the value of a button inside the tablerow. I want to push the values in an array after. The buttons don't have a unique ID so I cannot get their values by id.
I tried to get the values through giving the buttons a class and itering works fine but the array is filled with empty entries.
$("#bt_multiple_deletion").off().on("click", function () {
var files = [];
var rows = $(".select").find("input[type=checkbox]:checked");
rows.each(function () {
files.push($(this).find(".filefolder-button").text());
});
})
I really don't know what Im doing wrong. I tried to get the values with .text(), .val() etc.
My table row looks like this:
<tr class="select">
<td>
<span class="countEntries"><input id="lv_fifo_ctrl7_cb_delete_file" type="checkbox" name="lv_fifo$ctrl7$cb_delete_file" /></span>
</td>
<td>
<img src="images/icons/013_document_02_rgb.png" alt="document" />
</td>
<td class="name">//the button i want to get the value from
<input type="submit" name="lv_fifo$ctrl7$bt_file" value="013_document_png.zip" id="lv_fifo_ctrl7_bt_file" class="filefolder-button download file del" style="vertical-align: central" />
</td>
<td>
<span id="lv_fifo_ctrl7_lb_length">33.14 KB</span>
</td>
<td>
<span id="lv_fifo_ctrl7_lb_CreationTime">21.10.2014 07:34:46</span>
</td>
<td></td>
<td>
<input type="submit" name="lv_fifo$ctrl7$bt_del_file" value="delete" id="lv_fifo_ctrl7_bt_del_file" class="delete-button delete-file" />
</td>
</tr>
The problem is rows is the input elements not the tr elements so in the loop you need to find the tr which contains the input then find the target element inside it
$("#bt_multiple_deletion").off().on("click", function () {
var checked = $(".select").find("input[type=checkbox]:checked");
var files = checked.map(function () {
return $(this).closest('tr').find(".filefolder-button").val();
}).get();
})
Another option is
$("#bt_multiple_deletion").off().on("click", function () {
var rows = $(".select").find("tr").has('input[type=checkbox]:checked');
//var rows = $(".select").find('input[type=checkbox]:checked').closest('tr');
var files = rows.map(function () {
return $(this).find(".filefolder-button").val();
}).get();
})
#Timo Jokinen Do you need this
$("#bt_multiple_deletion").on("click", function () {
var files = [];
var rows = $(".select").find("input[type=checkbox]:checked");
rows.each(function () {
files.push($(this).parents("tr").find("td.filefolder-button").text());
});
console.log(files);
})
<table class="select">
<tr>
<td class="filefolder-button">test1</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td class="filefolder-button">test2</td>
<td><input type="checkbox" /></td>
</tr>
<tr>
<td class="filefolder-button">test3</td>
<td><input type="checkbox" /></td>
</tr>
</table>
<button id="bt_multiple_deletion">delete</button>
Checkout example link here
I am attempting to return the hidden input field value above a checked checkbox. As it is at the moment I am finding a value of undefined.
This is what I have tried.
var checkedTopics = document.getElementsByName("chkRelatedTopics");
for (var i = 0; i < checkedTopics.length; i++) {
if (checkedTopics[i].checked) {
var uniqueKeyTopic = $(this).parent().
find("input[name=hidTopicsDomain]").val();
console.log(uniqueKeyTopic);
}
}
this is the markup
{{each Items}}
<tr>
<td>
<input type='hidden'
name='hidTopicsDomain' value='${DomainObjectKey}'/>
<input type='checkbox'
name='chkRelatedTopics' value='${subject}'/>
</td>
<td><label id='labRelatedTopicDisplay'>${subject}</label>
</tr>
{{/each}}
How can I retrieve this hidden input field value?
Thanks
Try this:
$('input[type=checkbox]:checked').each(function(){
$(this).prev('input[name=hidTopicsDomain]').val();
});
or if you want to control checked and unchecked then use this:
$('input[type=checkbox]').each(function(){
if($(this).is(':checked')){
//perform something if checked
}
else{
//perform something if not checked.
}
});
You can't use this in the for loop, use .each() and use siblings to find the input
var checkedTopics = document.getElementsByName("chkRelatedTopics");
$(checkedTopics).each(function(){
if (this.checked) {
var uniqueKeyTopic = $(this).siblings("input[name=hidTopicsDomain]").val();
console.log(uniqueKeyTopic);
}
});
Check below if this helps.
http://jsfiddle.net/sandeep605085/28peQ/2/
html:
<table>
<tr>
<td>
<input type='hidden' name='hidTopicsDomain' value='HiddenFieldValue1'/>
<input type='checkbox' checked name='chkRelatedTopics' value='checkbox1'/>
</td>
<td>
<label id='labRelatedTopicDisplay'>label1</label>
</td>
</tr>
<tr>
<td>
<input type='hidden' name='hidTopicsDomain' value='HiddenFieldValue2' />
<input type='checkbox' checked name='chkRelatedTopics' value='checkbox2'/>
</td>
<td>
<label id='labRelatedTopicDisplay'>label2</label>
</td>
</tr>
<tr>
<td>
<input type='hidden' name='hidTopicsDomain' value='HiddenFieldValue3'/>
<input type='checkbox' name='chkRelatedTopics' value='checkbox3' />
</td>
<td>
<label id='labRelatedTopicDisplay'>label3</label>
</td>
</tr>
<tr>
<td>
<input type='button' id='buttonclick' value='Click to Test' />
</td>
</tr>
</table>
js:
$('#buttonclick').click(function(){
var checkedTopics = $('input[name="chkRelatedTopics"]');
checkedTopics.each(function(){
if ($(this).is(':checked')) {
var uniqueKeyTopic = $(this).prev().val();
alert(uniqueKeyTopic);
}
});
});
Thanks.
I could really your help! I need to sum a dynamic amount of textboxes but my JavaScript knowledge is way to week to accomplish this. Anyone could help me out? I want the function to print the sum in the p-tag named inptSum.
Here's a function and the html code:
function InputSum() {
...
}
<table id="tbl">
<tbody>
<tr>
<td align="right">
<span>June</span>
</td>
<td>
<input name="month_0" type="text" value="0" id="month_0" onchange="InputSum()" />
</td>
</tr>
<tr>
<td align="right">
<span>July</span>
</td>
<td>
<input name="month_1" type="text" value="0" id="month_1" onchange="InputSum()" />
</td>
</tr>
<tr>
<td align="right">
<span>August</span>
</td>
<td>
<input name="month_2" type="text" value="0" id="month_2" onchange="InputSum()" />
</td>
</tr>
<tr>
<td align="right">
<span>September</span>
</td>
<td>
<input name="month_3" type="text" value="0" id="month_3" onchange="InputSum()" />
</td>
</tr>
</tbody>
</table>
<p id="inputSum"></p>
function InputSum() {
var inputs = document.getElementsByTagName("input");
for (var i = 0; i < inputs.length; i++) {
if(inputs[i].id.indexOf("month_") == 0)
alert(inputs[i].value);
}
}
With a little jQuery, you could do it quite easily, using the attribute starts with selector. We then loop over them, parses their values into integers and sum them up. Something like this:
function InputSum() {
var sum = 0;
$('input[id^="month_"]').each(function () {
sum += parseInt($(this).val(), 10);
});
$("#inputSum").text(sum);
}
You could even get rid of the onchange attributes on each input if you modify the code to something like this:
$(function () {
var elms = $('input[id^="month_"]');
elms.change(function() {
var sum = 0;
elms.each(function () {
sum += parseInt($(this).val(), 10);
});
$("#inputSum").text(sum);
});
});
function InputSum() {
var month_0=document.getElementById("month_0").value;// get value from textbox
var month_1=document.getElementById("month_1").value;
var month_2=document.getElementById("month_2").value;
var month_3=document.getElementById("month_3").value;
// check number Can be omitted the
alert(month_0+month_1+month_2+month_3);//show result
}