Develop Reference

Send Table Row Data via AJAX Based on Checkbox Checked

I have a table with multiple columns (index.php). One column is a checkbox. Whenever the checkbox is checked, it displays another column where you can select a quantity.
I want to then be able to hit a button called "Add to Order" and have it use AJAX to add any selected rows to the index-order.php page. After all selections have been made, I want to be able to click the "Checkout" button and have it take me to the index-order.php page where it should display all of the added selections in a table.
I know how to navigate to the index-order.php page so my main question is how can I add the selected rows to the page while using ajax and staying on the current page when doing so?
Index.php code:
<form name="form1" action="index-order.php">
<section id="checkout-btn">
<button type="submit" id="checkout" name="order">Checkout</button>
</section>
</form>
<form name="form2" method="POST" action="index-order.php">
<section id="addToOrder">
<button type="submit" class="order" id="order" name="order" value="AddToOrder">Add to Order</button>
</section>
<br>
<div id="my-div2" class="ui-widget">
<div class="ui-widget">
<table id="merchTable" cellspacing="5" class="sortable">
<thead>
<tr class="ui-widget-header">
<th class="sorttable_nosort"></th>
<th class="sorttable_nosort">Loc</th>
<th class="merchRow">Report Code</th>
<th class="merchRow">SKU</th>
<th class="merchRow">Special ID</th>
<th class="merchRow">Description</th>
<th class="merchRow">Quantity</th>
<th class="sorttable_nosort">Unit</th>
<th style="display: none;" class="num">Quantity #</th>
</tr>
</thead>
<tbody>
<?php foreach ($dbh->query($query) as $row) {?>
<tr>
<td class="ui-widget-content"><input type="checkbox" class="check" name="check"></td>
<td name="rows[0][0][loc]" class="loc ui-widget-content" id="loc-<?php echo intval ($row['Loc'])?>"><?php echo $row['Loc'];?></td>
<td name="rows[0][0][rp-code]" class="rp-code ui-widget-content" align="center" id="rp-code-<?php echo intval ($row['Rp-Code'])?>"><?php echo $row['Rp-Code'];?></td>
<td name="rows[0][0][sku]" class="sku ui-widget-content" id="sku-<?php echo intval ($row['SKU'])?>"><?php echo $row['SKU'];?></td>
<td name="rows[0][0][special-id]" class="special-id ui-widget-content" align="center" id="special-id-<?php echo intval ($row['Special-ID'])?>"><?php echo $row['Special-ID'];?></td>
<td name="rows[0][0][description]" class="description ui-widget-content" id="description-<?php echo intval ($row['Description'])?>"><?php echo $row['Description'];?></td>
<td name="rows[0][0][quantity]" class="quantity ui-widget-content" data-quantity="<?php echo $row['Quantity'] ?>" align="center" id="quantity-<?php echo intval ($row['Quantity'])?>"><?php echo $row['Quantity'];?></td>
<td name="rows[0][0][unit]" class="unit ui-widget-content" id="unit-<?php echo intval ($row['Unit'])?>"><?php echo $row['Unit'];?></td>
<td name="rows[0][0][quant]" style="display: none;" class="quantity_num ui-widget-content"><input type="textbox" style="width: 100px;" class="spinner" name="value" id="test"></td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
</div>
</form>
Index-order.php:
<?php if(isset($_POST['rows'])): ?>
<table cellspacing="20">
<tr align="center">
<th>Loc</th>
<th>Report Code</th>
<th>SKU</th>
<th>Special ID</th>
<th>Description</th>
<th>Quantity</th>
<th>Unit</th>
<th>Quantity #</th>
</tr>
<?php
foreach($_POST['rows'][0] as $row):
?>
<tr align="center">
<td><?php echo $row['loc']; ?></td>
<td><?php echo $row['rp-code']; ?></td>
<td><?php echo $row['sku']; ?></td>
<td><?php echo $row['special-id']; ?></td>
<td><?php echo $row['description']; ?></td>
<td><?php echo $row['quantity']; ?></td>
<td><?php echo $row['unit']; ?></td>
<td><?php echo $row['quant']; ?></td>
</tr>
<?php
endforeach;
?>
</table>
<?php endif; ?>
JavaScript (obviously needs some work. Posting what I have so far):
$(function () {
$('#form2').on('submit', function (e) {
if($('input.check').is(':checked')) {
$(this).closest('tr');
e.preventDefault();
var request = $.ajax({
type: 'post',
url: 'index-order.php',
data: $('#form2').serialize(),
success: function(){
alert('success');
},
error: function(){
alert('failure');
}
});
}
});
});

What you can do is get all the siblings of the current checked checkbox and based on that get all the columns and separate the data to finally send it via ajax.
You can do something like this:
$('#form2').on('submit', function (e) {
$checkbox = $(this).find('input.check:checked').parent('td'); //Finds the checked checkbox's column inside #form2
$otherColumns = $checkbox.nextAll(); //Gets all the siblings
});
The above code will get you all the other columns next to the checked checkbox inside your form. What you an do next is travel across $otherColumns and get each individual value using $otherColums.eq(n).html() where n is the number of the column you are trying to get.

fetch view table values in another page while click on the button in codeigniter

i have one view candidates page in my application..in that page i display all the candidate details..in that page i gave one button called SCHEDULE INTERVIEW..when user click on the button i want to display that particular row candidates values in another page..i want to get only name and email of the particular candidate like:
Name:******
email:*******
like this i want to display that particular candidate details..
View page:
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Mobile Number</th>
<th>experience</th>
<th>CTC</th>
<th>Expected Ctc</th>
<th>role</th>
<th>Current Location</th>
<th>Desired Location</th>
<th>Notice Period</th>
<th>Resume</th>
<th>Actions</th>
</tr>
</thead>
<?php foreach ($view_candidates as $idata) { ?>
<tbody>
<tr id="domain<?php echo $idata->user_id;?>">
<td class="cell checkbox">
<input type="checkbox" class="selectedId" name="selectedId" />
</td>
<td><?php echo $idata->first_name;?></td>
<td><?php echo $idata->last_name;?></td>
<td><?php echo $idata->email;?></td>
<td><?php echo $idata->mobile_number;?></td>
<td><?php echo $idata->experience;?></td>
<td><?php echo $idata->ctc;?></td>
<td><?php echo $idata->expectedctc;?></td>
<td><?php echo $idata->role_name;?></td>
<td><?php echo $idata->current_location;?></td>
<td><?php echo $idata->desired_location;?></td>
<td><?php echo $idata->notice_period;?></td>
<td><?php echo $idata->resume;?></td>
<td>
Schedule interview
</td>
</tr>
</tbody>
Can anyone help me..
How to do this..
Thanks in Advance..

Something like below:
<?php
// controller
function candidate_detail($candidateid)
{
$data = $this->model_name->get_candidate_detail($candidateid);
$viewData['getCandidate'] = $data;
$this->load->view('candidate_view',$viewData);
}
// model
function get_candidate_detail($candidateid)
{
$q = $this->db->query("SELECT * FROM tbl_name WHERE candidate_id = $candidateid");
if($q->num_rows() > 0) {
return $q->row_array();
} else {
return '';
}
}
?>
// view candidate_view
<div class="box-body">
<table id="example2" class="table table-bordered table-hover">
<thead>
<tr>
<th></th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Mobile Number</th>
<th>experience</th>
<th>CTC</th>
<th>Expected Ctc</th>
<th>role</th>
<th>Current Location</th>
<th>Desired Location</th>
<th>Notice Period</th>
<th>Resume</th>
</tr>
</thead>
<tbody>
<tr id="domain<?php echo $getCandidate['user_id'];?>">
<td class="cell checkbox">
<input type="checkbox" class="selectedId" name="selectedId" />
</td>
<td><?php echo $getCandidate['first_name'];?></td>
<td><?php echo $getCandidate['last_name'];?></td>
<td><?php echo $getCandidate['email'];?></td>
<td><?php echo $getCandidate['mobile_number'];?></td>
<td><?php echo $getCandidate['experience'];?></td>
<td><?php echo $getCandidate['ctc'];?></td>
<td><?php echo $getCandidate['expectedctc'];?></td>
<td><?php echo $getCandidate['role_name'];?></td>
<td><?php echo $getCandidate['current_location'];?></td>
<td><?php echo $getCandidate['desired_location'];?></td>
<td><?php echo $getCandidate['notice_period'];?></td>
<td><?php echo $getCandidate['resume'];?></td>
</tr>
</tbody>

Accessing cells in dynamically generated tables with jQuery

I have a file where php dynamically generates a bunch of tables and each of these tables also has a dynamically generated number of rows.
<?php foreach($trees as $tree): ?>
<div class="tree">
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<?php foreach($tree as $fruit => $fruitPrice) ?>
<tr>
<td><?php echo $fruit; ?></td>
<td><?php echo $fruitPrice; ?></td>
</tr>
<?php endforeach; ?>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
<table>
</div>
<?php endforeach; ?>
A resulting table would look something like this (but there would be close to 100 of those tables):
<div class="tree">
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td>$1.99</td>
</tr>
<tr>
<td>Banana</td>
<td>$1.29</td>
</tr>
<tr>
<td>Peach</td>
<td>$2.25</td>
</tr>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
<table>
</div>
How would I access the <td>s using jQuery to sum total of the values and display the total price in .totalPrice?
The table being dynamic irritates me here.
I tried to write a loop within a loop, but couldn't get it to access the correct fields.

This should do it:
<?php foreach($trees as $tree): ?>
<div class="tree">
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<?php foreach($tree as $fruit => $fruitPrice) ?>
<tr>
<td><?php echo $fruit; ?></td>
<td id="fruitPrice"><?php echo $fruitPrice; ?></td>
</tr>
<?php endforeach; ?>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
<table>
</div>
<?php endforeach; ?>
<script>
var totalPrice = null;
$("#fruitPrice").each(function()
{
totalPrice += $(this).text();
$(".totalPrice").text(totalPrice);
});
</script>

$("table").each(function () {
var totalSum = 0;
//find all tr in current table
var $dataRow = $(this).find('tbody tr');
$dataRow.each(function () {
$(this).find('td:nth-child(2)').each(function (i) {
// remove currency symbol
totalSum += parseFloat($(this).text().replace("$", ""));
});
});
var totalFixedValue = parseFloat(totalSum).toFixed(2);
//find totalPrice td and update with result
$(this).find(".totalPrice").html(totalFixedValue);
});

Give your price a class attribute to make easy the retrieve of values :
<tr>
<td><?php echo $fruit; ?></td>
<td class="price"><?php echo $fruitPrice; ?></td>
</tr>
Then get the value of price of every table :
$('table').each(function(){
var total = 0;
$('.price',this).each(function(){
total += parseFloat($(this).text().replace('$',''));
})
$('.totalPrice',this).text('$'+total);
})
Hope this helps.
$('table').each(function(){
var total = 0;
$('.price',this).each(function(){
total += parseFloat($(this).text().replace('$',''));
})
$('.totalPrice',this).text('$'+total);
})
table,table td{
border: 1px solid;
}
.totalPrice{
color: #FFF;
background-color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tree">
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apple</td>
<td class='price'>$1.99</td>
</tr>
<tr>
<td>Banana</td>
<td class='price'>$1.29</td>
</tr>
<tr>
<td>Peach</td>
<td class='price'>$2.25</td>
</tr>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Peach</td>
<td class='price'>$1</td>
</tr>
<tr>
<td>Banana</td>
<td class='price'>$3.9</td>
</tr>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
</table>
<br>
<table>
<thead>
<tr>
<th>Fruit</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Banana</td>
<td class='price'>$1.96</td>
</tr>
<tr>
<td>Apple</td>
<td class='price'>$6.25</td>
</tr>
<tr>
<td>Total:</td>
<td class="totalPrice"></td>
</tr>
</tbody>
</table>
</div>

How to get the id of the last element?

I have the list of products ,using below code
<table id="product">
<thead>
<tr>
<th style="width:30%;">Item Name</th>
<th style="width:11%;">Price</th>
<th style="width:11%;">Qty</th>
</tr>
</thead>
<tbody id="cart_contents">
<?php $i=1;
foreach($cart as $line=>$item)
{
?>
<tr>
<td style="align:center;"><?php echo $item['name']; ?></td>
<td><input type="text" id="price_<?php echo $i;?>" value="<?php echo $item['price']; ?>" name="price"></td>
<td id="qnty"><input type="text" id="quantity_<?php echo $i;?>" value="<?php echo $item['quantity']; ?>" name="quantity"></td>
</tr>
<?php
$i++;
}
?>
</tbody>
</table>
I need to edit quantity and price fields of last added product.
<table width="297px" style="float:left" class="CSSTableGenerator">
<tr>
<td onclick="click_quantity();">Qty</td>
<td onclick="click_price();"> <a href="javascript:void(0);" >Price</a></td>
</tr>
</table>
function click_quantity(){
$("#table register").find("td qnty").each(function(){
var id = $(this).attr("id");
alert(id);
})
}
How to get the last quantity field's id, after clicking the Qty link?
I have tried some codes, but I am unable to get last element's id.
EX : id names are quantity_1, quantity_2, quantity_3, quantity_4.
How to get quantity_4 (last elment's id)?

HTML
<table id="product">
<thead>
<tr>
<th style="width:30%;">Item Name</th>
<th style="width:11%;">Price</th>
<th style="width:11%;">Qty</th>
</tr>
</thead>
<tbody id="cart_contents">
<?php $i=1;
foreach($cart as $line=>$item)
{
?>
<tr>
<td style="align:center;"><?php echo $item['name']; ?></td>
<td>
<input type="text" id="price_<?php echo $i;?>" value="<?php echo $item['price']; ?>" name="price"/>
</td>
<td class="qnty">
<input class="qnty_input" type="text" id="quantity_<?php echo $i;?>" value="<?php echo $item['quantity']; ?>" name="quantity"/>
</td>
</tr>
<?php
$i++;
} ?>
</tbody>
</table>
JS Code
function click_quantity(){
var id = $("#cart_contents tr:last-child .qnty_input").attr("id");
// rest of your logic
}

1) you are using same ID in loop, that is not valid;
2) I think your js is wrong, use : $("#register").find("#qnty"), but has to be find('.qnty')

Try this one.
var last_id = $( 'table tbody tr td:last-child').attr( 'id' );

To get the last row(td) in table you can use this,
$('table tbody tr td:last-child')

In order to get last child element you can make use of Try to use last property of jquery
$("#cart_contents td:last").find('input[type=text]').attr('id');

$("#cart_contents td:last")
using this you'll find last column in each row so you have to use
$("#cart_contents tr:last-child td.qnty")

How to enable/disable rows of textbox that enable rows are textbox which I selected with checkbox

I have a table of list student, I want to insert value of students into database. But this table have multiple checkbox, if I choose the checkbox of the table, the checkbox must be enable. I want to insert the value of student which the checkbox are enable. I used codeigniter to build this web.
this is my source
<?php $this->load->view("asisten/v_header");?>
<?php $this->load->view("asisten/v_top_menu");?>
<?php $this->load->view("asisten/v_sidebar");?>
<div class="content">
<div class="header">
<h1 class="page-title">Form Input Nilai Praktikum</h1>
</div>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th></th>
<th>No</th>
<th>Nim</th>
<th>Nama Praktikan</th>
<th>Nilai 1</th>
<th>Nilai 2</th>
<th>Nilai 3</th>
<th>Nilai 4</th>
</tr>
</thead>
<tbody>
<?php if($list_praktikan->num_rows()>0)
{
$no=$off+1;
foreach($list_praktikan->result()as $data):
?>
<tr>
<td><input type="checkbox"/></td>
<td><?php echo $no;?></td>
<td><?php echo $data->nim;?></td>
<td><?php echo $data->nama;?></td>
<td><input type="text" class="input-mini" name="id_nilai1"/></td>
<td><input type="text" class="input-mini" name="id_nilai2"/></td>
<td><input type="text" class="input-mini" name="id_nilai3"/></td>
<td><input type="text" class="input-mini" name="id_nilai4"/></td>
</tr>
<?php
$no++;
endforeach;
}?>
</tbody>
</table>
</div>
<?php $this->load->view("asisten/v_footer");?>

I think
<input type="checkbox" id="name<?php $i;?>" onclick="encChbox(<?php echo $i;?>)" value="">
$i means increment a variable for identify the checkbox. with the help of the function parameter we can get the value of that checkbox.
encChbox is a function. we can write the process in this function. insert or other process . This is one idea with the help of the idea you can....