We Keep Coding

apply calculations to column in php

Hi I fetching some data from database and constructing the table.
foreach($data_array->LINEDETAILS as $data){
if(empty($data->CREDITEDAMOUNT)){
$data->CREDITEDAMOUNT=0;
}
$linetotal='';
$linetotal = $data->LINEAMOUNT + $data->TAXAMOUNT;
$column='<td>
<input onclick="sum_value(\''.trim($data->LINEAMOUNT).'-'.$data->TAXAMOUNT.'\',this.checked)" type="checkbox" name="checkdata'.$i.'" id="checkdata'.$i.'" value="'.$data->CUSTOMERTRXLINEID.'"style="position: inherit;" checked />
</td>
<td>'.$data->DESCRIPTION.'</td>
<td>'.$data->ORIGINALLINEAMOUNT.'</td>
<td>'.$data->CREDITEDAMOUNT.'</td><td>'.$data->LINEAMOUNT.'<input type="text" value="'.$data->LINEAMOUNT.'" hidden="true"></td>
<td>'.$data->TAXAMOUNT.'</td><td>'.$linetotal.'</td>
<td>
<select>
<option>--</option>
<option>%</option>
<option>Area</option>
<option>Period In Months</option>
</select>
</td>
<td><input type="text"></td>
<td><input type="text"></td>';
$row .= '<tr>'.$column.'</tr>';
$grandtotal = $grandtotal + $data->LINEAMOUNT + $data->TAXAMOUNT;
$i++;
}
This code returns one to many lines of data.
Each like has a dropdown of 3 value based upon which calculations will be done. If I select as % and Credit value as 80%, the approved line amount should be calculated onblur 80% of Eligible line amount.
I tried to set id's for each elements and do the math using JavaScript it won't calculate and give the result. it gives an error since ID of an element should be unique and since the elements are looped the ID also gets looped. Please help.

Give a try for : "onChange" of the dropdown value and then fetch the % value and calculate in your javascript code and display on the filed that is required, and mark the field as read-only if you want it "not" to be changed.
You can dynamically add id for each element as in the loop.. abd after that fetch all the records till the max value or iteration (say i)

You can add a class on each input field. For eg.
jQuery('.credit_val').change(function(){
var eligible = parseFloat(jQuery(this).parents('tr').find('.eligible_line').text());
var credit = parseFloat(jQuery(this).val());
jQuery(this).parents('tr').find('.approve_amount').val(eligible*credit/100);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<div class="eligible_line">1000</div>
</td>
<td>
<input class = "credit_val">
</td>
<td>
<input class = "approve_amount">
</td>
</tr>
<tr>
<td>
<div class="eligible_line">2000</div>
</td>
<td>
<input class = "credit_val">
</td>
<td>
<input class = "approve_amount">
</td>
</tr>
</table>

Get all selected table rows onclick of a submit button

I have one table populated from csv file. user will upload and can select a particular row. On click of submit button all the selected row data will be sent to a webservice.
I have done everything like populating the data and all using AngularJS(v1.6) and also i can get particular rowData onclick of a checkbox. But the problem is .checked is giving false if am not selecting all the rows. As a result if user checks and again uncheck a particular row then that value am not able to remove.
heres my code:
$scope.getRow = function(n,item){
var selectedRows = [];
console.log(item);
console.log(document.getElementById("checkboxValue").checked);
//will push all selected items to selectedRows
}
<table id="customers">
<tr>
<th></th>
<th ng-repeat="(key,data) in tableData[0]">{{key}}</th>
</tr>
<tr ng-repeat="item in tableData">
<td><input type="checkbox" id="checkboxValue" ng- click="getRow(this,item)" /> </td>
<td ng-repeat="(key,data) in item"> {{data}}</td>
</tr>
</table>
<button ng-click="executeQuery()">Execute</button>
table will look like

you can add ng-model to your checkboxes
<input type="checkbox" ng-model="item.checked"/>
and instead of updating(adding/removing items from) selectedRows everytime user clicks a checkbox, you can add checked values to selectedRows when user clicks on submit function by iterating through tableData.
var selectedRows = [];
angular.forEach($scope.tableData, function(value, key) {
if(value.checked){
selectedRows.push(value);
}
});

How to mark checkboxs generated by loop without ID?

Im going to do my best to describe my issue, its hard to put into words.
On my page, I have a textbox and a button. I type a users name in the textbox and click the button to bring back all the users information.
Below this, I have a table being generated by a foreach loop of every role in my database that the user could possibly be in, with a 2 checkboxs next to it. The roles and textbox display even before the button is clicked.
When the users information comes back, whichever roles the user is in, I need to check those boxes.
It seems easy enough, I am just having a hard time trying to figure out how I am going to target each specific checkbox, because they are being created in a loop, not allowing me to give them specific ID's.
<table border="1" id="ApplicationRoles">
<thead>
<tr>
<th style="text-align:center" width="300">Role</th>
<th style="text-align:center" width="300">Category 1</th>
<th style="text-align:center" width="300">Category 2</th>
</tr>
</thead>
<tbody>
#foreach (var role in Model.appRoles)
{
<tr>
<td>
#Html.DisplayFor(modelItem => role.Name)
</td>
<td>
<input type="checkbox" />
</td>
<td>
<input type="checkbox" />
</tr>
}
</tbody>
</table>
Using javascript, I can check to see what roles the user is in, but how can I target a specific checkbox to check it(saying the user is in this role), without being able to give each one an ID?

Easiest way would be to assign for an idea that would make it easier to select via jquery. Since you're using razor. Would look something like this.
foreach (var role in Model.appRoles)
{
<input type="checkbox" id="chk_#(role.Name)" />
}
Then when you are trying to get the checkbox you would use a selector like this.
$('#chk_' + roleName).prop('checked',true);
If you NEEDED to get the checkboxes using strictly jQuery. You could do something like this...
http://jsfiddle.net/8q9cco37/
var user = {'role':'ADMIN2'};
var $roleMatch = $('td').filter(function(){
return $(this).text().toLowerCase() == user.role.toLowerCase();
});
var chk1 = $roleMatch.next('td').find('input');
var chk2 = $roleMatch.next('td').next('td').find('input');
chk1.prop('checked',true);
chk2.prop('checked',true);

I'm not familiar with asp.net, so I may screw up the syntax, but the idea is the same.
Here I'm using role.Name as the ID of the check box, you can use anything convenient to reference to in JS code.
Role
Category 1
Category 2
#foreach (var role in Model.appRoles)
{
<tr>
<td>
#Html.DisplayFor(modelItem => role.Name)
</td>
<td>
<input type="checkbox" id="<%= role.Name %>1" />
</td>
<td>
<input type="checkbox" id="<%= role.Name %>2"/>
</tr>
}
</tbody>
</table>

I would create a variable and attach it as part of the id to distinguish them all. I assume the two inputs are a group per list? So, I would differentiate them within the numbering convention (like 'y' and 'n' if you get what I'm saying):
#{
var i = 0;
foreach (var role in Model.appRoles)
{
i += 1;
<tr>
<td>
#Html.DisplayFor(modelItem => role.Name)
</td>
<td>
<input type="checkbox" ID="checkbox_Y#i" />
</td>
<td>
<input type="checkbox" ID="checkbox_N#i" />
</td>
</tr>
}

If you are looking to do the actual binding, it would be done like so.
#for(int i = 0; i < Model.appRoles.Count; i++)
{
<tr>
<td>
#Html.DisplayFor(modelItem => Model.appRoles[i].Name)
</td>
<td>
#Html.CheckBoxFor(x=> Model.appRoles[i].IsEnabled, new { id = Model.appRoles[i].MyId })
</td>
</tr>
}
Then, it would just be a matter of assigning specific IDs if it's something you are interested in.
However, if you wrap that up to an action, it will generate proper names that can be bound back to a model (with a List property) while submitting your form without touching anything.

Need to delete row if checkbox is checked

I've got a jQuery/AJAX solution set up to update and delete items that are displayed in a table. The AJAX part works fine but once an item is deleted I need to be able to remove it from view and I can't figure out how to identify the selected item(s) based on their value after the submit button is clicked.
Here's my jQuery:
$('#button').click(function(event){
var order = $("#sortable tbody").sortable("serialize");
order += "&" + $("form[name=favorites]").serialize().replace(/%5B%5D/g, '[]');
order += "&crudtype=update_favorites";
$('#savemessage').html('<p>Saving changes...</p>');
$.post("/crud",order,function(theResponse){
$('#savemessage').html(theResponse);
});
});
});
My HTML is generated from PHP so the quantities and IDs are variable but the format is as follows:
<tr class="odd" id="field_37">
<td class="handle">Item #1 Name</td>
<td><input type="checkbox" name="fid[]" id="fid" value="37" class="box check-child"></td>
</tr>
<tr class="even" id="field_29">
<td class="handle">Item #2 Name</td>
<td><input type="checkbox" name="fid[]" id="fid" value="29" class="box check-child"></td>
</tr>
So effectively what (I think) I need is to add to my .click function something like "foreach checked fid, remove the corresponding row ID" if that makes any sense.

A basic selector to get a checked checkbox is
'input[type="checkbox"]:checked'
or
'input:checkbox:checked'
Now you can either use has() or loop through and use closest to get the trs
$('input[type="checkbox"]:checked').closest("tr").remove();
or
$('tr:has(input[type="checkbox"]:checked)').remove();

You can do it like this: http://jsfiddle.net/dSANw/
When user clicks on checked box add class to the parent tr
$(".box").click(function() {
if($(this).is(':checked')) {
$(this).parents('tr').addClass('checkedtd');
} else {
$(this).parents('tr').removeClass('checkedtd');
}
});
When clicked on delete, get all tables tr's classed 'checkedtd' and delete
$("#delt").click(function() {
alert($('.checkedtd').length);
$('.checkedtd').remove();
});

jquery displaying table rows dynamically in dom belonging to one/more particular class

I have the basic html structure:
<table>
<tbody>
<tr class="1">
<td>
<p style="font-size:large">
<span class="muted"> This is the first object </span>
</p>
</td>
</tr>
<tr class="2">
<td>
<p style="font-size:large">
<span class="muted"> This is second object </span>
</p>
</td>
</tr>
<tr class="3">
<p style="font-size:large">
<span class="muted"> this is the third object </span>
</p>
</td>
</tr>
</tbody>
</table>
and then I have check boxes, the functionality i want is,
if checkbox 1 is checked, only the tr with class 1 be displayed.
if checkbox 2 and 3 are clicked, the tr with class 1 gets hidden and 2, 3 show in the dom.
again if checkbox 2,*3* are unchecked and 1 is checked tr with class 2, 3 do not show and 1 is showed.
How can this be done in jQuery?

Here's a solution using radios, since explanation seems to indicate you want a choice of either 2&3 or 1 to show. Radios cancel each other whereas checkboxes don't.
If this is not behavior wanted you need to clarify your explanation
HTML:
<label>Show All<input type="radio" value="0" name="radio"></label>
<label>1<input type="radio" value="1" name="radio"></label>
<label>2 & 3<input type="radio" value="23" name="radio"></label>
JS
var rows = $('tr');
$(':radio').change(function() {
var classNum = $(this).val();
rows.hide();
var toShow;
if( classNum=='0'){
toShow=rows;
}else{
toShow = classNum=='1' ? rows.filter('.1') : rows.not('.1');
}
toShow.show();
});
DEMO: http://jsfiddle.net/wGLfX/