We Keep Coding

Can’t identify object attribute: Uncaught ReferenceError: fat is not defined

I’m building a simple application to calculate BMI as part of an JS exercise and can’t get past this error when I create an object to read inputs of my form. The error I get is the one in the title. Uncaught ReferenceError: fat is not defined at HTMLButtonElement.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var form = document.querySelector("#add-form");
var patient = getFormPatient
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = name;
weightTd.textContent = weight;
heightTd.textContent = height;
fatTd.textContent = fat;
bmiTd.textContent = calculateBmi(weight, height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
return patient;
}
<header>
<div class="container">
<h1 class="title">Queensland Nutrition</h1>
</div>
</header>
<main>
<section class="container">
<h2>My clients</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Weight(kg)</th>
<th>Height(m)</th>
<th>Fat Percentage (%)</th>
<th>BMI</th>
</tr>
</thead>
<tbody id="patients-table">
<tr class="patients">
<td class="info-name">Paulo</td>
<td class="info-weight">100</td>
<td class="info-height">2.00</td>
<td class="info-fat">10</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">João</td>
<td class="info-weight">80</td>
<td class="info-height">1.72</td>
<td class="info-fat">40</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Erica</td>
<td class="info-weight">54</td>
<td class="info-height">1.64</td>
<td class="info-fat">14</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Douglas</td>
<td class="info-weight">85</td>
<td class="info-height">1.73</td>
<td class="info-fat">24</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Tatiana</td>
<td class="info-weight">46</td>
<td class="info-height">1.55</td>
<td class="info-fat">19</td>
<td class="info-bmi">0</td>
</tr>
</tbody>
</table>
</section>
<section class="container">
<h2 id="titulo-form">Add New Patient</h2>
<form id="add-form">
<div class="grupo">
<label for="nome">Name:</label>
<input id="nome" name="name" type="text" placeholder="enter patient's name" class="campo">
</div>
<div class="grupo">
<label for="peso">Weight:</label>
<input id="peso" name="weight" type="text" placeholder="enter patient's weight" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Height:</label>
<input id="altura" name="height" type="text" placeholder="enter patient's height" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">Fat Percentage:</label>
<input id="gordura" name="fat" type="text" placeholder="enter patient's fat percentage" class="campo campo-medio">
</div>
<button id="button-add" class="botao bto-principal">Adicionar</button>
</form>
</section>
</main>
<script src="js/bmi-calc.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>
I thought I might be making a mistake with variable names, but reviewed them and can’t find any. Any ideas on what I’m doing wrong here?
------------------------- EDIT ---------------------
adding code for the calculateBmi function to make it clearer. That's literally all the code I have for the exercise.
var patients = document.querySelectorAll(".patients");
function calculateBmi(weight, height) {
var bmi = 0;
bmi = weight / (height * height);
return bmi.toFixed(2);
}
for (var i = 0; i < patients.length; i++) {
var patient = patients[i];
var tdWeight = patient.querySelector(".info-weight");
var weight = tdWeight.textContent;
var tdHeight = patient.querySelector(".info-height");
var height = tdHeight.textContent;
var tdBmi = patient.querySelector(".info-bmi");
var validWeight = true;
var validHeight = true;
if (weight <= 0 || weight >= 700) {
validWeight = false;
tdBmi.textContent = "Invalid weight";
patient.classList.add("invalid-patient");
}
if (height <= 0 || height >= 3) {
validHeight = false;
tdBmi.textContent = "Invalid height";
patient.classList.add("invalid-patient");
}
if (validHeight == true && validWeight == true) {
var bmi = calculateBmi(weight, height);
tdBmi.textContent = bmi;
}
}

You have no variables name, weight, height, or fat. I think you meant patient.name, etc.
But you didn't call the function in
var patient = getFormPatient
You need parentheses with the argument after it.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var form = document.querySelector("#add-form");
var patient = getFormPatient(form);
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = patient.name;
weightTd.textContent = patient.weight;
heightTd.textContent = patient.height;
fatTd.textContent = patient.fat;
bmiTd.textContent = calculateBmi(patient.weight, patient.height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
return patient;
}
<header>
<div class="container">
<h1 class="title">Queensland Nutrition</h1>
</div>
</header>
<main>
<section class="container">
<h2>My clients</h2>
<table>
<thead>
<tr>
<th>Name</th>
<th>Weight(kg)</th>
<th>Height(m)</th>
<th>Fat Percentage (%)</th>
<th>BMI</th>
</tr>
</thead>
<tbody id="patients-table">
<tr class="patients">
<td class="info-name">Paulo</td>
<td class="info-weight">100</td>
<td class="info-height">2.00</td>
<td class="info-fat">10</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">João</td>
<td class="info-weight">80</td>
<td class="info-height">1.72</td>
<td class="info-fat">40</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Erica</td>
<td class="info-weight">54</td>
<td class="info-height">1.64</td>
<td class="info-fat">14</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Douglas</td>
<td class="info-weight">85</td>
<td class="info-height">1.73</td>
<td class="info-fat">24</td>
<td class="info-bmi">0</td>
</tr>
<tr class="patients">
<td class="info-name">Tatiana</td>
<td class="info-weight">46</td>
<td class="info-height">1.55</td>
<td class="info-fat">19</td>
<td class="info-bmi">0</td>
</tr>
</tbody>
</table>
</section>
<section class="container">
<h2 id="titulo-form">Add New Patient</h2>
<form id="add-form">
<div class="grupo">
<label for="nome">Name:</label>
<input id="nome" name="name" type="text" placeholder="enter patient's name" class="campo">
</div>
<div class="grupo">
<label for="peso">Weight:</label>
<input id="peso" name="weight" type="text" placeholder="enter patient's weight" class="campo campo-medio">
</div>
<div class="grupo">
<label for="altura">Height:</label>
<input id="altura" name="height" type="text" placeholder="enter patient's height" class="campo campo-medio">
</div>
<div class="grupo">
<label for="gordura">Fat Percentage:</label>
<input id="gordura" name="fat" type="text" placeholder="enter patient's fat percentage" class="campo campo-medio">
</div>
<button id="button-add" class="botao bto-principal">Adicionar</button>
</form>
</section>
</main>
<script src="js/bmi-calc.js" type="text/javascript"></script>
<script src="js/form.js" type="text/javascript"></script>

Your object patient has all the params,
so use patient.field_name to get the value.
var button = document.querySelector("#button-add");
button.addEventListener("click", function() {
event.preventDefault();
var addForm = document.querySelector("#add-form");
var patient = getFormPatient(addForm)
console.log(patient);
var patientTr = document.createElement("tr");
var nameTd = document.createElement("td");
var weightTd = document.createElement("td");
var heightTd = document.createElement("td");
var fatTd = document.createElement("td");
var bmiTd = document.createElement("td");
nameTd.textContent = patient.name;
weightTd.textContent = patient.weight;
heightTd.textContent = patient.height;
fatTd.textContent = patient.fat;
bmiTd.textContent = calculateBmi(weight, height);
patientTr.appendChild(nameTd);
patientTr.appendChild(weightTd);
patientTr.appendChild(heightTd);
patientTr.appendChild(fatTd);
patientTr.appendChild(bmiTd);
var table = document.querySelector("#patients-table");
table.appendChild(patientTr);
})
function getFormPatient(form) {
var patient = {
name: form.name.value,
weight: form.weight.value,
fat: form.fat.value,
height: form.height.value
}
console.log(patient);
return patient;
}

disable button in case of empty element in class

I want to disable submit button if there is any empty field in class element.
$(document).ready(function (){
fees = [];
$('#button').attr('disabled',true);
});
function submitButton() {
// var fees = $('.fee').val();
var total = $('#total').val();
$(".fee").each(function(index, value){
fees.push($(this).val().trim());
});
if(fees.includes('') && total = '') {
$('#button').attr('disabled',true);
} else {
$('#button').attr('disabled',false);
} // /else
}//fuction
JS fiddle link

Just check if there is content inside the inputs, if you activate the button by removing the disabled class
$('input').on('keyup', function(){
var enable = true
$('input').each(function(index, element){
if ($(element).val() == "" || $(element).val() == null){
enable = false;
}
});
if (enable){
$('button').removeAttr('disabled');
}else{
$('button').attr('disabled','disabled');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" /><br /><br />
<input type="text" /><br /><br />
<input type="text" />
<button disabled>Confirm</button>
Edit 1.0:
$(document).ready(function (){
fees = [];
$('#button').attr('disabled',true);
});
//submit button enable disable
function submitButton() {
var total = $('#total').val();
$(".fee").each(function(index, value){
fees.push($(this).val().trim());
});
}//fuction
function disableButton(){
var enable = true
$('input.useToCheck').each(function(index, element){
if ($(element).val() == "" || $(element).val() == null){
enable = false;
}
});
if (enable){
$('button').removeAttr('disabled');
}else{
$('button').attr('disabled','disabled');
}
}
$('input').on('keyup', function(){
disableButton();
});
$('#more').on('click', function(){
disableButton();
});
//autocomplete script
$(document).on('focus','.search',function(){
let type = $(this).data('type');
$(this).autocomplete({
source: [{
label: 1,
value: 1,
data: {
t_id: 1,
Fee: 9.99
}
}, {
label: 2,
value: 2,
data: {
t_id: 2,
Fee: 1
}
}],
autoFocus: true,
minLength: 1,
select: function( event, ui ) {
let id_num = $(this).attr('id').substring(5);
$(this).val(ui.item.value);
$('#fee_' + id_num).val(ui.item.data.Fee);
$('#total').val(ui.item.data.Fee);
//$(this).attr('data-type', ui.item.type);
return false;
},
});
});
var i=$('table#first tr').length;
$("#more").on('click',function(){
html = '<tr>';
html += '<td><input type="text" data-type="type" onKeyUp="submitButton();" id="test_'+i+'" class="search useToCheck" placeholder="Enter 1 or 2 only"> </td>';
html += '<td><input type="number" id="fee_'+i+'" class="fee" placeholder="Fee"></td>';
html += '</tr>';
$('table#first').append(html);
i++;
disableButton();
$('input').on('keyup', function(){
disableButton();
});
});
#button {
margin: 50px;
}
<link href="https://code.jquery.com/ui/1.11.4/themes/ui-darkness/jquery-ui.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<!--hidden div-->
<div class="Popup">
<table id="first">
<thead>
<tr>
<th>Name</th>
<th>Fee</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" data-type="type" onKeyUp="submitButton();" id="test_1" class="search useToCheck" placeholder="Enter 1 or 2 only"></td>
<td><input type="number" id="fee_1" class="fee" placeholder="Fee"></td>
<td><a id="more"> More Row </a></td>
</tr>
</tbody>
</table>
<h3> Table 2 </h3>
<table id="tests">
<thead>
<tr>
<th>Student</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" data-type="type" onKeyUp="submitButton();" id="student" class="search useToCheck"></td>
<td><input type="number" id="total"></td>
</tr>
</tbody>
</table>
</div>
<button type="button" id="button"> submit </button>

Add keyup event to the input, Check if the elements .fee and '#total have value and then enable the button else disable.
$(document).ready(function() {
const btn = $('button');
btn.attr('disabled', true);
$('input').on('keyup', function() {
const fees = $('.fee').val();
const total = $('#total').val();
const isDisabled = (fees && total) ? false : true;
btn.attr('disabled', isDisabled);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="Popup">
<table id="first">
<thead>
<tr>
<th>Name</th>
<th>Fee</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" data-type="type" id="test_1" class="search" placeholder="Enter 1 or 2 only"></td>
<td><input type="number" id="fee_1" class="fee" placeholder="Fee"></td>
<td><a id="more"> More Row </a></td>
</tr>
</tbody>
</table>
<h3> Table 2 </h3>
<table id="tests">
<thead>
<tr>
<th>Student</th>
<th>Total</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" data-type="type" id="student" class="search"></td>
<td><input type="number" id="total"></td>
</tr>
</tbody>
</table>
</div>
<button type="button" id="button"> submit </button>

how to pass table row Data from jsp to servlet on click function

/*Script Function */
i want to store table data value in script variable and it will send data in servlet
<script>
$(document).ready(function () {
$('#edit').click(function () {
var id=$(this).attr('#id');
var studentName= $(this).attr('#id');
var age= $('#age').val();
$.ajax({
type:'POST',
data:{
id: id,
studentName:studentName,
age:age
},
url:'EditStudent'
});
});
});
</script>
this is showing data from servlet and further i want to send table data in script variable
<c:forEach items="${studentList}" var="student">
<tr>
<td id="id" ><c:out value="${student.roll_no}"/></td>
<td contenteditable="true" id="studentName" ><c:out value="${student.studentName}"/></td>
<td contenteditable="true" id="age"><c:out value="${student.age}"/></td>
<td> Delete</td>
<%--<td>Edit--%>
<td><input type="button" id="edit" value="edit">
</td>
</tr>
</c:forEach>

the id in <input type="button" id="edit" value="edit"> need to be unique , here since you are using c:forEach it will create multiple rows where the id will be same.
Instead of id use class . Sa,e need to be there for other tds also.
<c:forEach items="${studentList}" var="student">
<tr>
<td class="id" ><c:out value="${student.roll_no}"/></td>
<td contenteditable="true" class="studentName" ><c:out value="${student.studentName}"/></td>
<td contenteditable="true" class="age"><c:out value="${student.age}"/></td>
<td> Delete</td>
<%--<td>Edit--%>
<td><input type="button" class="edit" value="edit">
</td>
</tr>
</c:forEach>
In js
$(document).ready(function () {
$('.edit').click(function () {
var id=$(this).closest('.id');
var studentName= $(this).closest('.studentName');
var age= $(this).closest('.age');;
$.ajax({
type:'POST',
data:{
id: id,
studentName:studentName,
age:age
},
url:'EditStudent'
});
});
});

using the class not Id
<c:forEach items="${studentList}" var="student">
<tr class="tr">
<td class="id" id="id" ><c:out value="${student.roll_no}"/></td>
<td contenteditable="true" class="studentName" ><c:out value="${student.studentName}"/></td>
<td contenteditable="true" class="age"><c:out value="${student.age}"/></td>
<td> Delete</td>
<td> <input type="button" id="edit" class="edit" value="edit"> </td>
</tr>
</c:forEach>
<script>
$(document).ready(function () {
$('.edit').click(function () {
var id = $(this).closest(".tr").find('.id').text();
var studentName = $(this).closest(".tr").find(".studentName").text();
var age = $(this).closest(".tr").find(".age").text();
$.post("EditStudent", {
id: id,
studentName: studentName,
age: age
});
});
});
</script>

jquery DataTables parent and child rows posted to server as one record instead of two

I have a problem where jquery DataTables creates parent and child rows on resize (responsive DataTable) and I need to save values of inputs from child rows as well as from parent rows and post via ajax to controller action.
Responsive (resized) DataTable:
Normal (not resized) DataTable:
Currently I am using this jquery function to post data to the server:
$('#SaveItemButton').click(function (e) {
var arr = [];
var rows = $('#ItemTable').find('tbody').find('tr');
console.log(rows.length);
$.each(rows, function (index, item) {
var controls = $(this).find('input, select');
console.log(controls.length);
item = {
ItemType: controls.eq(0).val(),
Unit: controls.eq(1).val(),
Quantity: controls.eq(2).val(),
Price: controls.eq(3).val(),
InvoiceDate: $('#InvoiceDate').val(),
TransferDate: $('#TransferDate').val(),
TransferPlace: $('#TransferPlace').val(),
InvoiceDescription: $('#InvoiceDescription').val()
};
arr.push(item);
});
$.ajax({
url: '/Item/Add',
data: JSON.stringify(arr),
contentType: 'application/json',
type: "POST",
dataType: "json",
success: function (result) {
//alert(result);
},
error: function (errormessage) {
}
});
return false;
});
but when the Datatable is resized it returns two rows which in turn gets posted to the server.
I am retrieving rows from a table via:
var rows = $('#ItemTable').find('tbody').find('tr');
How can I get all the related parent rows and child rows as one row so I can post that row to the server?
Parent row example:
<tr role="row" class="odd parent">
<td tabindex="0" style=""></td>
<td class="sorting_1"><input name="ItemType" class="form-control" type="text"></td>
<td style="display: none;"><select name="Unit" class="form-control defaultpicker"><option>dan</option><option>Komad</option><option>Sat</option>m<option>m2</option><option>m3</option><option>kg</option><option>lit</option><option>pak</option><option>reč</option></select></td>
<td style="display: none;"><input name="Quantity" class="form-control" type="number"></td>
<td style="display: none;"><input name="Price" class="form-control" type="text"></td>
<td style="display: none;"><input name="Total" class="form-control" type="text" readonly=""></td>
<td style="display: none;"><button type="submit" id="DeleteButton" class="fa fa-times select-row btn btn-secondary btn-sm" data-id=""></button>
</td>
</tr>
Child row example:
<tr class="child">
<td class="child" colspan="2">
<ul data-dtr-index="0" class="dtr-details">
<li data-dtr-index="2" data-dt-row="0" data-dt-column="2">
<span class="dtr-title">Unit</span>
<span class="dtr-data">
<select name="Unit" class="form-control defaultpicker"><option>dan</option><option>Komad</option><option>Sat</option>m<option>m2</option><option>m3</option><option>kg</option><option>lit</option><option>pak</option><option>reč</option></select>
</span>
</li>
<li data-dtr-index="3" data-dt-row="0" data-dt-column="3">
<span class="dtr-title">Quantity</span>
<span class="dtr-data">
<input name="Quantity" class="form-control" type="number" value="3">
</span>
</li>
<li data-dtr-index="4" data-dt-row="0" data-dt-column="4">
<span class="dtr-title">Price</span>
<span class="dtr-data">
<input name="Price" class="form-control" type="text" value="1000">
</span>
</li>
<li data-dtr-index="5" data-dt-row="0" data-dt-column="5">
<span class="dtr-title">Total</span>
<span class="dtr-data">
<input name="Total" class="form-control" type="text" readonly="" value="">
</span>
</li>
<li data-dtr-index="6" data-dt-row="0" data-dt-column="6">
<span class="dtr-title"></span>
<span class="dtr-data">
<button type="submit" id="DeleteButton" class="fa fa-times select-row btn btn-secondary btn-sm" data-id=""></button>
</span>
</li>
</ul>
</td>
</tr>
Controller posted data, index 0 contains valid data:
Code Snippet:
var table = $('#ItemTable').DataTable({
"dom": '<"toolbar">frtip',
"paging": true,
"pagingType": "full_numbers",
"searching": false,
// Solution to responsive table losing data
'columnDefs': [{
'targets': [1, 2, 3, 4, 5, 6],
'render': function(data, type, row, meta) {
if (type === 'display') {
var api = new $.fn.dataTable.Api(meta.settings);
var $el = $('input, select, textarea', api.cell({
row: meta.row,
column: meta.col
}).node());
var $html = $(data).wrap('<div/>').parent();
if ($el.prop('tagName') === 'INPUT') {
$('input', $html).attr('value', $el.val());
if ($el.prop('checked')) {
$('input', $html).attr('checked', 'checked');
}
} else if ($el.prop('tagName') === 'TEXTAREA') {
$('textarea', $html).html($el.val());
} else if ($el.prop('tagName') === 'SELECT') {
$('option:selected', $html).removeAttr('selected');
$('option', $html).filter(function() {
return ($(this).attr('value') === $el.val());
}).attr('selected', 'selected');
}
data = $html.html();
}
return data;
}
}],
'responsive': true,
order: [1, 'asc']
});
// Solution to responsive table losing data
$('#ItemTable tbody').on('keyup change', '.child input, .child select, .child textarea', function(e) {
var $el = $(this);
var rowIdx = $el.closest('ul').data('dtr-index');
var colIdx = $el.closest('li').data('dtr-index');
var cell = table.cell({
row: rowIdx,
column: colIdx
}).node();
$('input, select, textarea', cell).val($el.val());
if ($el.is(':checked')) {
$('input', cell).prop('checked', true);
} else {
$('input', cell).removeProp('checked');
}
});
$('#SaveItemButton').click(function() {
var arr = [];
var rows = $('#ItemTable').find('tbody').find('tr');
console.log(rows.length);
$.each(rows, function(index, item) {
var controls = $(this).find('input, select');
console.log(controls.length);
item = {
ItemType: controls.eq(0).val(),
Unit: controls.eq(1).val(),
Quantity: controls.eq(2).val(),
Price: controls.eq(3).val(),
InvoiceDate: $('#InvoiceDate').val(),
TransferDate: $('#TransferDate').val(),
TransferPlace: $('#TransferPlace').val(),
InvoiceDescription: $('#InvoiceDescription').val()
};
arr.push(item);
});
$.ajax({
url: '/Item/Add',
data: JSON.stringify(arr),
contentType: 'application/json',
type: "POST",
dataType: "json",
success: function(result) {
//alert(result);
},
error: function(errormessage) {
}
});
return false;
});
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/responsive/2.2.3/css/responsive.dataTables.min.css" rel="stylesheet" />
<table id="ItemTable" class="table table-hover table-secondary dataTable no-footer dtr-inline" style="width: 100%;" role="grid" aria-describedby="ItemTable_info">
<thead>
<tr role="row">
<th></th>
<th>ItemType</th>
<th>Unit</th>
<th>Quantity</th>
<th>Price</th>
<th>Total</th>
<th></th>
</tr>
</thead>
<tbody>
<tr role="row" class="odd parent">
<td tabindex="0" style=""></td>
<td class="sorting_1"><input name="ItemType" class="form-control" type="text"></td>
<td style="">
<select name="Unit" class="form-control defaultpicker">
<option>value1</option>
<option>value2</option>
<option>value3</option>
<option>value4</option>
<option>value5</option>
<option>value6</option>
<option>value7</option>
<option>value8</option>
<option>value9</option>
</select>
</td>
<td style=""><input name="Quantity" class="form-control" type="number"></td>
<td style=""><input name="Price" class="form-control" type="text"></td>
<td style=""><input name="Total" class="form-control" type="text" readonly=""></td>
<td style=""><button type="submit" id="DeleteButton" data-id=""></button></td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/select/1.2.6/js/dataTables.select.min.js"></script>
<script src="https://cdn.datatables.net/responsive/2.2.3/js/dataTables.responsive.min.js"></script>

Well, you really cannot. At first DT inject and remove child rows and their content to and from the DOM, making them invisible to simple jQuery selectors. You can target open child rows, but that is all.
Secondly you cannot select multiple elements in pairs. You could have for example $('tr.parent, tr.parent ~ tr.child') or similar, but that would be equal to just $('tr'). I would go through the API:
table.rows().every(function() {
var $node = this.nodes().to$();
var item = {
ItemType: $node.find('input[name=ItemType]').val(),
Unit: $node.find('select[name=Unit]').val(),
Quantity: $node.find('input[name=Quantity]').val(),
Price: $node.find('input[name=Price]').val(),
Total: $node.find('input[name=Total]').val(),
InvoiceDate: $('#InvoiceDate').val(),
TransferDate: $('#TransferDate').val(),
TransferPlace: $('#TransferPlace').val(),
InvoiceDescription: $('#InvoiceDescription').val()
};
arr.push(item)
})
Completely untested. See JQuery Datatables search within input and select on how to update the DT internals when form controls is changing. Otherwise you will just get return default / original values.

ajax request in ckeditor

<table align="left" width="100%" >
<tr>
<td>
<div class="form">
<table width="500" cellpadding="5" cellspacing="5">
<tr>
<td>
<form name="frmlist" id="frmlist" action="check.php" method="POST" enctype="multipart/form-data">
<table width="802" style="border-collapse: collapse;">
<tr>
<td width="20">1</td>
<td width="120"><span class="form_title">Brand Name<span style="color: rgb(255, 0, 0); padding-left: 2px;">*</span></span></td>
<td><select name="brand" id="Category_type" onchange="get_states();"><?php
if($count>0){
while($row=mysql_fetch_assoc($q)){
echo '<option value='.$row['uniq_id'].'>'.$row['brand_name'].'</option>';
}}?>
</select></td>
</tr>
<tr height="10"></tr>
<tr>
<td colspan="3" width="1000"><textarea cols="1000" id="editor1" name="editor1" rows="1000">
<div id="get_state"></div></textarea>
</td>
</tr>
<script>
var editor;
function createEditor( languageCode ) {
if ( editor )
editor.destroy();
CKEDITOR.replace( 'editor1', {
extraPlugins: 'stylesheetparser',contentsCss: 'css/main.css',stylesSet: []
});
}
// At page startup, load the default language:
createEditor( '' );
</script>
<div>
</table>
<input type="submit" name="partner_1" value="SUBMIT" class="sub" ></div>
</form>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
function get_states() { // Call to ajax function
var Category_type = $('#Category_type').val();
console.log(Category_type);
var dataString = "Category_type="+Category_type;
//console.log(Category_type);
$.ajax({
type: "POST",
url: "ajax_partner.php", // Name of the php files
data: dataString,
success: function(html)
{
$("#get_state").html(html);
}
});
}
</script>
</body>
</html>
first there is a dropdown which brings the value from the database , When user click on any value , It send a ajax request through which I get the value and get the html from it place it between the div which has id get_state
I am using a check editor so that the user can see and edit his work
i have checked it on my console and its bringing the data so please anybody can help me