We Keep Coding

If condition is not working for all td values?

i am working with html table, when i check the checkbox i want to compare td values in a every tr, this condition is working fine for 1st tr from 2nd tr the condition is not working.
HTML Code -
<form role="form" name="conForm" id="conForm">
<span id="error" class="text-danger"></span>
<div class="table-responsive">
<table id="myPTable" class="table table-xss table-hover table-bordered">
<thead>
<tr>
<th><input class="checkall" type="checkbox" name="productcheckbox"> All</</th>
<th class="control-label paddingtop">SI No</th>
<th class="control-label paddingtop">Products</th>
<th class="control-label paddingtop">Pending Qty</th>
<th class="control-label paddingtop">Quantity</th>
<th class="control-label paddingtop">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>1</td>
<td>HMIS HMIS HMIS HMIS</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
<td>3000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>2</td>
<td>ERP</td>
<td class="availableQty">1</td>
<td><input type="number" name="select[]" class="enterQty" value="1" style="width:50px;" ></td>
<td>9000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>3</td>
<td>Inventory</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
<td>13000</td>
</tr>
<tr><td><button class="btn-info">Save</button></td></tr>
</tbody>
</table>
</form>
Here is the jquery code -
$(".btn-info").on("click",function(){
var check = $('.checkproduct');
if(check.is(':checked')){
var pending="";
$('#myPTable tr').each(function() {
pending += $(this).find(".availableQty").html();
console.log(pending);
});
var enterqty ="";
$('#myPTable tr').each(function() {
enterqty += $(this).find(".enterQty").val();
console.log(enterqty);
});
if(enterqty > pending){
$("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");
}else if(enterqty== 0){
$("#error").html("<p>you have checked the product please enter quantity</p>");
}
else{
var checked = $('.checkproduct:checked').size();
}
the jquery what i wrote is working for only first row, but it need to be work for every work which will be checked.now only you guys can help me, thanks in advance.

I've reformed your code a bit, but i believe this is what you want.
$(".btn-info").on("click", function() {
var pending =0;
var enterqty=0;
$('#myPTable .checkproduct:checked').each(function() {
pending += (+$(this).closest('tr').find(".availableQty").text());
enterqty += (+$(this).closest('tr').find(".enterQty").val());
});
if (enterqty > pending) {
$("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");
} else if (enterqty == 0) {
$("#error").html("<p>you have checked the product please enter quantity</p>");
} else {
//var checked = $('.checkproduct:checked').size();
}
});
Demo
$(".btn-info").on("click", function() {
var pending =0;
var enterqty=0;
$('#myPTable .checkproduct:checked').each(function() {
pending += (+$(this).closest('tr').find(".availableQty").text());
enterqty += (+$(this).closest('tr').find(".enterQty").val());
});
if (enterqty > pending) {
$("#error").html("<p>Quantity must be less than or equal to Pending Qty</p>");
} else if (enterqty == 0) {
$("#error").html("<p>you have checked the product please enter quantity</p>");
} else {
//var checked = $('.checkproduct:checked').size();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form role="form" name="conForm" id="conForm">
<span id="error" class="text-danger"></span>
<div class="table-responsive">
<table id="myPTable" class="table table-xss table-hover table-bordered">
<thead>
<tr>
<th><input class="checkall" type="checkbox" name="productcheckbox"> All</</th>
<th class="control-label paddingtop">SI No</th>
<th class="control-label paddingtop">Products</th>
<th class="control-label paddingtop">Pending Qty</th>
<th class="control-label paddingtop">Quantity</th>
<th class="control-label paddingtop">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>1</td>
<td>HMIS HMIS HMIS HMIS</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="10" style="width:50px;"></td>
<td>3000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>2</td>
<td>ERP</td>
<td class="availableQty">1</td>
<td><input type="number" name="select[]" class="enterQty" value="1" style="width:50px;"></td>
<td>9000</td>
</tr>
<tr>
<td><input class="checkbox checkproduct" type="checkbox" name="check"></td>
<td>3</td>
<td>Inventory</td>
<td class="availableQty">10</td>
<td><input type="number" name="select[]" class="enterQty" value="12" style="width:50px;"></td>
<td>13000</td>
</tr>
<tr>
<td><button type="button" class="btn-info">Save</button></td>
</tr>
</tbody>
</table>

Jquery: How to hold checkbox check / uncheck state in hidden field

i have a html table which i has many checkboxes. when user click on header checkbox then all child checkbox will be checked and unchecked based on header checkbox checked state.
user can uncheck and check any child checkbox too. i want to store child checkbox value in hidden field separated by comma. when child checkbox is selected then checkbox value will be store in hiiden field but if that checkbox value is in hiiden field then will not be store in hidden field.
when user uncheck anyone then that checkbox value will be removed from hidden field.
I tried this way but not successful. so guide me how to achieve it. my code as follows
<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id = "chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="101"/>
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="102"/>
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class = "chcktbl" value="103"/>
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<input id="hidden" type="hidden" name="hidden">
$(document).ready(function(){
$('#chckHead').click(function () {
$(".chcktbl").prop('checked', $(this).prop("checked"));
});
$(".chcktbl").change(function() {
var values = [];
$('.chcktbl').each(function (index, obj) {
alert('pop');
if (this.checked === true) {
values.push($(this).val());
}
});
});
alert(values.toString());
});

You forget to assign the checkboxes values to the hidden input and also, you have to do so in the header checkbox event listener.
$(document).ready(function() {
var hidden = $('#hidden');
$('#chckHead').click(function() {
var state = $(this).prop('checked');
if(state === false) {
hidden.val('');
}
var vals = [];
$('.chcktbl').each(function() {
$(this).prop('checked', state);
if(this.checked === true) {
vals.push($(this).val());
}
});
hidden.val(vals.toString());
});
$(".chcktbl").change(function() {
var values = [];
$('.chcktbl').each(function(index, obj) {
if(this.checked === true) {
values.push($(this).val());
}
});
hidden.val(values.toString());
});
});
<table id="tbl" border="10">
<thead>
<tr>
<td><input type="checkbox" id="chckHead" /></td>
<td>First Row</td>
<td>Second Row</td>
<td>Third Row</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="101" />
</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="102" />
</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>
<input type="checkbox" class="chcktbl" value="103" />
</td>
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tbody>
</table>
<!--for the demo purpose, I changed the type of the input to 'text' to see the result, don't forget to change to 'hidden' again.-->
<input id="hidden" type="text" name="hidden">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Hope I pushed you further.

You should be able to get all checked checkboxes with this selector:
$('input[type=checkbox]:checked')
Then you can call map to get all the ids and join them
string = $('input[type=checkbox]:checked').map(function(idx,element) {
return element.value;
}).join(',')
Then just listen the onChange event for all checkboxes and set the value for the hidden field.

Reveal fields if needed

I'm trying to make a contact-form in php. You can find it here.
I try to make the textbox with datepicker invisible until the visitor checks the radiobutton "ja", only then it needs to be visible.
Here's the code for the form:
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div class="reveal-if-active">
<tr>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

you use $('input[type="radio"]').click(function(){}) to detect you input change see code snippet.
var FormStuff = {
init: function() {
this.applyConditionalRequired();
this.bindUIActions();
},
bindUIActions: function() {
$("input[type='radio'], input[type='checkbox']").on("change", this.applyConditionalRequired);
},
applyConditionalRequired: function() {
$(".require-if-active").each(function() {
var el = $(this);
if ($(el.data("require-pair")).is(":checked")) {
el.prop("required", true);
} else {
el.prop("required", false);
}
});
}
};
FormStuff.init();
/* this is the function to handle you need */
$(function(){
$('input[type="radio"]').click(function(){
if ($('input[type="radio"]#ja').is(':checked'))
{
$(".reveal-if-active").show();
}
else if('input[type="radio"]#nee'){
$(".reveal-if-active").hide();
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<div >
<!-- make the tr the element to hide and show -->
<tr class="reveal-if-active" style="display:none">
<td ><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

Firstly, your markup is kinda messed up:
You shouldn't mix div tags with tr, only tr tags should be present on the same 'level' of nesting in table tag
Secondly, answering you actual question - add click event listeners on the radiobuttons, so that when YES is clicked, you make visible your "reveal-if-active" row:
var inputToHide = document.getElementsByClassName("reveal-if-active")[0];
var jaInput = document.getElementById("ja");
var neeInput = document.getElementById("nee");
function makeInputVisibleAgain() {
inputToHide.style.display = "block";
}
function hideInput() {
inputToHide.style.display = "none";
}
jaInput.addEventListener("click", makeInputVisibleAgain);
neeInput.addEventListener("click", hideInput);
Thirdly - don't use several ids with same name, better change your id="nospacing" to class

It is possible that you want something like this? Notice that it's very easy to do it in very few lines of code. Since you're a beginner I'll explain:
$( ... ); is jQuery's way to say "when the page is totally loaded, start executing what's inside". In case you didn't know, without this the scripts would start executing any time and could cause errors, mainly because of not finding the elements you work with.
$('input[name="reservatie"]').change(function(){ ... });: the radio buttons have name "reservatie", so when they are changed it will execute the function inside change().
$('#reveal').prop('hidden', !$('#ja').prop('checked'));: I identified the row of the table where the datepicker was as "reveal", because, maybe I'm wrong, but putting one row of it inside of a div didn't let my code go well, so I believe that was just wrong. I deleted the div and used the row instead. So, its attribute hidden will be the opposite of the checked property of "ja", which means, if "ja" is checked, the datepicker won't be hidden, and if it's not, it will.
Hope it helps you.
$(function(){
$('input[name="reservatie"]').change(function(){
$('#reveal').prop('hidden', !$('#ja').prop('checked'));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<form method="post" action="mail.php">
<!--< ?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>-->
<table id="contactForm">
<tr>
<th colspan="2">Contact</th>
</tr>
<div>
<tr>
<td><label>Reservatie: </label></td>
<td>
<table>
<tr>
<td id="nospacing"><input type="radio" name="reservatie" value="Ja" id="ja"></td>
<td id="nospacing"><label for="reservatie">Ja</label></td>
<td id="nospacing"><input type="radio" name="reservatie" value="Nee" id="nee"></td>
<td id="nospacing"><label for="reservatie">Nee</label></td>
</tr>
</table>
</td>
</tr>
<tr id="reveal" hidden>
<td><label for="reservering">Reserveringsdatum: </label></td>
<td><input type="text" id="reservering" autocomplete="off" name="reservering" class="require-if-active" data-require-pair="#ja"></td>
</tr>
</div>
<tr>
<td><input type="submit" name="submit" value="Verzenden" /></td>
<td><input type="reset" value="Formulier wissen" class="alt" /></td>
</tr>
</table>
</form>

comparing two text fields one is disabled another one is manually enter

I have a table inside a form, the rows and data inside the rows are generated from the back end automatically. Well all the columns are disabled, so that the user can not edit it but one column is editable. on submit compare the value from editable column and value in quanity column and display a alert message if value of editable is more.
function validateAvaliable(){
var aproducts = document.getElementById("available-quanity").value;
var sproducts = document.getElementById("send-quanity").value;
console.log(aproducts);
console.log(sproducts );
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="validateAvaliable()" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" id="available-sno" disabled value="1"></td>
<td><input type="text" name="available-name" id="available-name" disabled value="shoes"></td>
<td><input type="text" name="available-id" id="available-id" disabled value="123"></td>
<td><input type="number" name="available-quanity" id="available-quanity" disabled value="50"></td>
<td><input type="text" name="available-brand" id="available-brand" disabled value="adidas"></td>
<td><input type="text" name="available-color" id="available-color" disabled value="black"></td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="number" name="send-quanity" id="send-quanity" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>
When I try to debug it it's getting the values but if statement is skipping.
I need the code in javascript or Jquery.
Thanks in Advance

Added parseInt() and it did the trick:
function validateAvaliable() {
var aproducts = parseInt(document.getElementById("available-quanity").value);
var sproducts = parseInt(document.getElementById("send-quanity").value);
console.log(aproducts);
console.log(sproducts);
if (aproducts < sproducts) {
alert("send products are more");
return false;
}
return true;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container-fluid">
<form onsubmit="return validateAvaliable()" class="available-products-table" id="available-products-table" name="available-products">
<table class="table">
<fieldset>
<legend>Avaliable Products</legend>
<thead>
<tr>
<th>S.no</th>
<th>Product Name</th>
<th>Product ID</th>
<th>Quanity</th>
<th>Brand</th>
<th>Color</th>
<th>Status</th>
<th>Quanity</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="available-sno" id="available-sno" disabled value="1"></td>
<td><input type="text" name="available-name" id="available-name" disabled value="shoes"></td>
<td><input type="text" name="available-id" id="available-id" disabled value="123"></td>
<td><input type="number" name="available-quanity" id="available-quanity" disabled value="50"></td>
<td><input type="text" name="available-brand" id="available-brand" disabled value="adidas"></td>
<td><input type="text" name="available-color" id="available-color" disabled value="black"></td>
<td><input type="checkbox" name="product-status" id="product-status"></td>
<td><input type="number" name="send-quanity" id="send-quanity" required></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>Enter Franchise ID</td>
<td><input type="number" name="send-franchise-is" id="product-status" required></td>
<td><input type="submit" name="submit" value="submit" class="btn btn-primary"></td>
</tr>
</tbody>
</fieldset>
</table>
</form>
</div>

Sum total of all text box value in a row using jquery

I want to sum all the text box value in a html table row using jQuery.
here is the table:
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input id="expenses_sum"></td>
</tr>
</table>
Here is the jQuery function to add the value of all text box of class expenses and display the result in a text box of id expenses_sum.
$(document).ready(function() {
$(".expenses").each(function() {
$(this).keyup(function() {
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
$(".expenses").each(function() {
if (!isNaN(this.value) && this.value.length != 0) {
sum += parseFloat(this.value);
}
});
$("#expenses_sum").val(sum.toFixed(2));
}
how to use this function for each row.

Firstly you have repeated the same id when they should be unique which means your HTML is invalid. You should use a common class instead.
To make this work you need to restrict the .expenses selector to only find the elements within the same row as the input which was changed. To do that you can use closest() to get the nearest parent tr, then find() to get all the inputs.
Also note there are several logic improvements you can make here:
remove the each() loop to add the event handler
providing the reference of calculateSum to the event handler so you can use the this keyword to traverse the DOM
provide a default value of 0 to the value to simplify the sum logic
hook to the change event as well as keyup for when users paste data in to the field. Try this:
$(document).ready(function() {
$(".expenses").on('keyup change', calculateSum);
});
function calculateSum() {
var $input = $(this);
var $row = $input.closest('tr');
var sum = 0;
$row.find(".expenses").each(function() {
sum += parseFloat(this.value) || 0;
});
$row.find(".expenses_sum").val(sum.toFixed(2));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses_sum"></td>
</tr>
</table>

you can use like this
$(document).on('keyup change','input.expenses',function(){
$expenses = $(this).parents('tr').find('.expenses');
$expenseTotal = $(this).parents('tr').find('#expenses_sum');
$expenseTotal.val('0');
$.each($expenses,function(index,object){
if($(object).val()!='')
{
$expenseTotal.val(parseInt($expenseTotal.val())+parseInt($(object).val()));
}
});
});
see demo at - https://jsfiddle.net/Vesharj/zLg3pyq4/

Here is the right way to do this.
<table border="1">
<tr>
<th>sl</th>
<th>TA</th>
<th>DA</th>
<th>HA</th>
<th>Total</th>
</tr>
<tr>
<td>1</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
<tr>
<td>2</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
<tr>
<td>3</td>
<td><input class="expenses"></td>
<td><input class="expenses"></td>
<td><input class="expenses"></td><td>
<input class="expenses_sum"></td>
</tr>
</table>
And js :
$(document).ready(function(){
$(".expenses").each(function() {
$(this).keyup(function(){
sum($(this).parents("tr"));
});
});
});
function sum(parent){
var sum = 0;
$(parent).find(".expenses").each(function(){
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
$(parent).find(".expenses_sum").val(sum.toFixed(2));
}
Hope, it helps