We Keep Coding

How to get multiple row total by type

In the light of the code below, I want the return type to have a separate total and if the sales will be the result of the total sales input. In the meantime, the whole Total is going to Sales Total. Below are 2 roads as an example. There will be many more rows like this, each of which will have a type of sales / return. The following two inputs will fill up accordingly.
var grandTotal = 0;
$("input[name='qty[]']").each(function(index) {
var qty = $("input[name='qty[]']").eq(index).val();
var price = $("input[name='price[]']").eq(index).val();
var total = parseFloat(parseFloat(qty) * parseFloat(price)).toFixed(2);
if (!isNaN(total)) {
$("input[name='sub_total[]']").eq(index).val(total);
grandTotal = parseFloat(parseFloat(grandTotal) + parseFloat(total)).toFixed(2);
$('#total').val(grandTotal);
}
})
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<div onload="add_calcualte ()">
<table border="1">
<thead>
<tr>
<th>Type</th>
<th>Product</th>
<th>Quantity</th>
<th>Price </th>
<th>Sub Total</th>
</tr>
<tr>
<td>
<select name='type[]'>
<option value="Sale"> Sale</>
<option value="Retrun"> Retrun</>
</select>
</td>
<td><input name='product_name[]' value='Mobile' ></td>
<td><input type='text' name='qty[]' class='qty' value='5'></td>
<td><input type='number' name='price[]' class='price' value='15000'></td>
<td><input type='number' name='sub_total[]' class='sub_total'></td>
</tr>
<tr>
<td>
<select name='type[]'>
<option value="Retrun"> Retrun</>
<option value="Sale"> Sale</>
</select>
</td>
<td><input name='product_name[]' value='Headphone' ></td>
<td><input type='text' name='qty[]' class='qty' value='1'></td>
<td><input type='number' name='price[]' class='price' value='1200'></td>
<td><input type='number' name='sub_total[]' class='sub_total'></td>
</tr>
</thead>
</table>
<br>
Sales TOTAL:
<input class="form-control text-right" readonly type="text" id="total" name="total">
<hr>
Return TOTAL:
<input class="form-control text-right" readonly type="text" id="return" name="return">
</div>

You could do something like this:
function getTotals() {
var total = $("select option[value=Sale]:selected").closest("tr").map(function() {
return $(this).find(".sub_total").val()
}).get().reduce((a, b) => {
return +a + +b
})
$("#total").val(total)
var _return = $("select option[value=Return]:selected").closest("tr").map(function() {
return $(this).find(".sub_total").val()
}).get().reduce((a, b) => {
return +a + +b
})
$("#return").val(_return)
}
Also I assume <option value="Retrun"> Retrun</> should be <option value="Return"> Return</option>
Demo
$("input[name='qty[]']").each(function(index) {
var qty = $("input[name='qty[]']").eq(index).val();
var price = $("input[name='price[]']").eq(index).val();
var total = parseFloat(parseFloat(qty) * parseFloat(price)).toFixed(2);
if (!isNaN(total)) {
$("input[name='sub_total[]']").eq(index).val(total);
getTotals();
}
})
function getTotals() {
var total = $("select option[value=Sale]:selected").closest("tr").map(function() {
return $(this).find(".sub_total").val()
}).get().reduce((a, b) => {
return +a + +b
})
$("#total").val(total)
var _return = $("select option[value=Return]:selected").closest("tr").map(function() {
return $(this).find(".sub_total").val()
}).get().reduce((a, b) => {
return +a + +b
})
$("#return").val(_return)
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<div onload="add_calcualte ()">
<table border="1">
<thead>
<tr>
<th>Type</th>
<th>Product</th>
<th>Quantity</th>
<th>Price </th>
<th>Sub Total</th>
</tr>
<tr>
<td>
<select name='type[]'>
<option value="Sale"> Sale
</option>
<option value="Return"> Retrun
</option>
</select>
</td>
<td><input name='product_name[]' value='Mobile'></td>
<td><input type='text' name='qty[]' class='qty' value='5'></td>
<td><input type='number' name='price[]' class='price' value='15000'></td>
<td><input type='number' name='sub_total[]' class='sub_total'></td>
</tr>
<tr>
<td>
<select name='type[]'>
<option value="Return"> Retrun
</option>
<option value="Sale"> Sale
</option>
</select>
</td>
<td><input name='product_name[]' value='Headphone'></td>
<td><input type='text' name='qty[]' class='qty' value='1'></td>
<td><input type='number' name='price[]' class='price' value='1200'></td>
<td><input type='number' name='sub_total[]' class='sub_total'></td>
</tr>
<tr>
<td>
<select name='type[]'>
<option value="Return"> Retrun
</option>
<option value="Sale"> Sale
</option>
</select>
</td>
<td><input name='product_name[]' value='Headphone'></td>
<td><input type='text' name='qty[]' class='qty' value='1'></td>
<td><input type='number' name='price[]' class='price' value='1200'></td>
<td><input type='number' name='sub_total[]' class='sub_total'></td>
</tr>
</thead>
</table>
<br> Sales TOTAL:
<input class="form-control text-right" readonly type="text" id="total" name="total">
<hr> Return TOTAL:
<input class="form-control text-right" readonly type="text" id="return" name="return">
</div>

HTML table format with javascript style-change

In my HTML table I would like to hide a question and show this if a specific option is chosen in the dropdown. This works fine with the code below, but the table isn't formatted right (two <td> in the space of one)?
Demo (pick "Other type" at "Type")
How to fix this?
function setForm(value) {
if (value == '99') {
document.getElementById('form1').style = 'display:block;';
} else {
document.getElementById('form1').style = 'display:none;';
}
}
<form action="index.php" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td>First question:</td>
<td><input type="text" name="firstone" /></td>
</tr>
<tr>
<td>Type: </td>
<td>
<select id="type" name="type" onchange="setForm(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="99">Other type</option>
</select>
</td>
</tr>
<tr id="form1" style="display:none;">
<td>Specify type:</td>
<td><input type="text" name="othertype" /></td>
</tr>
<tr>
<td>Description:</td>
<td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
</tr>
</table>
<input type="submit" name="submit" value="Verstuur" />
</form>

Dont use block to display tr table element, just set style display to empty:
.style.display = '';
function setForm(value) {
if (value == '99') {
document.getElementById('form1').style.display = '';
} else {
document.getElementById('form1').style.display = 'none';
}
}
<form action="index.php" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td>First question:</td>
<td><input type="text" name="firstone" /></td>
</tr>
<tr>
<td>Type: </td>
<td>
<select id="type" name="type" onchange="setForm(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="99">Other type</option>
</select>
</td>
</tr>
<tr id="form1" style="display:none;">
<td>Specify type:</td>
<td><input type="text" name="othertype" /></td>
</tr>
<tr>
<td>Description:</td>
<td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
</tr>
</table>
<input type="submit" name="submit" value="Verstuur" />
</form>

The problem is, display:block for a tr element. Try this:
function setForm(value) {
if (value == '99') {
document.getElementById('form1').style = 'display:table-row;';
} else {
document.getElementById('form1').style = 'display:none;';
}
}
<form action="index.php" method="post">
<table cellspacing="0" cellpadding="0">
<tr>
<td>First question:</td>
<td><input type="text" name="firstone" /></td>
</tr>
<tr>
<td>Type: </td>
<td>
<select id="type" name="type" onchange="setForm(this.value)">
<option value="1">1</option>
<option value="2">2</option>
<option value="99">Other type</option>
</select>
</td>
</tr>
<tr id="form1" style="display:none;">
<td>Specify type:</td>
<td><input type="text" name="othertype" /></td>
</tr>
<tr>
<td>Description:</td>
<td><input type="text" name="description" minlength="10" maxlength="1000" /></td>
</tr>
</table>
<input type="submit" name="submit" value="Verstuur" />
</form>

My JavaScript generated form fields/data will no send with rest of form on submit?

I have an external JS file that when I select an amount for pieces on my form the relevant amount of fields are populated (see snippet). When I submit the form these populated fields are not submitted, its like there not even there. How can I make it so my form submits my pieces fields as well as the rest of the form? Please Help. Fiddles appreciated
$(function () {
$("select#pieces").change(function () {
$('div#pop').html('');
for (var c = 0, t = $("select#pieces").val(); c < t; c++) {
$('div#pop').append("<input type='Text' name='piecex[]' autocomplete='off' required placeholder='Piece Info' required style='width:415px;text-transform:uppercase; margin-bottom:10px; '>");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action='checkBeforePrint.php' method='POST'>
<table>
<tr>
<td>Reference *</td>
<td>
<input type='number' id='a' name='reference_end1' required size='7' maxlength='1' style='width:90px;font-family:Century Gothic; text-transform:uppercase; '>
<input type='Text' id='b' name='reference_end2' required size='7' maxlength='3' style='width:140px;font-family:Century Gothic; text-transform:uppercase;'>
<input type='number' id='c' name='reference_end3' required size='7' maxlength='6' style='width:190px;font-family:Century Gothic; text-transform:uppercase;'>
<!-- inputs combined above -->
<input type='hidden' id='reference_end' name='reference_end'>
</td>
</tr>
</table>
</div>
</br>
<div class="bookinform">
<table>
<tr>
<td>Name of Driver *</td>
<td>
<input type='Text' name='driver_name' required autocomplete="off" size='7' maxlength='25' style='width:250px;font-family:Century Gothic'>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Vehicle Reg *</td>
<td>
<input type='Text' name='Vehicle_Reg' required autocomplete="off" size='7' maxlength='15' style='width:250px;font-family:Century Gothic; text-transform:uppercase;'>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td valign='top'>Haulier *</td>
<td valign='top'>
<input type='Text' id="query" name='haulier' required style='width:250px; font-family:Century Gothic; text-transform:uppercase;'>
<tr>
<td></td>
</tr>
<!-- # Blank out the auto-complete haulier as per Richard Walkers request onKeyUp="GetResults(document.getElementById('query').value)" <div id="results" class="box">
</div>
-->
</td>
</tr>
<tr>
<td>Destination *</td>
<td>
<input type='Text' id="query2" name='destination' required style='width:250px; text-transform:uppercase;'>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
</br>
<div class="bookinform">
<table>
<tr>
<td>Pieces *</td>
<td>
<select id="pieces" name='pieces' required style='width:320px; font-family:Century Gothic;'>
<option>Select Number Of Pieces</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>?></select>
</td>
</tr>
<!--<tr><td>Labels</td><td>-->
<select name='labels' style="display:none">
<option value='0'>SAME AS PIECES</option>
<?php $count=1 ; while ($count<=100) { echo "<option value='".$count. "'>".$count. "</option>"; $count++; }; ?>
</select>
<!--</td></tr>-->
</table>
</br>
<!-- JQUERY POPULATES IN POP pieces fields-->
<div id="pop"></div>
</div>
<!-- Stockimgtest.php php part needs including -->
<!-- ** submit ** needs to happen on book in pieces -->
<!--Cant have a nested form -->
<div class="fileUpload btn btn-primary">
<!--<form action="" method="POST" enctype="multipart/form-data">-->
<h4>Attach image/s</h4>
<input type="file" name="homefiles[]" multiple value="Upload" style="background-color:#265A88;">
</br>
<!--<input type="submit" name="sendpic" value="Upload" style="background-color:#265A88;">-->
<!--</form> -->
</div>
<div class="bookinformbtn">
<div class="bookinform">
<input type='submit' name='FORM' value="Book-in Pieces" style='width:100%;font-family:Century Gothic; margin-top:10px; color:#2EFE2E; font-weight: bold;'>
</form>
</br>
</br>
<script src="grnjs.js"></script>

I'm not 100% sure, but I think you have to submit your data via AJAX because of the newly created fields.
$('.bookingform input[type=submit]').on('click', function(e){
e.preventDefault();
var data = //gather your data in here
$.ajax({
method: 'POST',
url: checkBeforePrint.php,
data: data,
success: function(data, status) {
//do something on success
},
error: function(err, status) {
//do something on err
},
complete: function(data) {
// do something on complete
}
});
})

What about checkBeforePrint.php. if you are doing $_POST["nameofyourfieldname"], what is the name that you are using?
try
$('div#pop').append("<input type='Text' name='piecex"+ c + "' autocomplete='off' required placeholder='Piece Info' required style='width:415px;text-transform:uppercase; margin-bottom:10px; '>");
in php file
$_POST["piecex0"];
and so on

$(function () {
$("select#pieces").change(function () {
$('div#pop').html('');
for (var c = 0, t = $("select#pieces").val(); c < t; c++) {
$('div#pop').append("<input type='Text' name='piecex[]' autocomplete='off' required placeholder='Piece Info' required style='width:415px;text-transform:uppercase; margin-bottom:10px; '>");
}
});
});
//Content of php is only var_dump($_POST);
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
</script>
<form action='checkBeforePrint.php' method='POST'>
<table>
<tr>
<td>Reference *</td>
<td>
<input type='number' id='a' name='reference_end1' required size='7' maxlength='1' style='width:90px;font-family:Century Gothic; text-transform:uppercase; '>
<input type='Text' id='b' name='reference_end2' required size='7' maxlength='3' style='width:140px;font-family:Century Gothic; text-transform:uppercase;'>
<input type='number' id='c' name='reference_end3' required size='7' maxlength='6' style='width:190px;font-family:Century Gothic; text-transform:uppercase;'>
<!-- inputs combined above -->
<input type='hidden' id='reference_end' name='reference_end'>
</td>
</tr>
</table>
</div>
</br>
<div class="bookinform">
<table>
<tr>
<td>Name of Driver *</td>
<td>
<input type='Text' name='driver_name' required autocomplete="off" size='7' maxlength='25' style='width:250px;font-family:Century Gothic'>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td>Vehicle Reg *</td>
<td>
<input type='Text' name='Vehicle_Reg' required autocomplete="off" size='7' maxlength='15' style='width:250px;font-family:Century Gothic; text-transform:uppercase;'>
</td>
</tr>
<tr>
<td></td>
</tr>
<tr>
<td valign='top'>Haulier *</td>
<td valign='top'>
<input type='Text' id="query" name='haulier' required style='width:250px; font-family:Century Gothic; text-transform:uppercase;'>
<tr>
<td></td>
</tr>
<!-- # Blank out the auto-complete haulier as per Richard Walkers request onKeyUp="GetResults(document.getElementById('query').value)" <div id="results" class="box">
</div>
-->
</td>
</tr>
<tr>
<td>Destination *</td>
<td>
<input type='Text' id="query2" name='destination' required style='width:250px; text-transform:uppercase;'>
</td>
</tr>
<tr>
<td></td>
</tr>
</table>
</div>
</br>
<div class="bookinform">
<table>
<tr>
<td>Pieces *</td>
<td>
<select id="pieces" name='pieces' required style='width:320px; font-family:Century Gothic;'>
<option>Select Number Of Pieces</option>
<option value=1>1</option>
<option value=2>2</option>
<option value=3>3</option>
<option value=4>4</option>?></select>
</td>
</tr>
<!--<tr><td>Labels</td><td>-->
<select name='labels' style="display:none">
<option value='0'>SAME AS PIECES</option>
<?php $count=1 ; while ($count<=100) { echo "<option value='".$count. "'>".$count. "</option>"; $count++; }; ?>
</select>
<!--</td></tr>-->
</table>
</br>
<!-- JQUERY POPULATES IN POP pieces fields-->
<div id="pop"></div>
</div>
<!-- Stockimgtest.php php part needs including -->
<!-- ** submit ** needs to happen on book in pieces -->
<!--Cant have a nested form -->
<div class="fileUpload btn btn-primary">
<!--<form action="" method="POST" enctype="multipart/form-data">-->
<h4>Attach image/s</h4>
<input type="file" name="homefiles[]" multiple value="Upload" style="background-color:#265A88;">
</br>
<!--<input type="submit" name="sendpic" value="Upload" style="background-color:#265A88;">-->
<!--</form> -->
</div>
<div class="bookinformbtn">
<div class="bookinform">
<input type='submit' name='FORM' value="Book-in Pieces" style='width:100%;font-family:Century Gothic; margin-top:10px; color:#2EFE2E; font-weight: bold;'>
</div>
</div>
</form>
</br>
</br>
</html>

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

fill text fetched from database into text fiels on selection of radio buttons

I am fetching data from database , for each of row data fetched I am creating a radio button against the row. The details of a land-sites are fetched here.
I have a form for booking these land sites, which takes land-site details and name and email of user.
So when a user selects a radio button, the details of land-site should be automatically filled in the form, How to achieve this.
<html>
<body>
<?php
$phase=$_GET["q"];
$sql ="select id, phase,size, facing, sply, status from plot where status='avail' and phase='$phase'";
$ret=mysql_query($sql, $connect);
echo "<form>";
echo"<div style='overflow-y:scroll;height:200px;float:left;' ><table border=1 >
<tr>
<td>select </td><td>phase</td> <td>site no.</td> <td>plot-size</td> <td>face</td> <td>sply</td> <td>status</td>
</tr>" ;
while($row = mysql_fetch_array($ret, MYSQL_ASSOC))
{
echo "<tr>".
"<td><input type='radio' name='book' value='book' onClick=\"whichForm('send_to_one');\" /></td>".
"<td>{$row['phase']} </td>".
"<td>{$row['id']} </td>".
"<td> {$row['size']} </td>".
"<td> {$row['facing']} </td>".
"<td>{$row['sply']} </td> ".
"<td>{$row['status']} </td> ".
"</tr>";
}
echo "</table></div>";
mysql_close($connect);
?>
<div id="send_to_one" style="float:right;padding:30px">
<table>
<tr>
<td>Name :</td><td><input type="text" name="name" value=""/></td>
</tr>
<tr>
<td>Mobile:</td><td><input type="text" name="mobile" value="" /></td>
</tr>
<tr>
<td>Email :</td> <td><input type="text" name="email" value="" /></td>
</tr>
<tr>
<td>Phase : </td> <td><select name="phase" id="phase">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select></td>
</tr>
<tr>
<td>Site :</td> <td> <input type="text" name="site" value="" id="site" /></td>
</tr>
<!--
<tr><td><span id="status"></span></td></tr>
-->
<tr>
<td><input type="radio" name="status" value="blocked" class="radioBtn" onclick="advance.disabled=true" /> block</td>
<td><input type="radio" name="status" value="booked" class="radioBtn" onclick="advance.disabled=false" /> book </td>
</tr>
<tr>
<td>Advance paid </td> <td><input type="text" name="advance" value="" id="textField" /></td>
</tr>
<tr><td><input type="submit" value="submit" /></td> <td> <input type="reset" value="clear all" /> </td></tr>
</table>
<?php echo "</form>"; ?>
</div>
<!-- div ends here -->
</body>
</html>