Ragith Thomas Ragith Thomas - 1 month ago 5
jQuery Question

How to get dynamic table row values to insert into mysql database when checking the checkbox in jquery

Please help me. Thanks in advance. Actually i have a html table with dynamic rows through for looping and submit button at the bottom. At the beginning of the row there is a checkbox , so how can i insert only the particular checked checkboxes rows values into mysql database. For example if i check first row and third row then, only that particular row datas should insert into mysql database.
My current code is inserting all the table rows into mysql database, why because i am using each function in my jquery code. So please help me how can i get only the selected row values to insert into database when checking the checkboxes and clicking submit button. In my code the php syntax are in cakephp just i need to pass only the selected checkbox entire rows values

My code as below:
<!DOCTYPE html>
<html lang="en">
<head>
<?php echo $this->Html->css('jquery-ui.min.css'); ?>
<?php echo $this->Html->script('jquery.js'); ?>
<?php echo $this->Html->script('jquery-ui.min.js'); ?>
<?php echo $this->Html->script('jquery.validate.min'); ?>

<?php echo $this->Html->css('sb-admin-2'); ?>
<?php echo $this->Html->css('sb-admin-2.min'); ?>
<?php echo $this->Html->script('sb-admin-2'); ?>
<?php echo $this->Html->script('sb-admin-2.min'); ?>

<?php echo $this->Html->css('bootstrap.min');?>
<?php echo $this->Html->script('bootstrap');?>
<?php echo $this->Html->script('bootstrap.min'); ?>

<style type="text/css">
.row_selected {background-color: #BFCBD7;}
</style>
<script>
$('#orderSave').on('click', function(e) {

e.preventDefault();

$('.rowCont tr').each(function(row, tr){

var TableData = new Array();


TableData[row] = {


"userid" : $('#userid').text(),
"user_name" : $('#user').text(),
"date" : $(tr).find('td:eq(3)').text(),
"exam" : $(tr).find('td:eq(4)').text(),
"venue" : $(tr).find('td:eq(5)').text(),
"price" : $(tr).find('td:eq(6)').text(),
"total_orders" : $(tr).find('td:eq(7)').text(),
"amount" : $(tr).find('td:eq(8)').text(),
//"orders_completion" : $(tr).find('.chk')[0].checked
"orders_completion" : $('#checked').val()

}

TableData = JSON.stringify(TableData);
console.log(TableData);

//alert(TableData);

$.ajax({

type : "POST",
url : "/invl_exams/ordercompletion",
cache : "false",
data : {data:TableData},
success : function(result){

console.log(result);

}


});

});

});


});

</script>
</head>
<body>
<p>&nbsp;</p>
<?php $uid = $this->Session->read('Auth.User.id'); ?>
<p style="font-size:25px;text-align:left;padding: 0px 0px 0px 275px">User's Order List</p>
<div class="container">
<div class="row">
<div class="col-md-10">
<div><b>Name : </b><?php echo $usersadmins[0]['carts']['username']; ?>
<input type="hidden" name="hidename" value="<?php echo $usersadmins[0]['carts']['username']; ?>">
</div>
<div>&nbsp;</div>
<div>
<form role="form" accept-charset="utf-8" method="post" id="examForm" action="/invl_exams/users/orderCheck">
<table class="table table-bordered rowCont" id="sourcetable">
<tr>
<!--<th>S.No</th>-->
<th>Order Completion</th>
<th>Exam Date</th>
<th>Exam Name</th>
<th>Venue</th>
<th>Price / Course</th>
<th>No of Orders</th>
<th>Amount</th>


</tr>
<?php
$j = 1;
for($i=0;$i<count($usersadmins);$i++)
{

?>
<tr>
<!--<td><?php //echo $j++;?></td>-->
<td>
<input type="checkbox" name="chk[]" id="checked" class="chk" value="1">
</td>
<td style="display:none" id="userid"><?php echo $usersadmins[0]['carts']['userid']; ?></td>
<td style="display:none" id="user"><?php echo $usersadmins[0]['carts']['username'];?></td>
<td id="date"><?php echo $usersadmins[$i]['carts']['date']; ?></td>
<td id="exam"><?php echo $usersadmins[$i]['carts']['exam_name']; ?></td>
<td id="venue"><?php echo $usersadmins[$i]['carts']['venue']; ?></td>
<td id="price"><?php echo "$".$usersadmins[$i]['carts']['price']; ?></td>
<td id="torders"><?php echo $usersadmins[$i]['carts']['noOf_orders']; ?></td>
<td id="amount"><?php echo "$".$usersadmins[$i]['carts']['amount']; ?></td>

</tr>

<?php } ?>
<tr>
<td colspan="6">&nbsp;</td>
<td><button type="button" class="btn btn-success btn-xs" id="orderSave">Submit</button></td>
</tr>
</table>
</div>
</div>
</div>
</div>
</body>
</html>

Answer

Try this:

<script>
  $('#orderSave').on('click', function(e) {    

    e.preventDefault();          

   $('.rowCont tr').each(function(row, tr){ 
    if($(this).find('input').is(':checked')) {
    var TableData = new Array();


    TableData[row] = {   


              "userid" : $('#userid').text(), 
              "user_name" : $('#user').text(),   
              "date" : $(tr).find('td:eq(3)').text(),   
              "exam" : $(tr).find('td:eq(4)').text(),
              "venue" : $(tr).find('td:eq(5)').text(),
              "price" : $(tr).find('td:eq(6)').text(),
              "total_orders" : $(tr).find('td:eq(7)').text(), 
              "amount" : $(tr).find('td:eq(8)').text(), 
              //"orders_completion" : $(tr).find('.chk')[0].checked     
              "orders_completion" : $('#checked').val()    

          }

      TableData = JSON.stringify(TableData);            
      console.log(TableData);

      //alert(TableData);          

      $.ajax({  

       type : "POST",    
        url : "/invl_exams/ordercompletion",                  
        cache : "false",
        data :  {data:TableData},            
        success : function(result){  

          console.log(result);                               

        } 


       }); 
       }
     });

   });

   });  

</script>