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>
Related
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>
I have a dynamic knockout table that has a check box for "Qualification gained" when this is ticked i am looking to add a class to the inputs of traininglevelselect and trainingDateSelect (rows 0 and 4)
Table -
<tbody data-bind="foreach: TrainingItems" id="trainingPadding" class="tdPadding">
<tr>
<td class="col-md-1">#Html.DropDownList("Train Level", EnumHelper.GetSelectList(typeof(TrainingLevel)), new { #class = "form-control site-level-ddl trainingLevelSelect", data_bind = "value: TrainLevel" })</td>
<td class="col-md-2"><input type="text" data-bind="value: TrainCourseTitle" class="form-control" /></td>
<td class="col-md-2"><input type="text" data-bind="value: TrainProviderName" class="form-control" /></td>
<td class="col-md-1"><input type="text" data-bind="date: TrainDateStarted" class="form-control datepicker" placeholder="dd/mm/yyyy" id="datepicker2" /></td>
<td class="col-md-1"><input type="text" data-bind="date: TrainDateCompleted" class="form-control trainingDateSelect datepicker hasDatepicker" placeholder="dd/mm/yyyy" /></td>
<td class="col-md-1"><input type="text" data-bind="value: TrainHoursAttended" class="form-control" onkeyup="calculateTrainingCost()" /></td>
<td class="col-md-1"><input type="text" id="trainCost" data-val="true" data-val-required="Please enter a cost" data-bind="value: TrainCost" class="form-control trainingCost" onkeyup="calculateTrainingCost(), calculateOverallTotal()" /></td>
<td class="col-md-1" style="text-align: center"><input type="checkbox" data-bind="checked: QualificationGained" class="" onchange="addClass()"/></td>
<td class="col-md-1" style="width: 4%; text-align: center"><a href="#" data-bind="click: $root.removeTrainingRow" class="glyphicon glyphicon-trash text-danger" /></td>
</tr>
</tbody>
To do this I am currently using jQuery to add the classes -
$('.trainingDateSelect').addClass('trainingDateCompleted');
$('.trainingLevelSelect').addClass('trainingLevel');
The issue -
This works fine if I only add one row. Dynamically adding a second row and clicking the checkbox adds classes to both rows.
I looking to just add classes to the current row the checkbox is on not all.
I have tried something along the lines of -
function addClass(){
$(this).closest('tr').children('input:eq(4)').addClass('trainingDateCompleted');
}
Which fires when the checkbox is clicked however it does not work.
There is a mismatch in the function name used in on change event in your code:
Pass this to the function so that you can refer that inside the function. You can use find() on the closest tr like the following way:
function addClass(el){
$(el).closest('tr').find('input:eq(4)').addClass('trainingDateCompleted');
}
function calculateTrainingCost(){}
.trainingDateCompleted{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody data-bind="foreach: TrainingItems" id="trainingPadding" class="tdPadding">
<tr>
<td class="col-md-1">test</td>
<td class="col-md-2"><input type="text" data-bind="value: TrainCourseTitle" class="form-control" /></td>
<td class="col-md-2"><input type="text" data-bind="value: TrainProviderName" class="form-control" /></td>
<td class="col-md-1"><input type="text" data-bind="date: TrainDateStarted" class="form-control datepicker" placeholder="dd/mm/yyyy" id="datepicker2" /></td>
<td class="col-md-1"><input type="text" data-bind="date: TrainDateCompleted" class="form-control trainingDateSelect datepicker hasDatepicker" placeholder="dd/mm/yyyy" /></td>
<td class="col-md-1"><input type="text" data-bind="value: TrainHoursAttended" class="form-control" onkeyup="calculateTrainingCost()" /></td>
<td class="col-md-1"><input type="text" id="trainCost" data-val="true" data-val-required="Please enter a cost" data-bind="value: TrainCost" class="form-control trainingCost" onkeyup="calculateTrainingCost(), calculateOverallTotal()" /></td>
<td class="col-md-1" style="text-align: center"><input type="checkbox" data-bind="checked: QualificationGained" class="" onchange="addClass(this)"/></td>
<td class="col-md-1" style="width: 4%; text-align: center"><a href="#" data-bind="click: $root.removeTrainingRow" class="glyphicon glyphicon-trash text-danger" /></td>
</tr>
</tbody>
</table>
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.
i am using the angular expression as value in textbox to perform some operation
`<tr>
<td><input type="text" ng-model="product.costPrice" required
placeholder=" product Cost" class="form- control" > <span
class="help-block"></span></td>
</tr>
<tr>
<td><label>Profit</label></td></tr>
<tr>
<td><input type="text" ng-model="Product.profit" required
placeholder=" Profit in %" class="form-control"> <span
class="help-block"></span></td>
</tr>
<tr>
<td><label>price</label></td></tr>
<tr>
<td><input type="text" value="{{product.costPrice * Product.profit}}" ng-model="Product.sellingPrice" required
placeholder=" selling price" class="form-control"> <span
class="help-block"></span></td>
</tr>
<tr>
<td>
<p>Expense on Books : {{product.costPrice * Product.profit}} Rs</p>
</td>
</tr>`
the expression is not working at all even though its working in the <p></p> tag what am i doing wrong ??
You can make a function (inside the function you can write and return your expression):
$scope.myExpression = function(){
return $scope.myVar + "hello";//this is your expression function
}
and call it from input box like this using ng-value
<input ng-value="myExpression()">
working code here
Writing a function will help to compute for you and then provide the result to your scope. ng-model will bind it for you. ng-value can be easily avoided in this case.
$scope.calculate = function(cost, profit) {
$scope.Product.sellingPrice = cost * profit;
}
And this will simply give you the result in your textbox
<input ng-model="Product.sellingPrice">
See demo here
Just replace
value="{{product.costPrice * Product.profit}}" ng-model="Product.sellingPrice"
with
ng-model="Product.sellingPrice=product.costPrice * Product.profit"
in the following line:
<input type="text" value="{{product.costPrice * Product.profit}}" ng-model="Product.sellingPrice" required placeholder=" selling price" class="form-control">
Working code : http://plnkr.co/edit/YLQZaCKPsLrk0QN3hvnU?p=preview
you can do calculation in controller..
or else try this...
<tr>
<td><input type="text" ng-model="product.costPrice" required
placeholder=" product Cost" class="form- control" > <span
class="help-block"></span></td>
</tr>
<tr>
<td><label>Profit</label></td></tr>
<tr>
<td><input type="text" ng-model="Product.profit" required
placeholder=" Profit in %" class="form-control"> <span
class="help-block"></span></td>
</tr>
<tr>
<td><label>price</label></td></tr>
<tr>
<td><input type="text" ng-model="Product.sellingPrice" required
placeholder=" selling price" class="form-control"> <span
class="help-block"></span></td>
</tr>
<tr>
<td>
<p>Expense on Books : {{Product.sellingPrice = product.costPrice * Product.profit}} Rs</p>
</td>
</tr>
I'm trying to make an invoice script with PHP+MySQL. I made my Invoice Entry Screen. Everything working perfectly. I also added "Add New Line" button.
Here is the problem, when I clicked the "Add New Line" all functions which used on first line are disabled. I do not have enough knowledge on JS.
Here are the Codes:
PHP:
<div class="table-striped" id="dataTable">
<table class="table table-striped">
<thead>
<tr>
<th>No</th>
<th>Product No</th>
<th>Description</th>
<th>Price</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<tbody id="ekleaq">
<tr>
<td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td>
<td>
<div class="col-xs selectContainer">
<select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])">
<?php
while($row = $result1->fetch_assoc()){
unset($id, $name, $ax1, $ax2);
$id = $row['inv_products_id'];
$name = $row['inv_products_no'];
$ax1 = $row['inv_products_desc'];
$ax2 = $row['inv_products_price'];
echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>';
}
?>
</select>
</div>
</td>
<td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td>
<td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td>
<td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td>
<td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td>
<td><button type="button" class="btn btn-default addButton" id="ekle"><i class="fa fa-plus"></i></button></td>
</tr>
</tbody>
</table>
</div>
JS:
<script>
$("#ekle").click(function(){
$("#ekleaq")
.append('<tr><td><input type="text" value="" placeholder="No" id="no1" class="form-control" name="no1[]" required=""></td><td> \
<div class="col-xs selectContainer"><select name="productno1[]" class="form-control" id="Bname" onchange="ShowData(this.options[this.selectedIndex])"> "<?php while($row = $result1->fetch_assoc()){ unset($id, $name, $ax1, $ax2);$id = $row['inv_products_id'];$name = $row['inv_products_no'];$ax1 = $row['inv_products_desc'];$ax2 = $row['inv_products_price'];echo '<option value="'.$id.'" data-ax1="'.$ax1.'" data-ax2="'.$ax2.'">'.$name.'</option>'; } ?>" </select> \
</div></td><td><input type="text" value="" placeholder="Decription" id="decription1" class="form-control" name="decription1[]" required=""></td><td><input type="text" value="" placeholder="Price" id="price1" class="form-control" name="price1[]" required=""></td><td><input type="text" value="" placeholder="Quantity" id="quantity1" class="form-control" name="quantity1[]" required="" onchange="CalculateData()"></td><td><input type="text" value="" placeholder="Amount" id="amount1" class="form-control" name="amount1[]"></td></tr>');
});
function ShowData(obj)
{
document.getElementById('decription1').value = obj.getAttribute('data-ax1');
document.getElementById('price1').value = obj.getAttribute('data-ax2');
}
function CalculateData(input)
{
price = document.getElementById('price1');
quantity = document.getElementById('quantity1');
amount1.value = price.value * quantity.value;
}
</script>