We Keep Coding

wy is the function insert() cant insert (+,/,*,-,%,.)sign

I built this calculator with js and html and it work fine ,but when I put the code inside php in echo statement the(+,-,*,/,%,.)signs doesnt work i dont know why?I mean it should dipslay the number and the signs inside the textview the number are fine but the signs doesnt work
<?php echo"
<div class='wrap'>
<form name='form' class='former' action='php/bill.php' method='GET'>
<input class='textview' name='total' value='".$total."' placeholder='مجموع مشترياتك' readonly>
<input type='text' name='ID' value='".$ID."' hidden>
<input type='text' name='name' value='".$name."' hidden>
<input type='text' name='page' value='".$row['href']."' hidden>
<br>
<button class='submit' type='submit' name='submit'>جد</button>
</form>
<table>
<tr>
<td><input class='button' id='c' type='button' value='C' onclick='clean()'></td>
<td><input class='button' type='button' value='<' onclick='back()'></td>
<td><input class='button' type='button' value='%' onclick='insert('%')'></td>//here is th problem
<td><input class='button' type='button' value='/' onclick='insert('/')'></td>
</tr>
<tr>
<td><input class='button' type='button' value='7' onclick='insert(7)'></td>
<td><input class='button' type='button' value='8' onclick='insert(8)'></td>
<td><input class='button' type='button' value='9' onclick='insert(9)'></td>
<td><input class='button' type='button' value='×' onclick='insert('*')'></td>
</tr>
<tr>
<td><input class='button' type='button' value='4' onclick='insert(4)'></td>
<td><input class='button' type='button' value='5' onclick='insert(5)'></td>
<td><input class='button' type='button' value='6' onclick='insert(6)'></td>
<td><input class='button' type='button' value='-' onclick='insert('-')'></td>
</tr>
<tr>
<td><input class='button' type='button' value='1' onclick='insert(1)'></td>
<td><input class='button' type='button' value='2' onclick='insert(2)'></td>
<td><input class='button' type='button' value='3' onclick='insert(3)'></td>
<td><input class='button' type='button' value='+' onclick='insert('+')'></td>
</tr>
<tr>
<td colspan='2'><input class='button' type='button' style='width:106' value='0' onclick='insert(0)'></td>
<td><input class='button' type='button' value='.' onclick='insert('.')'></td>
<td><input class='button' type='button' value='=' onclick='equal()'></td>
</tr>
</table>
</div>";
?>
and this is the javascript code
function insert(num){
document.form.total.value = document.form.total.value+num;
}
function equal(){
var ex = document.form.total.value;
if(ex){
document.form.total.value =eval(ex);
}
}
function clean(){
document.form.total.value = "";
}
function back(){
var ex = document.form.total.value;
document.form.total.value = ex.substring(0,ex.length-1);
}
function forward(){
var ex = document.form.total.value;
document.form.total.value = ex.substring(0,ex.length+1);
}
just for know every thing work fine just th signe are not

Please use the double quotes after the onclick attribute. Currentlt browser is treating onlclick function like onclick='insert(' .
Working code.
function insert(num) {
document.form.total.value = document.form.total.value + num;
}
function equal() {
var ex = document.form.total.value;
if (ex) {
document.form.total.value = eval(ex);
}
}
function clean() {
document.form.total.value = "";
}
function back() {
var ex = document.form.total.value;
document.form.total.value = ex.substring(0, ex.length - 1);
}
function forward() {
var ex = document.form.total.value;
document.form.total.value = ex.substring(0, ex.length + 1);
}
<div class="wrap">
<form name="form" class="former" action="php/bill.php" method="GET">
<input
class="textview"
name="total"
value=''
placeholder="مجموع مشترياتك"
readonly
/>
<input type="text" name="ID" value='".$ID."' hidden />
<input type="text" name="name" value='".$name."' hidden />
<input type='text' name='page' value='".$row['href']."' hidden>
<br />
<button class="submit" type="submit" name="submit">جد</button>
</form>
<table>
<tr>
<td>
<input
class="button"
id="c"
type="button"
value="C"
onclick="clean()"
/>
</td>
<td>
<input class="button" type="button" value="<" onclick="back()" />
</td>
<td>
<input class='button' type='button' value='%' onclick="insert('%')">
</td>
//here is th problem
<td>
<input class='button' type='button' value='/' onclick="insert('/')">
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="7" onclick="insert(7)" />
</td>
<td>
<input class="button" type="button" value="8" onclick="insert(8)" />
</td>
<td>
<input class="button" type="button" value="9" onclick="insert(9)" />
</td>
<td>
<input class='button' type='button' value='×' onclick="insert('*')">
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="4" onclick="insert(4)" />
</td>
<td>
<input class="button" type="button" value="5" onclick="insert(5)" />
</td>
<td>
<input class="button" type="button" value="6" onclick="insert(6)" />
</td>
<td>
<input class='button' type='button' value='-' onclick="insert('-')">
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="1" onclick="insert(1)" />
</td>
<td>
<input class="button" type="button" value="2" onclick="insert(2)" />
</td>
<td>
<input class="button" type="button" value="3" onclick="insert(3)" />
</td>
<td>
<input class='button' type='button' value='+' onclick="insert('+')">
</td>
</tr>
<tr>
<td colspan="2">
<input
class="button"
type="button"
style="width:106"
value="0"
onclick="insert(0)"
/>
</td>
<td>
<input class='button' type='button' value='.' onclick="insert('.')">
</td>
<td>
<input class="button" type="button" value="=" onclick="equal()" />
</td>
</tr>
</table>
</div>

How to sum values inside loop using onchange javascript

how do i sum values inside loop using javascript onchange / onkeyup ? i put each of them, numbered id based on the loop...
here is my code example
<?php
$no = 1;
foreach($data as $array)
{
echo "<tr>";
echo "<td><input type='number' id='price".$no."' value='.$array['price'].'></td>";
echo "<td><input type='number' id='discount".$no."' onkeyup='keyup(".$no.")'></td>";
echo "<td><input type='number' id='total_price".$no."'></td>";
echo "</tr>";
$no++;
}
<input type='text' readonly id='total_payment'>
and here is my javascript
function keyup(id)
{
var price = $('#price'+id).val();
var discount= $('#discount'+id).val();
total_price = parseFloat(price) - parseFloat(discount);
$('#total_price'+id).val(total_price);
}
when i change the value of discount,it sum all of total_price field into total_payment.
how to do that ? i already set some form to show the example
JSFIDDLE: https://jsfiddle.net/20gb8n1g/

Attaching on keyup handlers on every input and then doing the math should work in a "in real time" fashion
$( document ).ready(function() {
$("body").on("keyup", "input", function(event){
$(this).closest(".line").find(".tot_price").val( $(this).closest(".line").find(".qty").val()*$(this).closest(".line").find(".value").val() );
$(this).closest(".line").find(".total_price").val( $(this).closest(".line").find(".tot_price").val()*1-$(this).closest(".line").find(".discount").val() );
var sum = 0;
$('.total_price').each(function() {
sum += Number($(this).val());
});
$(".grand_total").val(sum);
});
});
table {
border-collapse: collapse;
}
table, tr, td {
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>Quantity</td>
<td>Price</td>
<td>Total Price</td>
<td>Discount</td>
<td>Total Price (Discount)</td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
<tr class="line">
<td><input type='number' class="qty" value='2'></td>
<td><input type='number' class="value" value='20000'></td>
<td><input type='number' class="tot_price" value='40000'></td>
<td><input type='number' class="discount" min='0.1' step='0.1'></td>
<td><input type='number' value='40000' class='total_price'></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='4' style='text-align:right;'>Total Payment</td>
<td><input type='number' class="grand_total"></td>
</tr>
</tfoot>
</table>
Key parts:
Every row has the class "line" to stop looking up when you're doing the math
Every input has a class depending on what it is, instead of an id.
The handler basically does:
check where you triggered "keyup"
Look up to the "line" and then down to the "tot_price"
Change that value to the "value" * "qty" of that "line"
Look up to the "line" and then down to the "total_price"
Change that value to the "tot_price" * 1- "discount" of that "line"
Finally update "grand_total" with the sum of all those "total_price"s

I got it to work on my local machine by taking what you had on your JsFiddle and modifying one of the parseFloat() calls, which you incorrectley called using a capital L like this: parseFLoat(). This should do the trick for you.
Note: Be certain that your path you to your index.js(or whatever file your JavaScript is in) is correct within your <head> tag.
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>title</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="index.js"></script>
</head>
<body>
<table>
<tbody>
<tr>
<td>Quantity</td>
<td>Price</td>
<td>Total Price</td>
<td>Discount</td>
<td>Total Price (Discount)</td>
</tr>
<tr>
<td><input type='number' readonly value='2'></td>
<td><input type='number' readonly value='20000'></td>
<td><input type='number' id='tot_price1' readonly value='40000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount1' onkeyup='newFunc()'></td>
<td><input type='number' readonly value='40000' id='total_price1'></td>
</tr>
<tr>
<td><input type='number' readonly value='3'></td>
<td><input type='number' readonly value='30000'></td>
<td><input type='number' id='tot_price2' readonly value='90000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount2'></td>
<td><input type='number' readonly value='90000'></td>
</tr>
<tr>
<td><input type='number' readonly value='2'></td>
<td><input type='number' readonly value='10000'></td>
<td><input type='number' id='tot_price3' readonly value='20000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount3'></td>
<td><input type='number' readonly value='20000'></td>
</tr>
<tr>
<td><input type='number' readonly value='4'></td>
<td><input type='number' readonly value='10000'></td>
<td><input type='number' id='tot_price4' readonly value='40000'></td>
<td><input type='number' min='0.1' step='0.1' id='discount4'></td>
<td><input type='number' readonly value='40000'></td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan='4' style='text-align:right;'>Total Payment</td>
<td><input type='number' ></td>
</tr>
</tfoot>
</table>
</body>
</html>
JS:
function newFunc() {
var total_price = $('#tot_price1').val();
var discount = $('#discount1').val();
n_discount = parseFloat(discount) / 100;
v_discount = parseFloat(total_price) * parseFloat(n_discount);
t_discount = parseFloat(total_price) - parseFloat(v_discount);
$('#total_price1').val(t_discount);
}

i cant output the total amount of price. here is my code.
HTML.
<?php foreach($result as $row): ?>
<!-- <td><input type="hidden" name="material_id[]" value="<?= $order_no = generate_random(5); ?>">
</th> -->
<td><input type="hidden" name="material_id[]" value="<?= encode($row->material_id); ?>">
<?= $row->material_id; ?></td>
<td><input type="hidden" name="" value="<?= $row->material_name; ?>">
<?= $row->material_name; ?></td>
<td><input type="hidden" id="price'<?= $no;?>'" name="material_price[]" value="<?= $row->material_price; ?>">
<?= $row->material_price; ?></td>
<td <?php if($row->material_status == 'Inactive'){
echo 'class="text-danger"';
}else{
echo 'class="text-success"';
} ?> >
<?= $row->material_status; ?>
</td>
<div class="form-group">
<td>
<input type="number" onkeyup="autosum(<?= $no;?>)" id="qty'<?= $no;?>" value="" name="material_qty[]" class="form-control" style="width:80px;height: 30px;"/>
</td>
</div>
<div class="form-group">
<td>
<input type="text" readonly id="total'<?= $no;?>'" value="" class="form-control" style="width:80px;height: 30px;"/>
</td>
</div>
</tr>
<?php $no++; ?>
<?php endforeach;?>
<tr style='position:absolute;margin-left: 895px;margin-top:20px;'>
<td colspan='4' >Grand Total :</td>
<td><input type='number' id="grandtotal" class="form-control" readonly style="width: 80px;"></td>
</tr>
<input type="hidden" name="order_no" value="<?= $order_no = generate_random(5); ?>" style="width:50px;height: 30px;">
<input type="hidden" name="order_id" value="<?= $order_id =generate_random(5); ?>" style="width:50px;height: 30px;">
</tbody>
</table>
<br>
<br>
<br>
<button type="button" class="fadeIn second btn btn-secondary" style="margin-left:890px;margin-top:50px;">CANCEL</button>
<button type="submit" class="fadeIn second btn btn-danger" style="margin-left:1000px;margin-top:-50px;background-color: red;">ORDER</button>
</form>

jQuery loop calculation

I am trying to bring some records using php and do some calculations. What i am doing now is that, each row is having a dropdown with different currencies. When i select each currency, it calculates and shows certain values. Till here its working fine.
What i am trying to achieve is that if i select first currency dropdown, it should calculate the complete records calculations instead of selecting the currency of each rows. I guess i need to do some kind of loop in the jquery which calculates the rows.
Fiddle
Fiddle u can see the code, but not getting the output properly. so i just put the code in a server also. Link is http://spreadon.net/quot.html
Following is the part of jquery script for the currency dropdown.
$(window).load(function() {
$(document).ready(function() {
$("select").on('change', function() {
var dept_number = $(this).val();
var price = $(this).find(':selected').data('price');
var selected = $(this).find('option:selected').text();
if (selected == "INR") {
$(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
} else {
$(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
}
$(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val() / $(this).closest('table').find('.qty').val()).toFixed(3));
});
});
});

I have added working code which will guide you how to iterate through tr and it td on change of select
see the code it will give you hint about it.
and you have a power of this in each method usind this you can achive your goal.
$(document).ready(function() {
$("select").on('change', function() {
var dept_number = $(this).val();
var price = $(this).find(':selected').data('price');
var selected = $(this).find('option:selected').text();
if (selected == "INR") {
$(this).closest('table').find('.total1').val($(this).closest('table').find('.total').val());
} else {
$(this).closest('table').find('.total1').val((($(this).closest('table').find('.total').val() * price) / $(this).closest('table').find('.inrvalue').val()).toFixed(3));
}
$(this).closest('table').find('.price_unit').val(($(this).closest('table').find('.total1').val() / $(this).closest('table').find('.qty').val()).toFixed(3));
// this is upto your logic.
//now i have write my code which will ittrate through each row and column
$(".trToiitrate").each(function(e) {
alert("it is from tr");
$(this).find("td").each(function(e) {
alert("this is from td");
});
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name='cart' method='post' class='single' action='generate_quot_cust_edititems_save_complete.php?tender_id=151399'>
<input size='1' type='hidden' name='id[3]' value='1582' readonly/>
<input type='hidden' name='sum_input' id='sum_input' value=''>
<div align="center">
<table width="100%" border="1" style="border-collapse: collapse;">
<thead>
<tr bgcolor="#E6E6FA">
<th width=6%>SlNo</th>
<th width=15%>Description</th>
<th width=5%>Qty</th>
<th width=5%>Unit Price</th>
<th width=5%>Total</th>
<th width=8%>Total (INR)</th>
<th width=7%>Total Value</th>
<th width=7%>Currency</th>
<th width=7%>Total</th>
<th width=7%>Price/Unit</th>
</tr>
</thead>
</table>
</div>
<div align="center" class="base">
<table width="100%" border="1" style="border-collapse: collapse;">
<tbody id="people">
<tr class="trToiitrate">
<td width='6%'>
<input size='1' type='hidden' name='id[0]' value='1579' readonly/>
<input size='1' type='text' name='sl[0]' value='1' readonly/>
</td>
<td width='15%' id='addinput'>
<input type='text' size='19' id='item_name0' name='item_name[0]' placeholder='3M EC 2214 Regular Adhesive EpoxySize: 150ml box ' value='3M EC 2214 Regular Adhesive EpoxySize: 150ml box ' />
</td>
<td width='5%'>
<input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='10' readonly/>
</td>
<td width='5%'>
<input size='1' type='text' name='unitprice[0]' value='223.15' readonly/>
</td>
<td width='5%'>
<input size='5' type='text' name='total_old' value='2231.500' readonly/>
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='219479.000' />
</td>
<input class='txt' type='hidden' size='3' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
<td width='7%'>
<input class='total' size='6' type='text' id='add_value[]' name='add_value[]' value='373114'>
</td>
<td width='7%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=68.128019>INR</option>
<option value=GBP data-price=0.692675>GBP</option>
<option value=EUR data-price=0.895982>EUR</option>
<option selected="selected" value=SGD data-price=1.400105>SGD</option>
<option value=AUD data-price=1.3949>AUD</option>
<option value=CAD data-price=1.377725>CAD</option>
<option value=CHF data-price=0.986467>CHF</option>
<option value=JPY data-price=114.6032>JPY</option>
<option value=MYR data-price=4.136531>MYR</option>
<option value=ZAR data-price=15.73123>ZAR</option>
</select>
</td>
<input type="hidden" class="inrvalue" id="inrvalue" name="inrvalue" value="68.128019">
<input type="hidden" class="deptip" id="dept-input" />
<input type="hidden" class="priceip" id="price-input" />
<input type="hidden" class="cs" id="cs" name="cs" value="SGD">
<td width="7%">
<input size="5" type="text" data-value="" name='total1[]' id='total1[]' value="13531.598" readonly class="total1" />
</td>
<td width='7%'>
<input class='price_unit' size='6' type='text' id='price_unit[]' name='price_unit[]' value='1353.160' readonly>
</td>
</tr>
<div align="center" class="base">
<table width="100%" border="1" style="border-collapse: collapse;">
<tbody id="people">
<tr class="trToiitrate">
<td width='6%'>
<input size='1' type='hidden' name='id[1]' value='1580' readonly/>
<input size='1' type='text' name='sl[1]' value='2' readonly/>
</td>
<td width='15%' id='addinput'>
<input type='text' size='19' id='item_name1' name='item_name[1]' placeholder='CONAP CE-1170 ACRYLIC CONFORMAL COATING AS PER MIL-1-46058, Type AR,Size: 01 quart = 0.8 kg' value='CONAP CE-1170 ACRYLIC CONFORMAL COATING AS PER MIL-1-46058, Type AR,Size: 01 quart = 0.8 kg'
/>
</td>
<td width='5%'>
<input size='1' class='qty' type='text' name='qty[]' id='qty[]' value='2' readonly/>
</td>
<td width='5%'>
<input size='1' type='text' name='unitprice[1]' value='285' readonly/>
</td>
<td width='5%'>
<input size='5' type='text' name='total_old' value='570.000' readonly/>
</td>
<td width='8%'>
<input size='7' type='text' id='total_inr[]' name='total_inr[]' value='27735.800' />
</td>
<input class='txt' type='hidden' size='3' id='addon_value[]' name='addon_value[]' value='0' onchange='calcTotals()'>
<td width='7%'>
<input class='total' size='6' type='text' id='add_value[]' name='add_value[]' value='83207.4'>
</td>
<td width='7%'>
<select id='currency_change[]' name='currency_change[]'>
<option value=''>select</option>
<option value=USD data-price=1>USD</option>
<option value=INR data-price=68.128019>INR</option>
<option value=GBP data-price=0.692675>GBP</option>
<option value=EUR data-price=0.895982>EUR</option>
<option selected="selected" value=SGD data-price=1.400105>SGD</option>
<option value=AUD data-price=1.3949>AUD</option>
<option value=CAD data-price=1.377725>CAD</option>
<option value=CHF data-price=0.986467>CHF</option>
<option value=JPY data-price=114.6032>JPY</option>
<option value=MYR data-price=4.136531>MYR</option>
<option value=ZAR data-price=15.73123>ZAR</option>
</select>
</td>
<input type="hidden" class="inrvalue" id="inrvalue" name="inrvalue" value="68.128019">
<input type="hidden" class="deptip" id="dept-input" />
<input type="hidden" class="priceip" id="price-input" />
<input type="hidden" class="cs" id="cs" name="cs" value="SGD">
<td width="7%">
<input size="5" type="text" data-value="" name='total1[]' id='total1[]' value="1710.003" readonly class="total1" />
</td>
<td width='7%'>
<input class='price_unit' size='6' type='text' id='price_unit[]' name='price_unit[]' value='855.001' readonly>
</td>
</tr>
<div align="center" class="base">

Data tables form submit all records

I am using Jquery datatables to display all employees details in form, When I submit the form it post only first page form values. But I need to post all the form values
Here is my code
jQuery(document).ready(function(){
jQuery('#emptable').dataTable();
});
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<form name="emp" method="post">
<table cellpadding="0" cellspacing="0" border="0" class="stdtable" id="emptable">
<thead>
<tr>
<th class="head0">S.No</th>
<th class="head1">Name</th>
<th class="head0">Dep Name</th>
<th class="head1">Comments</th>
</tr>
</thead>
<tr>
<td>1<input type='hidden' name='serialno' value='1'></td>
<td>xyz<input type='hidden' name='name[]' value='xyz'></td>
<td>DE<input type='hidden' name='dep[]' value='DE'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>2<input type='hidden' name='serialno' value='2'></td>
<td>abc<input type='hidden' name='name[]' value='xyz'></td>
<td>DED<input type='hidden' name='dep[]' value='DED'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>3<input type='hidden' name='serialno' value='3'></td>
<td>adc<input type='hidden' name='name[]' value='adc'></td>
<td>EDE<input type='hidden' name='dep[]' value='EDE'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<!-- Like all 'N' records will display here -->
<input type="submit" name="submit" value="submit">
</table>
</form>
Here is My form submission code
<?php
include_once("includes/dbConnect.inc.php");
if(isset($_POST['submit'])){
$serialno=$_POST['serialno'];
for($i=0; $i< $serialno;)
{
$name=$_POST['name'][$i];
$dep=$_POST['dep'][$i];
$comments=$_POST['comments'][$i];
$query=mysqli_query($con, "INSERT INTO xyz(......remaining code )");
$i++;
}
if($query){echo "Inserted";}
else{echo("Error description: " . mysqli_error($con));}
}
?>
When I run this code and submit the form, Only first page values(First 10 row records) are inserting in to DB. But I need to insert all the table records into DB, Can any one please help me, How do I achieve this.

Try this. This is the working correct solution.
Html:
<link rel="stylesheet" href="http://cdn.datatables.net/1.10.5/css/jquery.dataTables.min.css" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<form id="formID" name="emp" method="post">
<table cellpadding="0" cellspacing="0" border="0" class="stdtable" id="emptable">
<thead>
<tr>
<th class="head0">S.No</th>
<th class="head1">Name</th>
<th class="head0">Dep Name</th>
<th class="head1">Comments</th>
</tr>
</thead>
<tr>
<td>1<input type='hidden' name='serialno[]' value='1'></td>
<td>xyz<input type='hidden' name='name[]' value='name1'></td>
<td>DE<input type='hidden' name='dep[]' value='dep1'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>2<input type='hidden' name='serialno[]' value='2'></td>
<td>abc<input type='hidden' name='name[]' value='name2'></td>
<td>DED<input type='hidden' name='dep[]' value='dep2'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>3<input type='hidden' name='serialno[]' value='3'></td>
<td>adc<input type='hidden' name='name[]' value='name3'></td>
<td>EDE<input type='hidden' name='dep[]' value='dep3'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>3<input type='hidden' name='serialno[]' value='4'></td>
<td>adc<input type='hidden' name='name[]' value='name4'></td>
<td>EDE<input type='hidden' name='dep[]' value='dep4'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>3<input type='hidden' name='serialno[]' value='5'></td>
<td>adc<input type='hidden' name='name[]' value='name5'></td>
<td>EDE<input type='hidden' name='dep[]' value='dep5'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>3<input type='hidden' name='serialno[]' value='6'></td>
<td>adc<input type='hidden' name='name[]' value='name6'></td>
<td>EDE<input type='hidden' name='dep[]' value='dep6'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>3<input type='hidden' name='serialno[]' value='7'></td>
<td>adc<input type='hidden' name='name[]' value='name7'></td>
<td>EDE<input type='hidden' name='dep[]' value='dep7'></td>
<td><textarea name="comments[]"></textarea></td>
</tr><tr>
<td>3<input type='hidden' name='serialno[]' value='8'></td>
<td>adc<input type='hidden' name='name[]' value='name8'></td>
<td>EDE<input type='hidden' name='dep[]' value='dep8'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>3<input type='hidden' name='serialno[]' value='9'></td>
<td>adc<input type='hidden' name='name[]' value='name9'></td>
<td>EDE<input type='hidden' name='dep[]' value='dep9'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>3<input type='hidden' name='serialno[]' value='10'></td>
<td>adc<input type='hidden' name='name[]' value='name10'></td>
<td>EDE<input type='hidden' name='dep[]' value='dep10'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>3<input type='hidden' name='serialno[]' value='11'></td>
<td>adc<input type='hidden' name='name[]' value='name11'></td>
<td>EDE<input type='hidden' name='dep[]' value='dep11'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<tr>
<td>3<input type='hidden' name='serialno[]' value='12'></td>
<td>adc<input type='hidden' name='name[]' value='name12'></td>
<td>EDE<input type='hidden' name='dep[]' value='dep11'></td>
<td><textarea name="comments[]"></textarea></td>
</tr>
<!-- Like all 'N' records will display here -->
<input type="submit" name="submit" value="submit">
</table>
</form>
JavaScript :
<script>
jQuery(document).ready(function(){
var oTable = jQuery('#emptable').dataTable();
$( "#formID" ).submit(function( event ) {
$.ajax({
type: "POST",
url: "post.php",
data: oTable.$('input, textarea').serialize(),
success: function(response){
alert(response);
}
});
event.preventDefault(); // Prevents default form submit
});
});
</script>
PHP (post.php) :
<?php
echo "<pre>"; print_r($_POST);
?>
Hope this will help.

Try this:
<?php
include_once("includes/dbConnect.inc.php");
if(isset($_POST['submit'])){
// $serialno=$_POST['serialno'];
for($i=0; $i< 1000)
{
$name=$_POST['name'][$i];
$dep=$_POST['dep'][$i];
$comments=$_POST['comments'][$i];
$query=mysqli_query($con, "INSERT INTO xyz(......remaining code )");
$i++;
}
if($query){echo "Inserted";}
else{echo("Error description: " . mysqli_error($con));}
}
?>

Reorder specific rows of a table

Hello All and Thanks in Advance
This is my problem. I have to sort tables. One table has say total 10 rows. 3 top rows of that tables have fixed values. I want to sort the remaining 7 rows values alphabetically on the basis of first column input.
The other table has same structure. That is first column of the table has an input of type text. But in this table the problem is complex i.e. there are total 12 rows. First 2 rows are fixed. They are not going to move. And also the last row is also fixed. The remaining in between needs to be sorted alphabetically again on the basis of input in the first column.
Third table is the easiest I guess. No rows are fixed. Neither at top nor at bottom. And the rows needs to be sorted.
The table structure that I am following is as follows
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='A fixed value' id='Heading' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
Kindly note that i do not want the reordering of the table rows. I only want the values inside the first two columns reordered in the rows and rows don't move. Which essentially means the hidden value of a particular row is not changed.
I don't know how to do it but what i feel is right way to go about it is fetch the values of the rows that needs to be sorted into say a JSON Array. Sort that array and then fill the rows with the data.
First Example
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='A fixed value' id='Heading1' disabled='disabled' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading2' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='2' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading3' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='3' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading4'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='4' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading5'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='5' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading6'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='6' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading7'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='7' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading8'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='8' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading9'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='9' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading10'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='10' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
Second Example
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' value='A fixed value' id='Heading1' disabled='disabled' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading2' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='2' />
</td>
</tr>
<tr>
<td> <input type='text' value='A fixed value' id='Heading3' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='3' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading4'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='4' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading5'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='5' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading6'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='6' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading7'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='7' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading8'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='8' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading9'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='9' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading10' value='A fixed value' disabled='disabled'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='10' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>
Third Example
<table>
<thead>
<tr>
<th>Column One Heading</th>
<th>Column Two Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td> <input type='text' id='Heading1' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='1' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading2' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='2' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading3'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='3' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading4'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='4' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading5'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='5' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading6'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='6' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading7'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='7' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading8'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='8' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading9'/></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='9' />
</td>
</tr>
<tr>
<td> <input type='text' id='Heading10' /></td>
<td>
<input type='number' value='' id='Amount' />
<br />
<input type='hidden' value='10' />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">Table Footer</td>
</tr>
</tfoot>
</table>

heres something real quick:
JSFiddle
http://jsfiddle.net/tcy0tmb5/
JS
function sortColumn(staticRowCount, columnToSort) {
var values = [];
$('tr').each(function(index, element) {
if (index > staticRowCount) {
var td = $(element).find('td').get(columnToSort);
values.push($(td).find('input').val());
}
});
//Do the sort
values.sort;
$('tr').each(function(index, element) {
if (index > staticRowCount) {
var val = values.shift();
//if you want to pull form the other side of the array use pop();
var td = $(element).find('td').get(columnToSort);
$(td).find('input').val(val);
}
});
}
sortColumn(3, 0);

You can add a specific class to all the elements that needs to be ordered.
If you just want to order the first elements value you can use this code, after adding a "toBeOrdered" class to the elements:
var objs = document.getElementsByClassName("toBeOrdered");
var array = [];
for ( var i = 0 ; i < objs.length ; i++ ) {
array[i] = objs[i].value;
}
array.sort();
for ( var i = 0 ; i < objs.length ; i++ ) {
objs[i].value = array[i];
}