I have a table that displays the result of a query. I am using codeigniter by the way. I want to add a checkbox in every row. And everytime a checkbox is checked, I will enable the edit button and the delete button..
I made it this way but only on the first row, it enable and disable the button:
<div style="margin-top: 10px;margin-left: 10px;margin-bottom: 10px">
<a type="button" class="btn btn-default" href="<?php echo site_url('home/create')?>" ><span class=" fa fa-plus-circle"></span> Create </a>
<button type="button" id="edit" class="btn btn-default" disabled><span class=" fa fa-edit "></span> Edit</button>
<button type="button" class="btn btn-default" disabled > <span class=" fa fa-trash-o"></span> Delete</button>
</div>
<div class="table-responsive" style="margin-right: 10px;margin-left: 10px;margin-bottom: 10px">
<table class="table table-bordered table-hover table-striped" id="recorddata">
<thead class="header">
<tr class="well">
<th style="width: 1px"></th>
<th style="font-size: 14px;" >Date</th>
<th style="font-size: 14px;">Name</th>
<th style="font-size: 14px;">Status</th>
</tr>
</thead>
<tbody >
<?php if($result!=null){
foreach($result as $row){?>
<tr>
<td align="center"><input type="checkbox" id="recs" name="recs[]" value="<?php echo $row->id;?>"/></td>
<td style="font-size: 15px;padding-left: 20px;"><?php echo $row->datee;?></td>
<td style="font-size: 15px;padding-left: 20px;"><?php echo $row->name;?></td>
<td style="font-size: 15px;padding-left: 20px;"><?php echo $row->status;?></td>
</tr>
<?php }
}
?>
</tbody>
</table><!-- END Table--></div>
here's my jquery:
<script>
$('#recs').click(function() {
if($('#recs').is(":checked")){
$('#edit').prop('disabled',false)
}
else{
$('#edit').prop('disabled',true)
}
});
</script>
You have to class instead of using id for the checkbox. Check if any of the checkbox is checked and enable edit, delete button.
<td align="center"><input type="checkbox" class="recs" name="recs[]" value="<?php echo $row->id;?>"/></td>
Add class in this line
<td align="center"><input type="checkbox" id="recs" name="recs[]" value="<?php echo $row->id;?>"/></td>
Bind jquery on change event like
$(document).ready(function(){
$('.your_class').click(function(){
// check if checkbox is checked
var checked = false;
$(".your_class").each(function () {
if($(this).is(":checked"))
{
checked = true;
}
});
if(checked)
{
// enable buttons here
return;
}
// disable buttons here
});
});
Related
In our website I have a cart table that contains all of the items. Each row has checkboxes. By clicking the checkboxes, it will determine the total price of your cart the you will checkout. At first I don't know what the title of my question should be as I have 2 problems.
First, when I clicked all the checkboxes, the Select all checkbox will be checked, and if I unchecked one, the Select all will be unchecked.
Second, is properly getting the total prices based on checkboxes. I am able to get the total price when I tick the checkboxes. It all adds up but if I tick the Select all while all other checkboxes are checked, it adds another total which is not right. Please see the demo I uploaded. Total Price Computation Demo
I'm guessing its because I have put computation in Select all also, but I actually run out of ideas on how to achieve this.
Here are my codes
Table
<table class="table">
<thead>
<tr>
<th><input type="checkbox" name="" id="" class="select_all"></th>
<th scope="col">Preview</th>
<th scope="col">Product</th>
<th class="text-right" scope="col">Price</th>
<th scope="col">Quantity</th>
<th class="text-right" scope="col">Total</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="product-container">
<?php
$cart_items = $cakeOrdering->get_data("SELECT * FROM vw_cart_items ORDER BY cart_itemID DESC");
if(!empty($cart_items)){
if(is_array($cart_items) || is_object($cart_items)){
foreach($cart_items as $cart_item){
?>
<tr data-id="<?php echo $cart_item['cart_itemID'];?>">
<td><input type="checkbox" name="cart_checkbox" class="cart_checkbox"></td>
<td>
<img src="../img/cake_uploads/<?php echo $cart_item['image']; ?>" alt="<?php $cart_item['prod_name']; ?>" class="cart_preview">
</td>
<td><?php echo $cart_item['prod_name']; ?></td>
<td class="price text-right" data-price="<?php echo $cart_item['price']; ?>">₱ <?php echo number_format($cart_item['price'], 2, ".", ","); ?></td>
<td>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary minus_qty" type="button">-</button>
</div>
<input type="number" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="text-center quantity" aria-label="quantity" aria-describedby="quantity" value="<?php echo $cart_item['qty']; ?>" disabled>
<div class="input-group-append">
<button class="btn btn-outline-secondary add_qty" type="button">+</button>
</div>
</div>
</td>
<td class="total_price text-right" data-total_price="<?php echo $cart_item['total_price']; ?>">₱ <?php echo number_format($cart_item['total_price'], 2, ".", ",");?></td>
<td class="btn-action">
<i class="fa fa-pencil"></i>
<i class="fa fa-trash"></i>
</td>
</tr>
<?php }}} ?>
</tbody>
</table>
Script
var overall_total = 0;
$('.select_all').on('change', function(){
$('.cart_checkbox').not(this).prop('checked', this.checked);
if($(this).is(":checked")) {
$('.total_price').each(function(){
total_price = $(this).data('total_price');
overall_total = overall_total + parseFloat(total_price);
});
}else{
$('.total_price').each(function(){
total_price = $(this).data('total_price');
overall_total = overall_total - parseFloat(total_price);
});
}
$('.overall_total').text(formatToCurrency(overall_total));
});
$(".cart_checkbox").change(function(){
var total_price = $(this).closest('tr').find('.total_price').data('total_price');
if($(this).is(":checked")) {
overall_total = overall_total + parseFloat(total_price);
}else{
overall_total = overall_total - parseFloat(total_price);
}
$('.overall_total').text(formatToCurrency(overall_total));
})
For your first issue you can check if the length of total checkboxes and checked checkboxes are not equal depending this check/uncheck your select_all checkbox .
Now, for next issue i have move whole calculation part inside different function so whenever you need to total you can call this function and then loop through only checked trs row and change total values .
Demo Code :
$('.select_all').on('change', function() {
$('.cart_checkbox').not(this).prop('checked', this.checked);
sum(); //call this
});
$(".cart_checkbox").change(function() {
var total_length = $(".cart_checkbox").length;
var checked_length = $(".cart_checkbox:checked").length
//check if length less then total
if (checked_length < total_length) {
$('.select_all').prop('checked', false); //uncheck..
} else {
$('.select_all').prop('checked', true); //check
}
sum(); //call this
})
function sum() {
var overall_total = 0;
//loop through only checked trs..
$(".cart_checkbox:checked").closest("tr").find('.total_price').each(function() {
total_price = $(this).data('total_price');
overall_total = overall_total + parseFloat(total_price);
})
$('.overall_total').text(overall_total); //add your format fn
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.1/jquery.min.js"></script>
<table class="table">
<thead>
<tr>
<th><input type="checkbox" name="" id="" class="select_all"></th>
<th scope="col">Preview</th>
<th scope="col">Product</th>
<th class="text-right" scope="col">Price</th>
<th scope="col">Quantity</th>
<th class="text-right" scope="col">Total</th>
<th scope="col"></th>
</tr>
</thead>
<tbody class="product-container">
<tr data-id="1">
<td><input type="checkbox" name="cart_checkbox" class="cart_checkbox"></td>
<td>
<img src="../img/cake_uploads/<?php echo $cart_item['image']; ?>" alt="<?php $cart_item['prod_name']; ?>" class="cart_preview">
</td>
<td>A</td>
<td class="price text-right" data-price="34">₱ 34</td>
<td>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary minus_qty" type="button">-</button>
</div>
<input type="number" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="text-center quantity" aria-label="quantity" aria-describedby="quantity" value="<?php echo $cart_item['qty']; ?>" disabled>
<div class="input-group-append">
<button class="btn btn-outline-secondary add_qty" type="button">+</button>
</div>
</div>
</td>
<td class="total_price text-right" data-total_price="74">₱ 74</td>
<td class="btn-action">
<i class="fa fa-pencil"></i>
<i class="fa fa-trash"></i>
</td>
</tr>
<tr data-id="2">
<td><input type="checkbox" name="cart_checkbox" class="cart_checkbox"></td>
<td>
<img src="../img/cake_uploads/<?php echo $cart_item['image']; ?>" alt="<?php $cart_item['prod_name']; ?>" class="cart_preview">
</td>
<td>A2</td>
<td class="price text-right" data-price="34">₱ 34</td>
<td>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary minus_qty" type="button">-</button>
</div>
<input type="number" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="text-center quantity" aria-label="quantity" aria-describedby="quantity" value="<?php echo $cart_item['qty']; ?>" disabled>
<div class="input-group-append">
<button class="btn btn-outline-secondary add_qty" type="button">+</button>
</div>
</div>
</td>
<td class="total_price text-right" data-total_price="742">₱ 742</td>
<td class="btn-action">
<i class="fa fa-pencil"></i>
<i class="fa fa-trash"></i>
</td>
</tr>
<tr data-id="3">
<td><input type="checkbox" name="cart_checkbox" class="cart_checkbox"></td>
<td>
<img src="../img/cake_uploads/<?php echo $cart_item['image']; ?>" alt="<?php $cart_item['prod_name']; ?>" class="cart_preview">
</td>
<td>A3</td>
<td class="price text-right" data-price="343">₱ 343</td>
<td>
<div class="input-group input-group-sm mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary minus_qty" type="button">-</button>
</div>
<input type="number" onkeypress='return event.charCode >= 48 && event.charCode <= 57' class="text-center quantity" aria-label="quantity" aria-describedby="quantity" value="<?php echo $cart_item['qty']; ?>" disabled>
<div class="input-group-append">
<button class="btn btn-outline-secondary add_qty" type="button">+</button>
</div>
</div>
</td>
<td class="total_price text-right" data-total_price="743">₱ 743</td>
<td class="btn-action">
<i class="fa fa-pencil"></i>
<i class="fa fa-trash"></i>
</td>
</tr>
</tbody>
</table>
<span class="overall_total"></span>
Just make overall_total = 0 inside your $('.select_all').on('change' and it should work. And remove else portion.
$('.select_all').on('change', function(){
$('.cart_checkbox').not(this).prop('checked', this.checked);
// reset total value to 0 because in below every product values are being fetched and summed up.
overall_total = 0;
if($(this).is(":checked")) {
$('.total_price').each(function(){
total_price = $(this).data('total_price');
overall_total = overall_total + parseFloat(total_price);
});
}
//else{
// $('.total_price').each(function(){
// total_price = $(this).data('total_price');
// overall_total = overall_total - parseFloat(total_price);
// });
//}
$('.overall_total').text(formatToCurrency(overall_total));
});
<div class="col-md-6 hidden-xm hidden-sm">
<div class="col-md-12 hidden-xm"><h3>ההזמנה שלך</h3></div>
<div class="col-md-12 hidden-xm">
<div class="table-responsive hidden-xm">
<table class="table table-default">
<thead>
<tr>
<th class="text-right">סה"כ</th>
<th class="text-right">מוצר</th>
</tr>
</thead>
<tbody>
<?php
$totalPrice = 0;
$arr = [];
foreach($_SESSION['cart'] as $product){
$productDetails = get_product($product['id']);
array_push($arr,$product['amount']." x".$productDetails->get_name());
$totalPrice+= $productDetails->get_price()*$product['amount'];
?>
<tr>
<td class="text-right"> <?php echo $productDetails->get_price()*$product['amount']; ?>$</td>
<td class="text-right"><?php echo $productDetails->get_name()." <b>".$product['amount']."x</b>"; ?></td>
</tr>
<?php };?>
<tr>
<td class="total_price">משלוח</td>
<td>9$</td>
</tr>
<tr>
<td class="text-right total_price">סה"כ</td>
<td class="text-right"> <?php echo $totalPrice+9 ?>$</td>
</tr>
</tbody>
</table>
</div>
<div class="col-md-12 hidden-xm text-right"> אחריות מלאה על המוצרים ל-28 יום</div>
<input type="hidden" name="products" value="<?php echo implode("<br>",$arr) ?>">
<div class="text-left">
<input type="submit" name="submit" class="btn btn-lg btn-pay" value="שליחת הזמנה">
</div>
</div>
</div>
I've tried for pretty long time to find out why the : hidden-xm/hidden-sm not working for me. Can someone tell me what am i doing wrong?
also I want to notice that this div is inside a bigger container but I want to hide it if its at a mobile point of view.
I'ts hidden-xs instead of hidden-xm
I am using this html to display my table. I am looping through data to show multiple rows.
<table id="myTable" class="table table-bordered">
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php $srno=1;
for ($x=0; $x < count($quotes[0]->workOrderLineItem); $x++ ) {?>
<tr>
<td width="50%"><input type="text" name="detail[]" value="<?php echo $quotes[0]->workOrderLineItem[$x];?>" required=""</td>
<td width="10%"><input type="number" name="qty[]" value="<?php echo $quotes[0]->qty[$x];?>" required=""</td>
<td width="15%"><input type="number" name="price[]" value="<?php echo preg_replace("/[\$,]/", '', $quotes[0]->priceArray[$x]); ?>" required=""</td>
<td width="12%"><div class="inline"><input type="button" id="addButton" class="btn btn-primary btn-xs" value="Add"/></div><div class="inline"><input type="button" id="deleteButton" class="btn btn-primary btn-xs" value="Delete"/></div>
</tr>
<?php } ?>
</tbody>
</table>
I am then using this script to add and delete rows
$(function(){
$("#addButton").click(function(){
$(this).closest("tr").clone(true).appendTo("#myTable");
});
$("#deleteButton").click(function(){
var x = $('#myTable tr').length;
if(x == 2){
} else {
$(this).closest("tr").remove();
}
});
});
This works fine whenever I have a single table row, but when I have multiple rows the additional row "add" and "delete" buttons do not work. Only the first row buttons work. What is the best way to accomplish being able to delete and add rows from the additional rows?
remove the id from the td
<td width="12%"><div class="inline"><input type="button" class="addButton btn btn-primary btn-xs" value="Add"/></div><div class="inline"><input type="button" class="deleteButton btn btn-primary btn-xs" value="Delete"/></div>
And then change the click selector to $(".addButton") and $(".deleteButton") respectivel
can you give me the content of the $quotes var to reproduce your problem in my local environment ?
Thanks, this is the code you should be using, I just made some changes in the $quote var
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-3.1.0.min.js"></script>
</head>
<body>
<table id="myTable" class="table table-bordered">
<thead>
<tr>
<th>Item</th>
<th>Qty</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php
$quotes = [];
$quotes[] = ['workOrderLineItem' => ["Color Change","Printed Wrap"], 'qty' => [3,2], 'price' => [267, 784] ];
$srno=1;
for ($x=0; $x < count($quotes[0]['workOrderLineItem']); $x++ ) {?>
<tr>
<td width="50%"><input type="text" name="detail[]" value="<?php echo $quotes[0]['workOrderLineItem'][$x];?>" required=""</td>
<td width="10%"><input type="number" name="qty[]" value="<?php echo $quotes[0]['qty'][$x];?>" required=""</td>
<td width="15%"><input type="number" name="price[]" value="<?php echo preg_replace("/[\$,]/", '', $quotes[0]['price'][$x]); ?>" required=""</td>
<td width="12%"><div class="inline"><input type="button" name="addButton" class="btn btn-primary btn-xs" value="Add"/></div><div class="inline"><input type="button" name="deleteButton" class="btn btn-primary btn-xs" value="Delete"/></div>
</tr>
<?php } ?>
</tbody>
</table>
<script type="text/javascript">
$(function(){
$("input[name='addButton']").on('click', function(){
$newElement = $(this).closest("tr").clone(true);
$("#myTable").append($newElement);
});
$("input[name='deleteButton']").click(function(){
var x = $('#myTable tr').length;
if(x == 2){
} else {
$(this).closest("tr").remove();
}
});
});
</script>
</body>
</html>
As far as I know this code must work but I when I coded it it does not work
The problem is that the form does not submit. How can I solve this ?
I don't even get the value of the checkbox when checked .
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
<th>Item Photo</th>
<th>Item Name</th>
<th>Stocks</th>
<th>Date Posted</th>
<th>Price</th>
<th>Actions</th>
</thead>
<tbody>
<form action ="<?php echo base_url()?>Shop/test" method="POST">
<?php
$x=1;
foreach($shop_items as $key)
{
?>
<tr>
<td><input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id?>"> <?php echo $x;?> </td>
<td><center><img src="<?php echo base_url()?>uploads/items_main/<?php echo $key->shop_item_main_pic;?>" style = "width:60px;height:50px;"alt=""></center></td>
<td><?php echo mb_strimwidth($key->shop_item_name, 0, 18,"...");?></td>
<td style="width:10px;"><center><button><span class="fa fa-eye"></span></button></center></td>
<td><?php echo date('F,d,Y',strtotime($key->shop_item_date_posted))?></td>
<td><?php if(!$key->shop_item_sale){ echo number_format($key->shop_item_orig_price);}
else{ echo "<font color='red'>".number_format(intval($key->shop_item_orig_price-($key->shop_item_orig_price*($key->shop_item_sale/100))))."</font> ";}?></td>
<td>
Bid | View
</td>
</tr>
<?php
$x+=1;
}
?>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete"><span class="fa fa-times"></span> delete</button>
</form>
</tbody>
In the Controller, the structure is like this
if(isset($_POST['delete']))
{
if (isset($_POST["cb"])) {
// Checkbox is checked.
$cb = $_POST["cb"];
echo $cb;
}
else {
$cb = $_POST["cb"];
echo $cb;
}
}
If you emit all the PHP you are left with bad HTML:
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
</thead>
<tbody>
<form action="<?php echo base_url() ?>Shop/test" method="POST">
<tr>
<td>
<input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id ?>"> <?php echo $x; ?>
</td>
</tr>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete">
<span class="fa fa-times"></span> delete
</button>
</form>
</tbody>
</table>
form shoul not be a child of tbody. Any content in a table should be inside th or td tags. You should place the form outside of the table and the button inside td tags:
<form action="<?php echo base_url() ?>Shop/test" method="POST">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<th>ID</th>
</thead>
<tbody>
<tr>
<td>
<input class="checkbox" type="checkbox" name="cb[]" value="<?php $key->shop_item_id ?>"> <?php echo $x; ?>
</td>
</tr>
<tr>
<td>
<button class='btn btn-danger btn-xs' type="submit" name="delete" value="delete">
<span class="fa fa-times"></span> delete
</button>
</td>
</tr>
</tbody>
</table>
</form>
My code is as follows:
<div class="input-group select-all" >
<span class="input-group-addon disabled">
<input type="checkbox" <?php if($pagetitle=="Trash") echo "disabled"?>>
</span>
<div class="input-group-btn">
<button type="button" class="btn btn-default dropdown-toggle <?php if($pagetitle=="Trash") echo "disabled"?>" data-toggle="dropdown" tabindex="-1">
<span class="caret"></span>
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu" role="menu">
<li>Delete</li>
</ul>
</div>
</div><!-- /input-group -->
When we checked in checkbox then all the data in a table must be selected, which is the type of operation I need.
<div class="mails">
<table class="table table-hover table-condensed">
<?php
if(count($inMessages)>0)
foreach($inMessages as $m):
?>
<tr data-id="<?php echo $m->sn?>" <?php if($m->flag==1) echo "class=\"read\""?><?php if($m->flag==0) echo "class=\"unread\""?>>
<td><?php if($pagetitle!="Trash"):?><i class="fa fa-check-square-o fa-square-o disabled" data-id="<?php echo $m->sn?>"></i><?php endif?></td>
<td class="subject"><?php echo $m->subject?></td>
<td class="body"><?php echo $m->message?></td>
<td>
<?php echo $m->address?>
<BR/><?php echo $m->io?>
</td>
<td class="time"><?php echo $m->mdate?> <?php echo $m->mtime?></td>
</tr>
<?php
endforeach
?>
</table>
</div>
</div><!-- /Right Side mail bar -->
Manual check box works properly, but I need check all options.
How can I do that in addition to the code above? Please help me.
If you want to select all with a single checkbox you can use something similar to:
<?php
$string .= '
<table id="mytable" class="table table-hover table-bordered datatable">
<thead>
<tr>
<th><input type="checkbox" id="selectall"></th>
<th>Field A</th>
<th>Field B</th>
</tr>
</thead>
<tbody>'."\n";
foreach($array as $row) { // create table content
$string .= ' <tr id="art-'.$row['field'].'" class="data">
<td><input class="case" type="checkbox" name="id[]" value="'.$row['field'].'"></td>
<td>'.$row['field A'].'</td>
<td>'.$row['field B'].'</td>
</tr>'."\n";
}
$string .= ' </tbody>
</table>
'."\n";
echo $string;
?>
<script>
$(document).ready(function(){
$("#selectall").click(function () { // check all
$('.case').prop('checked', this.checked);
});
// if all checkbox are selected, check the selectall checkbox
// and viceversa
$(".case").click(function(){
if($(".case").length == $(".case:checked").length) {
$("#selectall").prop("checked", "checked");
} else {
$("#selectall").removeAttr("checked");
}
});
});
</script>