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));}
}
?>
Related
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>
Is there any ways to set a textarea when I clicked a radio button at some row (<tr>) ?
function changeTeks(i){
var teks = '';
var row = $(this).parents('tr');
if(i == '1'){
teks = row.find('input[name="brazil[]"]').val();
}else if(i == '2'){
teks = row.find('input[name="normal[]"]').val();
}else if(i == '3'){
teks = row.find('input[name="gagal[]"]').val();
}else{
teks = "belum";
}
row.find('textarea[name="hasil[]"]').text(teks);
console.log(teks);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 1' />
<input type='hidden' name='normal[]' value='not yet in test 1 ' />
<input type='hidden' name='brazil[]' value='success in test 1' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 1</td>
<td><input type='radio' name='target0[]' value='1' onclick='changeTeks(1)' />
</td>
<td><input type='radio' name='target0[]' value='2' onclick='changeTeks(2)' />
</td>
<td><input type='radio' name='target0[]' value='3' onclick='changeTeks(3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 2' />
<input type='hidden' name='normal[]' value='not yet in test 2' />
<input type='hidden' name='brazil[]' value='success in test 2' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 2</td>
<td><input type='radio' name='target1[]' value='1' onclick='changeTeks(1)' />
</td>
<td><input type='radio' name='target1[]' value='2' onclick='changeTeks(2)' />
</td>
<td><input type='radio' name='target1[]' value='3' onclick='changeTeks(3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 3' />
<input type='hidden' name='normal[]' value='not yet in test 3' />
<input type='hidden' name='brazil[]' value='success in test 3' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 3</td>
<td><input type='radio' name='target2[]' value='1' onclick='changeTeks(1)' />
</td>
<td><input type='radio' name='target2[]' value='2' onclick='changeTeks(2)' />
</td>
<td><input type='radio' name='target2[]' value='3' onclick='changeTeks(3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
</table>
I always get undefined value from the parent. I want to fill textarea with text in input type hidden value for each row (because this hidden value is different for each row)
From the Pranav's comment pass this in your function and the use it inside.
function changeTeks(ele,i){
var teks = '';
var row = $(ele).closest('tr');
if(i == '1'){
teks = row.find('input[name="brazil[]"]').val();
}else if(i == '2'){
teks = row.find('input[name="normal[]"]').val();
}else if(i == '3'){
teks = row.find('input[name="gagal[]"]').val();
}else{
teks = "belum";
}
row.find('textarea[name="hasil[]"]').html(teks);
console.log(teks);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 1' />
<input type='hidden' name='normal[]' value='not yet in test 1 ' />
<input type='hidden' name='brazil[]' value='success in test 1' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 1</td>
<td><input type='radio' name='target0[]' value='1' onclick='changeTeks(this,1)' />
</td>
<td><input type='radio' name='target0[]' value='2' onclick='changeTeks(this,2)' />
</td>
<td><input type='radio' name='target0[]' value='3' onclick='changeTeks(this,3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 2' />
<input type='hidden' name='normal[]' value='not yet in test 2' />
<input type='hidden' name='brazil[]' value='success in test 2' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 2</td>
<td><input type='radio' name='target1[]' value='1' onclick='changeTeks(this,1)' />
</td>
<td><input type='radio' name='target1[]' value='2' onclick='changeTeks(this,2)' />
</td>
<td><input type='radio' name='target1[]' value='3' onclick='changeTeks(this,3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
<tr>
<td>1</td>
<input type='hidden' name='gagal[]' value='fail in test 3' />
<input type='hidden' name='normal[]' value='not yet in test 3' />
<input type='hidden' name='brazil[]' value='success in test 3' />
<td><input type='hidden' name='lingkup[]' value='30' />Test 3</td>
<td><input type='radio' name='target2[]' value='1' onclick='changeTeks(this,1)' />
</td>
<td><input type='radio' name='target2[]' value='2' onclick='changeTeks(this,2)' />
</td>
<td><input type='radio' name='target2[]' value='3' onclick='changeTeks(this,3)' />
</td>
<td><textarea name='hasil[]' class='form-control'></textarea></td>
</tr>
</table>
///some connect to database code here...
<form action="update.php" method="post">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="10">Index</th>
<th>Item</th>
<th>numbers</th>
</tr>
<?php
while($row = mysql_fetch_array($query)){
echo"
<tr>
<td><input type='text' name='indexNumber' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number' class='txtexample'>".$row['number']."</textarea></td>
</tr>
";}?>
<tr><td colspan="3" align="right"><input type="submit" value="Update"/></td></tr>
</table>
Above is my code, I need update all column of table to my database, if I click submit, just update the last column only.
What wrong in my code? if use javascript, how to solve it?
<?php
include 'connect.php';
$index= $_POST["indexNumber"];
$item1= $_POST["item"];
$number1= $_POST["number"];
$query=mysql_query("UPDATE `file` SET `item`='$item1' WHERE `indexNumber`='$index';");
echo "<script language=javascript>alert('Update Successful');window.location='index.php'</script>";
?>
Above is update.php
You need to use array for this.
<tr>
<td><input type='text' name='indexNumber[]' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item[]' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number[]' class='txtexample'>".$row['number']."</textarea></td>
</tr>
Please check updated script
///some connect to database code here...
<form action="update.php" method="post">
<table width="100%" border="1" cellpadding="0" cellspacing="0">
<tr>
<th width="10">Index</th>
<th>Item</th>
<th>numbers</th>
</tr>
<?php
while($row = mysql_fetch_array($query)){
echo"
<tr>
<td><input type='text' name='indexNumber[]' value='".$row['indexNumber']."' readonly='readonly' size='4' border='0'></input></td>
<td><textarea name='item[]' rows='2' readonly='readonly'>".$row['item']."</textarea></td>
<td><textarea name='number[]' class='txtexample'>".$row['number']."</textarea></td>
</tr>
";}?>
<tr><td colspan="3" align="right"><input type="submit" value="Update"/></td></tr>
</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];
}
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>