I'm having a complete table as a form, most of the cells in the table(td) are input fields
<td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.one"> </td>
<td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.two"> </td>
<td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.three"> </td>
<td><input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.four"> </td>
<td><span id="testingInput2" ng-model="addResources.total">{{addResources.one+addResources.three}}</span> </td>
<td><span id="testingInput2" ng-model="addResources.totalsecond">{{addResources.two+addResources.four}}</span> </td>
when i try to get $scope.addResources.total after submitting , it's giving null value, and i had to use angular.element() to get it's value. What might be the issue here
Edit 1:
those who are wondering why, have a look at first 4 columns, they are user input rest are all with calculation, as user enters/changes value the last 5 columns will updates by itself. If i need to have row wise calculation (total or percentage) now i need those ng-model value
try this. aslo you can compute it in controller.
var app = angular.module("testApp", []);
app.controller('testCtrl', function($scope){
$scope.addResources = {total:""};
$scope.submit = function(total){
alert(total);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="testApp" ng-controller="testCtrl">
<table>
<tr>
<td>
<input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.one"> </td>
<td>
<input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.two"> </td>
<td>
<input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.three"> </td>
<td>
<input id="testingInput2" type="number" placeholder="0"step="1" ng-model="addResources.four"> </td>
<td>
<input type="hidden" id="testingInput2" ng-model="addResources.total" ng-value="addResources.total = addResources.one + addResources.three ">{{addResources.one+addResources.three}}
</td>
</tr>
{{addResources.total}}
</table>
<input type="button" value="submit" ng-click="submit(addResources.total)">
</div>
First ng-model directive should be used within an input (textarea, select...) element, as the documentation says. [https://docs.angularjs.org/api/ng/directive/ngModel]
As addResources.total as addResources.totalsecond are calculated fields you could have them calculated on your controller, there is no reason to have ng-model inside the span.
Related
I'm trying to get input values from below table but all I was getting undefined in console.
Below is HTML table
I add more rows dynamically.
<table id="t_payment_details" class="table" style="margin-left:15px;width:50%;">
<tbody>
<tr id="tr_payment_details" class="tr_payment_details">
<td>Bank Account</td>
<td><input type="text" style="width:160px;" class="form-control" name="bank_account[]" class="bank_account"></td>
<td>Reference Number</td>
<td><input type="text" style="width:160px;" class="form-control" name="payment_ref[]" class="payment_ref"></input></td>
<td>Received Amount</td>
<td><input type="text" style="width:100px;" class="form-control" name="received_amount[]" class="received_amount"></input></td>
<td>Received Date</td>
<td><input type="date" class="form-control" style="width:160px;" onchange='addRowToPaymentTable()' name="received_date[]" class="received_date"></input></td>
</tr>
</tbody>
</table>
Here is JQuery
$("tr.tr_payment_details").each(function() {
var bank_account=$(this).find("input.bank_account").val();
var payment_ref=$(this).find("input.payment_ref").val();
var received_amount=$(this).find("input.received_amount").val();
var received_date=$(this).find("input.received_date").val();
});
This is embarrassing. I didn't notice second class attribute in my input fields.
It was resolved after I merged both class attributes.
Sorry.
I am trying to create a weight calculator for a list of products. But, I am having problem to calculate and display the sum total.
I am having the problem where I call the function GeneralTotalWeight() at the bottom. I think it doesnt get triggered.
this is the screenshot of the html. I marked the label with yellow.
here is the html.
<tbody>
<tr ng-repeat="article in articles">
<td>
<input type="text" ng-model="article.size" class="form-control" placeholder="Ölçü" min=0 disabled>
</td>
<td>
<input type="text" ng-model="article.name" class="form-control" placeholder="Ürün" min=0 disabled>
</td>
<td>
<input type="number" ng-model="article.quantity" class="form-control bfh-number" step=1>
</td>
<td>
<label ng-model="article.meter" class="form-control bfh-number" style="width:150px" disabled>
{{article.quantity*6}}
</label>
</td>
<td>
<input type="number" ng-model="article.weight" class="form-control bfh-number" min=0 disabled>
</td>
<td>
#*<input type="number" ng-model="article.totalWeight" class="form-control bfh-number" min=0 disabled>*#
<label ng-model="article.totalWeight" class="form-control bfh-number" style="width:150px" disabled>
{{article.quantity*6*article.weight}}
</label>
</td>
</tr>
<tr class="success">
<td class="success">TOPLAM</td>
<td class="success"></td>
<td ng-model="article.totalQuantityX" class="success">{{ GeneralTotalQuantity() }} Boy</td>
<td class="success">{{ GeneralTotalMeter() }} metre</td>
<td class="success"></td>
<td ng-model="article.totalWeightX" class="success">{{ GeneralTotalWeight() | number:2 }} KG</td>
</tr>
</tbody>
the code is below...
$scope.GeneralTotalWeight = function () {
var resultWeight = 0;
angular.forEach($scope.articles, function (article) {
resultWeight += article.totalWeight * article.meter;
});
return resultWeight;
};
How can I fix this error? Thanks in advance.
you should not use expression and ng-model at a same time. Remove ng-model from it. and pass articles directly in your function
<td class="success">{{ GeneralTotalWeight(articles) | number:2 }} KG</td>
and function should be like
$scope.GeneralTotalWeight = function (articles) {
var resultWeight = 0;
angular.forEach(articles, function (article) {
resultWeight += article.totalWeight * article.meter;
});
return resultWeight;
};
I am creating 2 dynamic controls array.
<input type=text name=quantity[]>
<input type=text name=price[]>
I want to multiply these two inputs and show the result accordingly. I want to do it on frontend using javascript or jQuery.
What will be the best possible way of doing it?
EDIT
#Zeus
As I mentioned in the question it is an array of controls so the code will go like this
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
<input type="text" name="quantity[]"> <input type="text" name="price[]">
Now I will enter quantity in first textfield and price in the second one. For each row I need to multiply these fields and show the result next to them.
Hope it explains the question more.
You can do it like this :
$("button").click(function() {
$("#calc tr").each(function(i) {
var result = $(this).find("input[name*='quantity[]']").val() * $(this).find("input[name*='price[]']").val();
$(this).children("td:nth-child(3)").html(result);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<table id="calc">
<tr>
<th>Quantity</th>
<th>Price</th>
<th>Result</th>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
<tr>
<td>
<input type="text" name="quantity[]">
</td>
<td>
<input type="text" name="price[]">
</td>
<td></td>
</tr>
</table>
<button>Click me after entering values</button>
Run the code to test it.
This is just an example you will be needing to edit the code to make it work for you.
I have table with a button as following; I'm trying to get the values of td's using jQuery.
My table:
<table class="table" id="Tablesample">
<tr>
<th style="display:none;">
#Html.DisplayNameFor(model => model.Id)
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="#item.Key" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="#item.Id" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
}
</table>
<button id="btnSave">Save</button>
then I'm trying to get the value using jquery:
$('#btnSave').click(function () {
$('#Tablesample tr').each(function () {
var row = $(this).closest("tr"); // Find the row
var text = row.find(".keyvalue").text(); // Find the text
var keval = text.find("input").text();
alert(keval);
});
});
but I'm not getting any values.
I also tried something like this but it doesn't work either:
$("#Tablesample tr:gt(0)").each(function () {
var this_row = $(this);
var key = $.trim(this_row.find('td:eq(0)').html());
alert(key);
});
The issue is due to your DOM traversal logic. Firstly this is the tr element, so closest('tr') won't find anything. Secondly, you're getting the string value from the text() of .keyvalue, then attempting to find an input element in the text instead of traversing the DOM. Finally, you need to use val() to get the value of an input.
I'd strongly suggest you familiarise yourself with the methods jQuery exposes and how they work: http://api.jquery.com
With all that said, this should work for you:
$('#btnSave').click(function() {
$('#Tablesample tr').each(function() {
var keval = $(this).find(".keyvalue input").val();
console.log(keval);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table" id="Tablesample">
<tr>
<th style="display:none;">
Model
</th>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key1" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id1" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key2" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id2" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
<tr>
<td style="display:none;" class="keyvalue">
<input type="text" name="Key" value="Key3" class="form-control" id="configKey" readonly="readonly">
</td>
<td>
<input type="text" name="Key" value="Id3" class="form-control" id="configId" readonly="readonly">
</td>
</tr>
</table>
<button id="btnSave">Save</button>
Note that the first value is undefined as your th element in the first row contains no input element. I'd suggest separating the table using thead/tbody if you want to exclude that row.
So basically I am looking for a way to take data from a dynamic table that is filled by the user and put it in a mysql database. The only part I am finding hard is reading row by row. Since this is a responsive dynamic table that lets the user add and delete rows, the name of the input tags remains the same row by row. Here is a sample of my code.
<table>
<tr>
<td><input type="text" name="foo"> </td>
<td><input type="text" name="bar"></td>
</tr>
<tr>
<td><input type="text" name="foo"> </td>
<td><input type="text" name="bar"></td>
</tr>
<tr>
<td><input type="text" name="foo"> </td>
<td><input type="text" name="bar"></td>
</tr>
</table>
Thank you
You can use array-notation, and this way when you post the values to the server - php will treat them as array:
<table>
<tr>
<td><input type="text" name="foo[]"> </td>
<td><input type="text" name="bar[]"></td>
</tr>
<tr>
<td><input type="text" name="foo[]"> </td>
<td><input type="text" name="bar[]"></td>
</tr>
<tr>
<td><input type="text" name="foo[]"> </td>
<td><input type="text" name="bar[]"></td>
</tr>
</table>
In your php code you will get
$_POST['foo'][0] = 'text1';
$_POST['foo'][1] = 'text2';
$_POST['foo'][2] = 'text3';
And this way you can have as many values as you want.