Develop Reference

How to compare the values of all field at a time on button click?

I have an HTML structure like the following,
$(".zip-save").on('click', function(e) {
e.preventDefault();
var isFormValid = true;
var zip_start = $('.zip-first').val();
var zip_end = $('.zip-last').val();
console.log("start = " + zip_start + ",end = " + zip_end);
if (zip_start > zip_end) {
$('.zip-last').css('border-color', 'rgba(218, 71, 58, 0.5)');
$(this).parents('div').before("<p>zip-to value must be greater than zip-from</p>");
} else {
$('.zip-last').css('border-color', 'rgba(33, 33, 33, 0.12)');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
</br>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
</br>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
</br>
<button class="zip-save">Save</button>
And on save button click function, I want to check all of these first zip field value is less than the last zip field value,
I could do the same for only the first <tr>, but how to do that for all of them at a time?

You need to loop through those table rows, whereas you were only grabbing the values for the first row. I gave the table a classname and then looped through the tr tags. Also note this syntax: +$(this).find('.zip-first').val() - that little plus sign converts this string into a number so I can make the comparison. Also, I made a div at the bottom to hold the error.
$(".zip-save").on('click', function(e) {
e.preventDefault();
let isFormValid = true;
$('.zip-table tr').each(function() {
let zip_start = +$(this).find('.zip-first').val()
let zip_end = +$(this).find('.zip-last').val();
// console.log("start = " + zip_start + ",end = " + zip_end);
if (zip_start > zip_end) {
$(this).find('.zip-last').css('border-color', 'rgba(218, 71, 58, 0.5)');
$('.error').html("zip-to value must be greater than zip-from");
} else {
$(this).find('.zip-last').css('border-color', 'rgba(33, 33, 33, 0.12)');
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='zip-table'>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
</table>
<div class='error'></div>
<button class='zip-save'>Save</button>

Consider the following example.
$(".zip-save").on('click', function(e) {
e.preventDefault();
var isFormValid = true;
var zip_start;
var zip_end;
$("table tr").each(function(index, elem) {
zip_start = parseInt($(".zip-first", elem).val());
zip_end = parseInt($(".zip-last", elem).val());
if (zip_start > zip_end) {
console.log(zip_start, zip_end, "invalid");
$('.zip-last', elem).removeClass("valid").addClass("invalid");
} else {
console.log(zip_start, zip_end, "valid");
$('.zip-last', elem).removeClass("invalid").addClass("valid");
}
});
});
input.valid {
border-color: rgba(33, 33, 33, 0.12;
}
input.invalid {
border-color: rgba(218, 71, 58, 0.5);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
<tr>
<td><input type="number" placeholder="ZIP code OF" class="form-control zip-first" /></td>
<td><input type="number" placeholder="ZIP code BIS" class="form-control zip-last" /></td>
</tr>
</table>
<button class="zip-save">Save</button>
I have cleaned up your HTML Table. You should not include elements like <br> inside table rows. I also wrapped it with the proper <table> element.
As was suggested, you must iterate over each row and examine the Inputs in that row. You can do this with $(elem).find(".zip-first") or the shorthand, $(".zip-first", elem). Input elements return a String Value, so for better comparison, it is best to cast it as an Integer.
It is sometimes better to add or remove classes as needed. You can also use .toggleClass("invalid") to easily add / remove a single class.
See More:
https://api.jquery.com/find/
https://api.jquery.com/each/
https://api.jquery.com/toggleclass/

dynamic table input value calculations

I am trying to get the value of a dynamic table cell. following is the code, but i only get undefined
Javascript and HTML given below:
function calcTot(i) {
unitPrice = document.getElementById("invoice_details").rows[i].cells[6].innerHTML.value;//gets the unit price for the item
alert(unitPrice);
quantity = document.getElementById("invoice_details").rows[i].cells[7].childNodes[0].value;
//alert(quantity);
dis = document.getElementById("invoice_details").rows[i].cells[8].children[0].value;
//alert(dis);
final_amt = (parseFloat(unitPrice) * parseFloat(quantity)) - (parseFloat(unitPrice) * parseFloat(quantity) * parseFloat(dis)) / 100;
//alert(final_amt);
document.getElementById("invoice_details").rows[i].cells[9].childNodes[0].value = final_amt.toFixed(2);
//calcTotal();
}
<tbody id="generate_invoice_table">
<tr>
<td><input class="form-control" readonly="" value="57" name="item_id[]"></td>
<td><input class="form-control" readonly="" value="Toyota" name="supplier_name[]"></td>
<td><input hidden="" class="form-control" readonly="" value="Item" name="type[]"></td>
<td><input class="form-control" readonly="" value="Fan Belt Aqua" name="item_description[]"></td>
<td><input class="form-control" readonly="" value="1" name="available_qty[]"></td>
<td><input class="form-control" readonly="" value="12000.00" name="retail_price[]"></td>
<td><input type="text" value="0" class="form-control text-right" name="qty[]" onmousemove="calcTot(this.parentNode.parentNode.rowIndex)"></td>
<td><input type="text" value="0" class="form-control text-right" name="discount[]" onmousemove="calcTot(this.parentNode.parentNode.rowIndex)"></td>
<td><input type="text" class="form-control text-right" name="price[]"></td>
</tr>
</tbody>

How to calculate total weight of columns with AngularJS

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;
};

how to apply the same javascript/jquery to other input rows

I am new to Javascript and jQuery. I was trying to apply the same code to every input row in the table.
The HTML for the input row in that table is:
<tr>
<td>Seller1</td>
<td><input type="text" placeholder="" class="form-control" name="text1"></td>
<td><input type="text" placeholder="" class="form-control text2" id="text2">
</td>
</tr>
The Javascript/JQuery code to enable/disable 2nd column(text2) of the row is:
/*text field enable*/
$('#text2').attr('disabled',true);
$('input[name="text1"]').keyup(function(){
$('#text2').prop('disabled', this.value == "" ? true : false);
});
Thanks

Here a snippet able to handle multiple rows. Relies on class name instead of 'name' or 'id' attr
$(function(){
$('.text2').prop('disabled', true);
$('table input.text1').keyup(function(e) {
var show = $(this).val() == "" ? true : false;
$(this).parent().parent().find('input.text2').prop('disabled', show);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Seller1</td>
<td><input type="text" placeholder="" class="form-control text1"></td>
<td><input type="text" placeholder="" class="form-control text2"></td>
</tr>
<tr>
<td>Seller2</td>
<td><input type="text" placeholder="" class="form-control text1"></td>
<td><input type="text" placeholder="" class="form-control text2"></td>
</tr>
<tr>
<td>Seller3</td>
<td><input type="text" placeholder="" class="form-control text1"></td>
<td><input type="text" placeholder="" class="form-control text2"></td>
</tr>
</table>

you could select inputs by class:
$('.form-control').attr('disabled',true);
this will disable all elements with form-control class

The problem you're encountering may be one of scope. inside the keyup function, you refer to this.value, which is saying "if the value of #text2 is null..." -- that may not be what you want. Instead, look at the following:
/*text field enable*/
$('.sellerLast').attr('disabled', true);
//
$(".sellerFirst").each(function() {
$(this).on("keyup", function() {
console.log($(this).val());
if ($(this).val() !== "") {
$(this).parents("tr").find(".sellerLast").attr("disabled", false);
} else {
$(this).parents("tr").find(".sellerLast").attr("disabled", true);
}
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>Seller1</td>
<td>
<input type="text" placeholder="" class="form-control sellerFirst" name="sellerFirst-1">
</td>
<td>
<input type="text" placeholder="" class="form-control sellerLast" name="sellerLast-1">
</td>
</tr>
<tr>
<td>Seller2</td>
<td>
<input type="text" placeholder="" class="form-control sellerFirst" name="sellerFirst-2">
</td>
<td>
<input type="text" placeholder="" class="form-control sellerLast" name="sellerLast-2">
</td>
</tr>
</table>
Well, I was an idiot. There were two thing going on -- first, the code within the template block may not have been doing what you expected, and second, you wanted to know how to extend that to ALL similarly structured elements on the page. This should do.
Edited with an "else" condition on the length of the first field -- the else sets the field back to disabled if the first field is blank.

Need help for array field

This script works fine for me:
<script>
calculate = function(){
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)* parseInt(minutes);
}
</script>
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td>
<input class="form-control"type="text" required="required" placeholder="Symptoms" name="Symptoms[]">
</td>
<td>
<input class="form-control" type="text" required="required" placeholder="GivenMedicin" name="GivenMedicin[]">
</td>
<td>
<input id="a1" class="form-control" type="text" required="required" placeholder="UnitePrice" name="UnitePrice[]" onblur="calculate()" >
</td>
<td>
<input id="a2" class="form-control" type="text" required="required" placeholder="Quentity" name="Quentity[]" onblur="calculate()" >
</td>
<td>
<input id="a3" class="form-control" type="text" required="required" placeholder="SubTotal" name="SubTotal[]" >
</td>
</tr>
</tbody>
</table>
<input type="button" value="Add" onClick="addRow('dataTable')" />
<input type="button" value="Remove" onClick="deleteRow('dataTable')" />
<input class="submit" type="submit" value="Confirm" />
<input type="hidden" value="<?php echo $PatientIDSearch ?>" name="PatientIDSearch" />
</form>
But I need to calculate All Subtotal

Some issues:
If you add rows, you'll have to avoid that you get duplicate id property values in your HTML. It is probably easiest to just remove them and identify the input elements via their names, which does not have to be unique
It is bad practice to assign to a non-declared variable. Use var, and in the case of functions, you can just use the function calculate() { syntax.
Make the subtotal input elements read-only by adding the readonly attribute, otherwise the user can change the calculated total.
Instead of responding on blur events, you'll get a more responsive effect if you respond to the input event. And I would advise to bind the event handler via JavaScript, not via an HTML attribute.
I would fix some spelling errors in your elements (but maybe they make sense in your native language): Quantity with an 'a', UnitPrice without the 'e'.
You can use querySelectorAll to select elements by a CSS selector, and then Array.from to iterate over them.
See below snippet with 2 rows:
function calculate(){
var unitPrices = document.querySelectorAll('[name=UnitPrice\\[\\]]');
var quantities = document.querySelectorAll('[name=Quantity\\[\\]]');
var subTotals = document.querySelectorAll('[name=SubTotal\\[\\]]');
var grandTotal = 0;
Array.from(subTotals, function (subTotal, i) {
var price = +unitPrices[i].value * +quantities[i].value;
subTotal.value = price;
grandTotal += price;
});
// Maybe you can also display the grandTotal somehwere.
}
document.querySelector('form').addEventListener('input', calculate);
input { max-width: 7em }
<form action="ProvideMedicinProcess.php" class="register" method="POST">
<table id="dataTable" border="1">
<tbody>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
<tr>
<td><input type="checkbox" required="required" name="chk[]" checked="checked" /></td>
<td><input type="datetime-local" required="required" name="VisitDate[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Symptoms" name="Symptoms[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Given Medicin" name="GivenMedicin[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Unit Price" name="UnitPrice[]"></td>
<td><input class="form-control" type="text" required="required" placeholder="Quantity" name="Quantity[]"" ></td>
<td><input class="form-control" type="text" required="required" placeholder="SubTotal" readonly name="SubTotal[]" ></td>
</tr>
</tbody>
</table>
</form>