check-box check before delete - javascript

I have a check-box for each user and the value of the check-box is the user id
What is the best suitable JavaScript Which disables the delete a.button until have clicked the correct corresponding check-box
If button is disabled I would like to be able to use bootstraps disabled="disabled"
<div class="table-responsive" id="user">
<table class="table table-bordered table-hover">
<thead>
<tr>
<td></td>
<td><b><a><?php echo $column_username;?></a></b></td>
<td><b><a><?php echo $column_status;?></a></b></td>
<td><b><a><?php echo $column_date_added;?></a></b></td>
<td class="text-right"><b><?php echo $column_action;?></b></td>
</tr>
</thead>
<tbody>
<?php if ($users) { ?>
<?php foreach ($users as $user) { ?>
<tr>
<td class="text-center">
<input type="checkbox" name="selected" value="<?php echo $user['user_id']; ?>" />
</td>
<td class="text-left"><?php echo $user['username']; ?></td>
<td class="text-left"><?php echo $user['status']; ?></td>
<td class="text-left"><?php echo $user['date_added']; ?></td>
<td class="text-right">
<i class="fa fa-pencil"></i> Edit User
<i class="fa fa-pencil"></i> Delete User
</td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>

First, all the delete buttons should be disabled when you first load the HTML. You can add the disabled='disabled' attribute to each delete button in your PHP code.
Then in JavaScript you look for a change event on the checkbox:
$("input[type='checkbox']").change(function() {
var thisRow = $(this).parents("tr");
if(this.checked) {
thisRow.find("a.btn-danger").attr("disabled", false);
} else {
thisRow.find("a.btn-danger").attr("disabled", "disabled");
}
});

Related

Submit with one button multiple forms generated by loop

Sorry for spaghetti code :( I can't figure out why is it not working. Button submits only last form, but i want to submit every generated form. What can i do? I tried AJAX but it gives the same result. I wanted to recursively add selections but i think it's the hardest way and there is another solution.
<table id="datatable" class="table table-striped table-bordered">
<thead>
<tr>
<th>Product Name</th>
<th>Product Weight</th>
<th>Product Image</th>
<th>Status</th>
<th>Choose suplier</th>
<th>Delete</th>
</tr>
</thead>
<tbody>
<?php
foreach ($result as $k=>$v)
{
$oid[] = $v['op_id'];
$pui[] = $v['pui'];
?>
<tr>
<td><?php echo substr($v['name'], 0,10); ?></td>
<td><?php echo substr($v['gram'], 0,10); ?></td>
<td><img style="width: 50%" src="<?php echo $site_url.'images/'.$v['image']; ?>" alt=""></td>
<td><?php echo substr($v['opia'], 0,10); ?></td>
<td>
<form method="POST" enctype="multipart/form-data" id="demo-form2" data-parsley-validate oidd="<?php echo $v['pui']; ?>" class="form-horizontal form-label-left sels<?php echo $v['op_id'];?>">
<div class="form-group">
<label class="">
</label>
<div class="" style="width: 100%">
<?php
$sups = $db->prepare('SELECT * FROM product p, suplier s, prod_suplier ps WHERE p.u_id=ps.p_id AND ps.suplier_id=s.id AND p.u_id=:u_id GROUP BY s.id');
$sups->execute(array('u_id'=>$v['pui']));
$count_sups = $sups->rowCount();
if ($count_sups==1) {
$get_sups = $sups->fetch(PDO::FETCH_ASSOC);
echo $get_sups['full_name'];
} else {
?>
<select style="" name="supliers" id="">
<?php
while ($get_sup=$sups->fetch(PDO::FETCH_ASSOC)) {
?>
<option value="<?php echo $v['sfn']; ?>"><?php echo $get_sup['full_name']; ?></option>
<?php }?>
</select>
<?php } ?>
</div>
</div>
</form>
</td>
<td>
<form style=" float: right;" method="POST" action="<?php echo $site_url.$state.'delete/' ?>">
<input type="hidden" name="delid" value="<?php echo $v['oid'] ?>">
<button type="button" onclick="dsomo(this);" name="dbtn" style="color: red; background-color: rgba(0,0,0,0); border:none;" href="">
<i class="fa fa-trash fa-2x" ></i>
</button>
</form>
</td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
<button type="submit" id="acception" name="submit">submit</button>
<script async>
$('#acception').on('click', function () {
<?php
for ($i=0;$i<count($oid);$i++) {
?>
$("tr>td>.sels<?php echo $oid[$i];?>").submit();
<?php } ?>
})
</script>
Thanks to MojoAllmighty I found the solution. As described in the link below if I want to submit multiple forms by one button I have to assign equal classes to form and use ajax for async submitting forms. So maybe it can be marked as a duplicate of a link below.
Jquery - Submit all forms by one button

Send php variable onclick through javascript code

I have a form table, in which when I click on Show button, then a popup window open. Till now everything is good.
But after click on Show button, I also want to send php variable in popup window and want to show values related to that variable. How it can be possible?
My table is below
<table align="center">
<?php
include("connection.php");
$query1=mysql_query("select * from career") or die(mysql_error());
while($row1=mysql_fetch_array($query1))
{
extract($row1);
?>
<tr>
<td>Designation</td>
<td><input type="text" name="des" value="<?php echo $designation; ?>"></td>
</td>
</tr>
<tr>
<td>Number of position</td>
<td><input type="text" name="des" value="<?php echo $no_of_position; ?>"></td>
</td>
</tr>
<tr>
<td>Experience</td>
<td><input type="text" name="des" value="<?php echo $experience; ?>"></td>
</td>
</tr>
<tr>
<td>Qualification</td>
<td><input type="text" name="des" value="<?php echo $qualification; ?>"></td>
</td>
<tr>
<td>Job profile</td>
<td><input type="text" name="des" value="<?php echo $job_profile; ?>"></td>
</tr>
<tr>
<td><?php echo"$id"; ?></td>
<td><button onclick="document.getElementById('id01').style.display='block'" style="width:auto;" id="id1">Show</button>
</td>
</tr>
<tr>
<td></td>
<td> </td>
</tr>
<?php } ?>
</table>
In above code when I click on Show Button, then popup window open, code is below:
<div id="id01" class="modal1">
<form class="modal1-content animate" action="xyz.php">
<div class="imgcontainer">
<span onclick="document.getElementById('id01').style.display='none'" class="close" title="Close modal1">×</span>
</div>
<div class="container">
<div>Content</div>
</div>
</form>
</div>
<script>
// Get the modal1
var modal1 = document.getElementById('id01');
// When the user clicks anywhere outside of the modal1, close it
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
}
</script>
I want to send id variable, by which I can fetch values from database in popup window.
Thank you.
If I understand correctly you need an ajax call to a php page like this:
modalService.php
if(!isset($_GET['id']){
echo "no request";
exit;
}
$id = $_GET['id'];
//Do your query and echo the modal content
table
<td><?php echo $id; ?></td>
<td>
<button onclick="myFunction('<?php echo $id; ?>')" >Show</button>
</td>
JS
function myFunction(id){
var modal = document.getElementById("id01");
modal!==null && (modal.style.display="block");
var modalServiceUrl = "./modalService.php?id="+id;
//xhr to get modalService
}
EDIT: USING JQUERY
<button data-queryid="<?php echo $id; ?>" class="showModal">Show</button>
jQuery(document).ready(function($){
var modal = document.getElementById("id01");
$("button.showModal").on("click", function(){
modal.fadeIn();
var id = $(this).attr("data-queryid");
var modalServiceUrl = "./modalService.php?id="+id;
modal.load(modalServiceUrl);
});
});

Data Table search is giving error

I'm getting a warning saying requested unknown parameter, and after I press ok the search is not working correctly.
any solution for this
DataTable warning .......... Requested unknown parameter
Please find how i created the table
<table class="dataTable border bordered striped" data-role="datatable" data-auto-width="false" id="brandTable">
<thead>
<tr>
<td style="width: 20px">
</td>
<td class="sortable-column sort-asc">ID</td>
<td class="sortable-column">Brand Name</td>
<td class="sortable-column">Account Manager</td>
<td class="sortable-column">Date Updated</td>
</tr>
</thead>
<tbody>
<?php foreach ($fw->customer($_SESSION['USERID'])->getAllBrands() as $v) { ?>
<tr>
<td>
<label class="input-control checkbox small-check no-margin">
<input type="checkbox">
<span class="check"></span>
</label>
</td>
<td>
<?php echo $v['id']; ?>
</td>
<td>
<a href="updateBrands.html?id=<?php echo $v['id']; ?>">
<?php echo $v['brandName']; ?>
</a>
</td>
<td>
<?php echo $fw->customer($_SESSION['USERID'])->getAccountManagerbyId($v['accountManager_id']); ?></td>
<td>
<?php echo $v['dateCreated']; ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
You have an undefined or null value at 3 column of 35 row. You should pass some value at that place .

Bootstrap dataTable not working with database in Codeigniter

I am new in bootstrap and codeigniter, I don't know why dataTable not working with codeigniter.
I've tried to use it just in Bootstrap. It's working fine (pagination, data entry, sorting, and searching). But when I use it in Codeigniter with same code in my View file, it seems like datatable is not working. It does load the data, but the features (pagination, data entry, sorting, and searching) is not showing.
anybody can help me? thanks a bunches !
my old file using Bootstrap only
<table id="myTable" class="table table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama</th>
<th>NPM</th>
<th>Kelas</th>
<th>MP</th>
<th>PK</th>
<th>Pesan</th>
</tr>
</thead>
<tbodys>
<?php $no=0 ; $sql=m ysqli_query($con, "SELECT * FROM form"); while($row=m ysqli_fetch_array($sql)){ $no++; ?>
<tr>
<td>
<?php echo $no ?>
</td>
<td>
<?php echo $row[ 'Nama'] ?>
</td>
<td>
<?php echo $row[ 'NPM'] ?>
</td>
<td>
<?php echo $row[ 'Kelas'] ?>
</td>
<td>
<?php echo $row[ 'MP'] ?>
</td>
<td>
<?php echo $row[ 'PK'] ?>
</td>
<td>
<?php echo $row[ 'Pesan'] ?>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
});
</script>
here is my View file in Codeigniter + Bootstrap
<script type="text/javascript">
jQuery(function($) {
var oTable1 =
$('#dynamic-table')
.dataTable({
bAutoWidth: false,
"aoColumns": [{
"bSortable": false
},
null, null, null, null, null, null, null, {
"bSortable": false
}
],
"aaSorting": [],
});
</script>
<table id="dynamic-table" method="post" class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Tanggal Mulai</th>
<th>Tanggal Akhir</th>
<th>Alasan</th>
<th>File</th>
<th>Nopeg</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php foreach ($hasil->result() as $row) { ?>
<tr>
<td>
<?php echo $row->no ?></td>
<td>
<?php echo $row->nama ?></td>
<td>
<?php echo $row->tglm ?></td>
<td>
<?php echo $row->tgla ?></td>
<td>
<?php echo $row->alasan ?></td>
<td>
<a class="thumbnail" href="<?php echo base_url().'uploads/'.$row->file ?>">
<img src="<?php echo base_url().'uploads/'.$row->file ?>" width="50" height="50">
</a>
</td>
<td>
<?php echo $row->nopeg; ?></td>
<td>
<button type="button" class="btn btn-pink btn-sm">Terima</button>
<button type="button" class="btn btn-info btn-sm">Tolak</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
the dataTable include in its template, before I display data from database, it working. But when I display data from database, it just a normal table
Put javascript code after end of table tag,
<table id="dynamic-table" method="post" class="table table-striped table- bordered table-hover">
<thead>
<tr>
<th>No</th>
<th>Nama Lengkap</th>
<th>Tanggal Mulai</th>
<th>Tanggal Akhir</th>
<th>Alasan</th>
<th>File</th>
<th>Nopeg</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<?php foreach ($hasil->result() as $row) { ?>
<tr>
<td>
<?php echo $row->no ?></td>
<td>
<?php echo $row->nama ?></td>
<td>
<?php echo $row->tglm ?></td>
<td>
<?php echo $row->tgla ?></td>
<td>
<?php echo $row->alasan ?></td>
<td>
<a class="thumbnail" href="<?php echo base_url().'uploads/'.$row->file ?>">
<img src="<?php echo base_url().'uploads/'.$row->file ?>" width="50" height="50">
</a>
</td>
<td>
<?php echo $row->nopeg; ?></td>
<td>
<button type="button" class="btn btn-pink btn-sm">Terima</button>
<button type="button" class="btn btn-info btn-sm">Tolak</button>
</td>
</tr>
<?php } ?>
</tbody>
</table>
<script type="text/javascript">
jQuery(function($) {
var oTable1 =
$('#dynamic-table')
.dataTable({
bAutoWidth: false,
"aoColumns": [{
"bSortable": false
},
null, null, null, null, null, null, null, {
"bSortable": false
}
],
"aaSorting": [],
});
</script>
Try like this :)

unable to auto refresh two tables in HTML

I would like to ask, why I can't able to refresh two html tables? only 1? is there something wrong with the Javascript code? I already tried to declare 2 variables and tried to create to script for each and still no luck and I tried to change the variables name to unique one but still no luck. My full code below:
<!-- SALES.HTML -->
<div class="col-sm-5 shadow">
<p>
<h3><center>Hyukies</center></h3>
<center>Catbalogan, City</center>
<center><span class="glyphicon glyphicon-time"></span> <?php include('time.php'); ?></center> <br />
<div id="transactions_left">
<?php include_once('salestable.php')?>
</div>
</p>
<div class="row">
<div class="col-sm-12"><b>
<p>
<?php include_once('sales_count.php')?>
<script>
var table = $("#salestableid");
var refresh = function() {
table.load("salestable.php", function() {
setTimeout(refresh, 1);
});
};
refresh();
var table1 = $("#sales_countid");
var refresh1 = function() {
table.load("sales_count.php", function() {
setTimeout(refresh1, 1);
});
};
refresh1();
</script>
<button type="button" class="btn btn-danger btn-md" data-toggle='modal' data-target='#cancel'>Cancel</a>
<button type="button" class="btn btn-warning btn-md" data-toggle='modal' data-target='#hold'>Hold</button>
<button type="button" class="btn btn-success btn-md pull-right" data-toggle='modal' data-target='#payment' >Payment</button>
<br /><br />
<center>Thank you and have a Nice day!</center>
</p>
</div>
</div>
</div>
<!-- End of Page SALES.HTML -->
<!-- SALESTABLE.PHP -->
<?php require_once("../includes/db_connection.php"); ?>
<table class="table table-hover" id='salestableid'>
<thead>
<tr class= "default" style="background-color: #e18728">
<th><font color = "white">Action</font></th>
<th width="200"><font color = "white">Product</th>
<th><font color = "white">Quantity</th>
<th width="75"><font color = "white">Price</th>
<th width ="90"><font color = "white">Total</th>
</tr>
</thead>
<tbody>
<tr>
<?php
$user_query = mysqli_query($connection, "SELECT saleslog.itemid, saleslog.qty, saleslog.date, saleslog.total, saleslog.id, items.`name`, items.description, items.retailprice FROM saleslog LEFT JOIN items ON items.id = saleslog.itemid")or die(mysqli_error());
while($row = mysqli_fetch_array($user_query)){
$id = $row['id'];
?>
<tr>
<td></td>
<td><?php echo $row['name']; ?></td>
<td>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<?php echo $row['qty']; ?></td>
<td>&nbsp<?php echo number_format($row['retailprice'],2); ?></td>
<?php
$total = $row['qty'] * $row['retailprice'];
?>
<td><?php echo number_format($total,2); ?></td>
</tr>
<?php } ?>
</tr>
</tbody>
</table>
<!-- End of Page SALESTABLE.PHP -->
<!--SALES_COUNT.PHP -->
<?php require_once("../includes/db_connection.php"); ?>
<?php
$count_client= mysqli_query($connection, "SELECT * FROM saleslog");
$count = mysqli_num_rows($count_client);
?>
<?php
$totalsales= mysqli_query($connection, "SELECT SUM(total) AS totalpritems FROM saleslog");
while($totalperitems = mysqli_fetch_array($totalsales)){
$total_sales = $totalperitems['totalpritems'];
}
?>
<table class='table' style="border-style: dotted" id="sales_countid">
<tr class='' style="border-style: dotted">
<td width="50" >Total Items: </td>
<td width="50"align="right"><?php echo $count; ?></td>
<td width="50" >Total: </td>
<td width="50"align="right" >P <?php echo number_format($total_sales,2); ?></td>
</tr>
<tr class='' style="border-style: dotted">
<td width="50">Discount: </td>
<td width="50"align="right">0.00 </td>
<td width="50">Tax: </td>
<td width="50"align="right">0.00 </td>
</tr>
<tr style="border-style: dotted">
<td width>Total Payable: </td>
<td align="right">P <?php echo number_format($total_sales,2); ?></td>
<td></td>
<td></td>
</tr>
</table>
<!--End of Page SALES_COUNT.PHP -->
In your refresh code for table1, you refresh table instead.
table1.load(...) instead of table.load(...) in the code below.
var table1 = $("#sales_countid");
var refresh1 = function() {
table.load("sales_count.php", function() {
setTimeout(refresh1, 1);
});
};

Categories