We Keep Coding

Comparing two value in a dynamic table using jQuery in Asp.net core 2.2

I have the following dynamic table
I want to compare the value of submit Quantity textbox and Stock textbox together to check if Submit Quantity value is greater than stock value for all rows.
When submit Quantity textbox loses focus I want check, if Submit Quantity value is greater than stock, I want show an alert that "Not enough goods exist in stock" and Submit Quantity textbox must receive focus again.
My HTML and C#
<tbody>
#{ var i = 0;}
#foreach (var item in Model)
{
<tr>
<td></td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" onblur="compare()" id="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" id="stock" readonly="readonly" class="form-control" />
</td>
</tr>
}
I have no idea how to do that
Any help will be appreciated
Thanks in advance
Edit:
This is what I have done to achieve the result but it only works on first row Submit Quantity textbox not on second row
function compare() {
$('#submitQ').each(function () {
let submit = $('#submitQ').val();
let quantity = $('#stock').val();
if (submit > quantity) {
alert('Not enough goods!')
$('#submitQ').select();
return false
}
})

You cannot have mutliple elements with same ids instead use class selector .Then , just get value of submit quantity using $(this).val() and stock value using .closest('tr').find('.stock').. then simply compare these values .
Demo Code :
$('.submitQ').on("blur", function() {
//get value of submit qnty
let submit = $(this).val();
//get stock
let quantity = parseInt($(this).closest('tr').find('.stock').val());
if (submit > quantity) {
alert('Not enough goods!')
$(this).focus(); //show focus
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead>
<th>No</th>
<th>Name</th>
<th>Brand</th>
<th>Requested Quantity</th>
<th>Submit Quantity</th>
<th>Stock</th>
</thead>
<tbody>
<tr>
<td>1</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<!--use class-->
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="8" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
<tr>
<td>2</td>
<td>
<input type="text" name="[#i].GoodsName" readonly="readonly" asp-for="#item.GoodsName" value="something" class="form-control" />
</td>
<td>
<input type="text" name="[#i].BrandName" readonly="readonly" asp-for="#item.BrandName" class="form-control" />
</td>
<td>
<input type="text" name="[#i].Quantity" readonly="readonly" asp-for="#item.Quantity" class="form-control" />
</td>
<td>
<input type="number" class="submitQ" class="form-control" />
</td>
<td>
<input type="text" name="stock" value="5" class="stock" readonly="readonly" class="form-control" />
</td>
</tr>
</tbody>
</table>

How to get value from dynamic textbox with dynamic id

So i have a text box with id :
<input type="text" name="jview_no[]" id="view'+$sr +'" value="1">
where :
$sr = ($(".my_tr_class").length + 1);
i wanted to put the value of that view+$sr to another textbox, so this is how i do it so far :
<input type="text" name="amount[]" value="'+ $("#view"+$sr).val() + '" >
but the result is undefined.
the thing is, i don't really know how to do it the right way, would you guys please help me ?
thanks in advance

I don't understand what you exactly want to achieve. If you have only two inputs you can use example below (this is only for your example), but if you have more inputs and you need to match these inputs together, you have read about this in javascript.
$(document).on('keyup','input[name="jticket_no[]"]', function(){
$(this).parent().next().children()[0].value = $(this).val()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width: 100%" class="table">
<thead><tr><th>No.</th>
<th>Views +5</th>
<th>Payment</th>
</tr>
</thead>
<tbody id="table-details"><tr id="row1" class="jdr1">
<td><span class="btn btn-sm btn-default">1</span><input type="hidden" value="6437" name="count[]"></td>
<td><input type="text" required="" class="form-control input-sm" placeholder="Views" name="jticket_no[]"></td>
<td><input type="text" required="" data-parsley-type="digits" class="form-control input-sm" placeholder="Payment" name="jamount[]"></td>
</tr>
<tr id="row1" class="jdr1">
<td><span class="btn btn-sm btn-default">2</span><input type="hidden" value="6437" name="count[]"></td>
<td><input type="text" required="" class="form-control input-sm" placeholder="Views" name="jticket_no[]"></td>
<td><input type="text" required="" data-parsley-type="digits" class="form-control input-sm" placeholder="Payment" name="jamount[]"></td>
</tr>
</tbody>
</table>

send all values from ng repeat in a form

Well I'm generating a ng-repat but I need change data and send all this for edit in back end my problem is when I want to do this, can't obtain values of the form inside ng-repeat
The picture is the form that have, in html looks:
<form name="FormTablesPackageCreation">
<table class="table table-striped ta ble-bordered">
<thead>
<tr>
<th>Estado</th>
<th>Especie</th>
<th>Tipo</th>
<th>Dimension</th>
<th>ubicacion</th>
<th>largo</th>
<th>Ancho</th>
<th>Espesor</th>
<th>Cantidad</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="packageList in dataListTables">
<input class="form-control" type="hidden" ng-value="packageList.id_table" name="id_table[{{$index}}]" id="id_table[{{$index}}]">
<input class="form-control" type="hidden" ng-value="packageList.id_package" name="id_package[{{$index}}]" id="id_package[{{$index}}]">
<td>
<input class="form-control" type="text" ng-value="packageList.estado" ng-model="vm.estado" name="estado[{{$index}}]" id="estado[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.especie" name="especie[{{$index}}]" id="especie[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.ubicacion" name="ubicacion[{{$index}}]" id="ubicacion[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.dimension" name="dimension[{{$index}}]" id="dimension[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.tipo" value="{{packageList.tipo}}" name="tipo[{{$index}}]" id="tipo[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.humedad" value="{{packageList.humedad}}" name="humedad[{{$index}}]" id="humedad[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.disponible" value="{{packageList.disponible}}" name="disponible[{{$index}}]" id="disponible[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.largo" name="largo[{{$index}}]" id="largo[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.ancho" name="ancho[{{$index}}]" id="ancho[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-value="packageList.espesor" name="espesor[{{$index}}]" id="espesor[{{$index}}]" readonly>
</td>
<td>
<input class="form-control" type="text" ng-model="packageList.cantidad" ng-value="packageList.cantidad" ng-change="" name="cantidad[{{$index}}]" id="cantidad[{{$index}}]" required>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Cantidad de tablas</td>
<td>
<input class="form-control" type="text" ng-model="vm.total" ng-value="dataListTables | sumByColumn: 'cantidad'" name="total" id="total" readonly>
</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Cantidad de tablas nuevo paquete</td>
<td>
<input class="form-control" type="text" ng-model="vm.Referencial" ng-value="sumNewCan(dataListTables | sumByColumn: 'cantidad')" readonly>
</td>
</tr>
</tbody>
</table>
<div>
<br>
<button class="btn btn-primary btn-lg" ng-click="crearPaquete()">Crear nuevo Paquetes</button>
</div>
</form>
how I'm trying to obtain of values:
$scope.crearPaquete = function ()
{
var vm = this;
$scope.seleccionadorEspecies = false;
$scope.creadorPaquetes = false;
$scope.verificacionPaquetes = true;
for (var i = 0; i < FormTablesPackageCreation.cantidad.length; i++)
{
console.log(FormTablesPackageCreation.id_table[i].value);
console.log(FormTablesPackageCreation.id_package[i].value);
console.log(FormTablesPackageCreation.cantidad[i].value);
}
};
I need obtain data of the ng-repeat, Try another way but do not work yet.

You shouldn't be trying to get the Data by way of your Form - it should all be model-bound in your HTML to your dataListTables collection with the ng-model directives (instead of ng-value). Since you haven't posted your controller code it's hard to go much further, but assuming your dataListTables is a $scope variable (which it shouldn't - always assign to a controller variable!!), you could access the data in your controller at any time in the page lifecycle like so:
HTML
<input ... ng-model="packageList.attribute" /> (remove ng-value)
Controller
angular.forEach($scope.dataListTables, function(obj)
{
console.log(obj.estado);
console.log(obj.largo);
console.log(obj.ancho);
// and so on
});
I'd highly recommend using ng-controller with the as syntax (ng-controller="myController as myCtrl") and then in your controller code assigning your dataListTables to this like so:
ngApp.controller("myController", function($scope)
{
this.dataListTables = { ... your data ... };
});
Then modify your HTML to access the myCtrl variable instead of the implied $scope:
ng-repeat = "packageList in myCtrl.dataListTables"
For reference, do a quick google on "Angular Dot Rule" to see why using $scope variables is a bad idea.

Its very simple.
Add ng-model in input tag like this
<input class="form-control" type="text" ng-value="packageList.humedad" value="{{packageList.humedad}}" ng-model ="packageList.humedad" name="humedad[{{$index}}]" id="humedad[{{$index}}]" readonly>
You can get the updated value in the controller like $scope.dataListTables. hope it will help you.

bind input type value to angular expression

how to bind an value attribute of input to angular expression
<tr>
<td><label> Cash To Collect</label></td>
<td><input type="text" ng-model="Receipt.codToCollect" required
placeholder="Amount To Collect" class="form-control"> <span
class="help-block"></span></td></tr>
<tr>
<td><label> Cash Handed Over</label></td>
<td><input type="text" ng-model="Receipt.codPaid" required
placeholder=" Cash Paid" class="form-control"> <span
class="help-block"></span></td>
</tr>
<tr>
<td><label> Shortfall Amount</label></td>
<td><input type="text" ng-model="Receipt.shortFallAmount"
ng-value="{{Receipt.codToCollect-Receipt.codPaid}}" required
placeholder=" ShortFall Amount" class="form-control"> <span
class="help-block"></span></td>
</tr>
the value for shortfall should get calculated according to the expression????

First way
You don't need to set the value at all. ng-model takes care of it all:
-->set the input value from the model
-->update the model value when you change the input
-->update the input value when you change the model from js
Second way
If you don't wan't to use ng-model there is ng-value you can try.

Loop through dynamic javascript calculations

I have a table of selected products and I would like to use javascript to dynamically calculate certain values for the user without refreshing.
The user sees a number of fields: quantity input box (var t0), unit amount (var amt0), total amount (var ta0), unit weight (var weight0) and total weight (var tw0).
The following code works as I would like. The quantity input by the user is multiplied by the unit amount and set to total amount. The same is done for weight. The zeros refer to the FIRST appearance of a product. The issue is that we don't know how many products the user will select.
We can determine the number of products using arguments.length. My question is, how can I construct a loop to replace the 0 with perhaps the iteration variable i. We need to create the below script to correspond to the number of products selected.
//QTY FIELD
var qtyVal0 = t0.value;
//AMT FIELD
var amtVal0 = amt0.innerHTML;
ta0.value = qtyVal0 * amtVal0;
//WEIGHT FIELD
var weightVal0 = weight0.innerHTML;
tw0.value = qtyVal0 * weightVal0;
I tried using a 'for loop' and var ('qtyVal' + i) as well as var qtyVal + i. Plus every combination in between.
I also tried just duplicating the above working script a dozen times, but it unfortunately doesn't work when the number of duplications is different than the number of products.
Javascript is not my forte by any means, so any help (or a more efficient way to calculate) would be greatly appreciated. Thank you!
PS For all of my love and respect, I will also need to tackle the issue of adding all quantities, amounts, and weights in each of the three vertical columns. I'm not sure if this would affect the way that the calculations are designed. Once again, thank you!
UPDATE
Here is the HTML code for the form displayed to the user. I generate it in another php script and insert it into the page once the user selects from a list of products. It displays 3 products currently, but as mentioned, this can change to any number. Hopefully this is clearer. Do let me know. Cheers.
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td><!--PRODUCTS SELECTED WILL BE DISPLAYED HERE -->
<div id="txtHint">
<table id="products" width="1050" cellpadding="5" border="1">
<tbody>
<tr>
<th>QTY</th>
<th>Product</th>
<th>Unit Cost</th>
<th>Unit Measure</th>
<th>Amount</th>
<th>Total Amount</th>
<th>Weight</th>
<th>Total Weight</th>
<th>LBS / KGS</th>
<th>Rec D</th>
<th>Rec Q</th>
<th>Status</th>
</tr>
<tr>
<td><input name="t0" id="t0" type="text" onkeyup="return autocalc(this,t1,t2)" size="5" maxlength="5" tabindex="$i"></td>
<td>Catalogue</td>
<td>$150</td>
<td>Each</td>
<td><span id="amt0">10</span></td>
<td><input name="ta0" id="ta0" type="text" readonly="readonly" value="10" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight0">101</span></td>
<td><input name="tw0" id="tw0" type="text" readonly="readonly" value="101" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="t1" id="t1" type="text" onkeyup="return autocalc(this,t0,t2)" size="5" maxlength="5" tabindex="$i"></td>
<td>Product2</td>
<td>$18</td>
<td>Each</td>
<td><span id="amt1">15</span></td>
<td><input name="ta1" id="ta1" type="text" readonly="readonly" value="15" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight1">50</span></td>
<td><input name="tw1" id="tw1" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="t2" id="t2" type="text" onkeyup="return autocalc(this,t0,t1)" size="5" maxlength="5" tabindex="$i"></td>
<td>Product3</td>
<td>$236</td>
<td>Each</td>
<td><span id="amt2">1</span></td>
<td><input name="ta2" id="ta2" type="text" readonly="readonly" value="1" size="5" maxlength="5" tabindex="-1"></td>
<td><span id="weight2">50</span></td>
<td><input name="tw2" id="tw2" type="text" readonly="readonly" value="50" size="5" maxlength="5" tabindex="-1"></td>
<td>LBS</td>
<td>REC D</td>
<td>REC Q</td>
<td>STATUS</td>
</tr>
<tr>
<td><input name="total" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td><input name="totalAmount" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td><input name="totalWeight" type="text" readonly="readonly" value="0" size="5" maxlength="5" tabindex="-1"></td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</div></td>
</tr>
<tr>
<td><input type="submit" id="submitbtn" name="submit" value="Save Changes">
<input type="hidden" name="action" value="create_po"></td>
</tr>
<tr>
<td></td>
</tr>
</tbody>
</table>

If you're dead-set on calculating this from the HTML/DOM itself, you'll need to iterate over the appropriate table rows (consider using jQuery, you'll be glad), pull out the data in question from (what, table cells?), convert it to numbers, and do the math as normal.
There are a number of ways to do this, but it depends a lot on the HTML you're pulling the data from.