I want to achieve what is shown in this picture:
I have successfully retrieved data from a table and I want to calculate the values from textboxes. How can I achieve that?
My current source code:
<!doctype html>
<html>
<head>
<title>Lookup Modal Bootstrap 3</title>
<link rel="stylesheet" href="../css/bootstrap.css"/>
<link rel="stylesheet" href="../datatables/dataTables.bootstrap.css"/>
<script src="../js/jquery-ui 1.12.1.js"></script>
<script src="../js/bootstrap.js" ></script>
</head>
<body>
<div class="container"><br/><br/><br/>
<div class="panel panel-success">
<div class="panel-heading" >
<h3 class="panel-title"><strong> Purchase Order</strong> <strong> Back </strong></h3>
</div>
<div class="panel-body">
<form action="poSimpan.php" name="aku" id="aku">
<table align="left" class="table table-bordered table-hover ">
<tr valign="baseline">
<td nowrap align="right"><strong>No. PO:</strong></td>
<td><input type="text" id="poNo" name="poNo" size="32"></td>
<td><strong>No. PR:</strong></td>
<td><input type="text" name="prNo" id="prNo" placeholder="Request Number" readonly /> <button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">. . .</button>
</tr>
<tr valign="baseline">
<td nowrap align="right"><strong>Supplier:</strong></td>
<td><select name="supplier" id="supplier" onChange="changeValue(this.value)" >
<option value=0>-Choose-</option>
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
$result = mysqli_query($con,'select * from supplier ');
$result = mysql_query("select * from supplier");
$jsArray = "var kode = new Array();\n";
while ($row = mysqli_fetch_array($result)) {
echo '<option value="' . $row['supplierName'] . '">' . $row['supplierName'] . '</option>';
}
?>
</select></td>
<td><strong>Branch :</strong></td>
<td><input type="text" id="Branch" name="Branch" size="20"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"><strong> P.O Date</strong></td>
<td><input type="text" name="date_po" id="date_po" size="20"></td>
<td><strong>Delivery Date:</strong></td>
<td><input type="text" id="date_delivery" name="date_delivery" size="32"></td>
</tr>
<tr valign="baseline">
<td nowrap align="right"><strong></strong></td>
<td></td>
<td><strong>Note:</strong></td>
<td><input type="text" id="note" name="note" size="32"></td>
</tr>
</table>
<div class="row">
<div class="col-md-5">
</div>
</div>
<h4><strong>Product Detail </strong></h4>
<table class="table table-bordered table-hover table-striped" >
<thead>
<tr>
<th scope="row"> </th>
<th scope="row"><strong>Product Code</strong></th>
<th scope="row"><strong>Product Name</strong></th>
<th scope="row"><strong>QTY</strong></th>
<th scope="row"><strong>Price</strong></th>
<th scope="row"><strong>Discount</strong></th>
<th scope="row"><strong>Total</strong></th>
</tr>
</thead>
<tbody id="product_table">
</tbody>
</table>
<table width="400" border="0" align="right">
<tr>
<th scope="row">Tax 10%</th>
<td>:</td>
<td><input name="tax" id="taxt" type="text"></td>
</tr>
<tr>
<th scope="row">Grand Total</th>
<td>:</td>
<td><input name="grandtotal" id="grandtotal" type="text"></td>
</tr>
</table>
<input type="submit" value="Save" name="product_submit" id="product_submit" class="btn btn-primary" />
</form>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:800px">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Lookup </h4>
</div>
<div class="modal-body">
<table id="lookup" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>No. PR</th>
<th>branch</th>
</tr>
</thead>
<tbody>
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
$sql = mysqli_query($con,'select * from pr ');
while ($r = mysqli_fetch_array($sql)) {
?>
<tr class="pick" no="<?php echo $r['prNo']; ?>", branch="<?php echo $r['branch'] ?>">
<td><?php echo $r['prNo']; ?></td>
<td><?php echo $r['branch']; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src="../js/jquery-1.11.2.min.js"></script>
<script src="../js/bootstrap.js"></script>
<script src="../datatables/jquery.dataTables.js"></script>
<script src="../datatables/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/js/bootstrap-datepicker.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.4.1/css/bootstrap-datepicker3.css"/>
<script type="text/javascript">
$(document).on('click', '.pick', function (e) {
document.getElementById("prNo").value = $(this).attr('no');
document.getElementById("branch").value = $(this).attr('branch');
var no=$(this).attr('no');
$.ajax({
type:"post",
data:"&product_id=1&prno="+no,
url:"POtabel.php",
success:function(result)
{
$("#product_table").html(result);
}
});
$('#myModal').modal('hide');
});
$(function () {
$("#lookup").dataTable();
});
</script>
</body>
</html>
and this is the target file
POtable.php
<?php
$con = mysqli_connect('localhost', 'root', '', 'a.karat');
if(isset($_POST['product_id']))
{
$prno=$_POST['prno'];
$i=1;
$sql = mysqli_query($con,"select * from detail_pr where prNo='$prno'");
while ($r = mysqli_fetch_array($sql)) {
echo '<tr>
<td><input type="checkbox" name="check[]" id="check'.$i.'" value="'.$i.'"></td>
<td><label for="productCode"></label>
<input type="text" name="productCode'.$i.'" id="productCode'.$i.'" readonly value="'.$r["productCode"].'" size="12"></td>
<td><label for="productName"></label>
<input type="text" name="productName'.$i.'" id="productName'.$i.'" readonly value="'.$r["productName"].'"size="35"></td>
<td><label for="qty"></label>
<input type="text" name="qty'.$i.'" id="qty'.$i.'" readonly value="'.$r["qty"].'" size="8"></td>
<td><input type="text" name="price'.$i.'" id="price'.$i.'" size="10"></td>
<td><input type="text" name="disc'.$i.'" id="disc'.$i.'" size="10"></td>
<td><input type="text" name="total'.$i.'" id="total'.$i.'" size="10"></td>
</tr>';
$i++;
}
}
?>
<script type="text/javascript">
function calculate(id){
var quantity = document.getElementById('qty'+id).value;
var price = document.getElementById('price'+id).value;
var sum = parseInt(quantity,10)*parseInt(price,10);
document.getElementById('total'+id).value = sum;
}
</script>
Related
I have been facing a problem that I have been looking everywhere for a soultion.
I want to make a page where you can insert new rows to a form table, then use these values to insert into database.
Here is an image of how the page I want to make will look like. sales form
The idea behind the page is that one receipt id will be generated and inside there can be many items that users can add, hence the multiple rows.
Here is the code for the form page.
<?php
include('session.php');
?>
<?php
$ItemID = "ItemID";
$ItemName = "ItemName";
$UnitPrice = "UnitPrice";
$sql = "SELECT ItemID,ItemName,UnitPrice FROM Item";
$result = $db->query($sql);
?>
<html>
<head>
<title>Add Sales</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="text-center">
<h1>Add new Sales Record</h1>
</div>
<div class="container">
<button class="w3-button w3-black w3-round-large">Back</button>
</div>
<div class="container" align="right">
<table class="table-sm">
<tbody>
<tr class="table-primar">
<th scope="col" style="padding-right: 50px;">ItemID</th>
<th scope="col" style="padding-right: 50px">ItemName</th>
<th scope="col">UnitPrice</th>
</tr>
<?php
while($rows = $result->fetch_assoc()) {
?>
<tr class="contents">
<td><?php echo $rows[$ItemID]; ?></td>
<td><?php echo $rows[$ItemName]; ?></td>
<td><?php echo $rows[$UnitPrice]; ?></td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<hr>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
ItemID
</th>
<th class="text-center">
Amount
</th>
<th class="text-center">
Price Sold
</th>
<th class="text-center">
Branch ID
</th>
<th class="text-center">
EmployeeID
</th>
<th class="text-center">
MemberID
</th>
</tr>
</thead>
<tbody>
<form action="addsales.php" method="post">
<tr id='addr0'>
<td>
<input type="text" name='item[][itemid]' placeholder='ItemID' class="form-control"/>
</td>
<td>
<input type="text" name='item[][amount]' placeholder='Amount' class="form-control"/>
</td>
<td>
<input type="text" name='item[][pricesold]' placeholder='PriceSold' class="form-control"/>
</td>
<td>
<input type="text" name='item[][branchid]' placeholder='BranchID' class="form-control"/>
</td>
<td>
<input type="text" name='item[][employeeid]' placeholder='EmployeeID' class="form-control"/>
</td>
<td>
<input type="text" name='item[][memberid]' placeholder='MemberID' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
<input class="w3-button w3-black w3-round-large" type="submit" name='submit' value="Submit"/>
</form>
</tbody>
</table>
</div>
</div>
<button id="add_row" class="w3-button w3-black w3-round-large" style="position: absolute; right: 130px;">New row</button>
</div>
<script type="text/javascript">
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr'+(i-1)).find('input').attr('disabled',true);
$('#addr' + i).html("<td><input name='item[][itemid]' placeholder='ItemID' class='form-control input-md'/></td><td><input type='text' name='item[][amount]' placeholder='Amount' class='form-control input-md'/></td><td><input type='text' name='item[][pricesold]' placeholder='PriceSold' class='form-control input-md'/></td><td><input type='text' name='item[][branchid]' placeholder='BranchID' class='form-control input-md'/></td><td><input type='text' name='item[][employeeid]' placeholder='EmployeeID' class='form-control input-md'/></td><td><input type='text' name='item[][memberid]' placeholder='MemberID' class='form-control input-md'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
</script>
</body>
</html>
The values will be handled in another php page.
<?php
include('session.php');
print_r($_POST);
$ItemIDs = $_POST['itemid'];
$PriceSolds = $_POST['pricesold'];
$QtySolds = $_POST['amount'];
$Date = date("Y-m-d h:i:sa");
$BranchIDs = $_POST['branchid'];
$EmployeeIDs = $_POST['employeeid'];
$MemberIDs = $_POST['memberid'];
$size = sizeof($ItemIDs);
$sql2 = "INSERT INTO Receipt_seq VALUES (NULL);";
$db->query($sql2);
for($i = 0; $i < $size; $i++ ){
$ItemID = $ItemIDs[$i];
$PriceSold = $PriceSolds[$i];
$QtySold = $QtySolds[$i];
$BranchID = $BranchIDs[$i];
$EmployeeID = $EmployeeIDs[$i];
$MemberID = $MemberIDs[$i];
$sql = "INSERT INTO Receipt (ItemId,PriceSold,QtySold,RDate,BranchID,EmployeeID,MemberID) VALUES ('{$ItemID}', '{$PriceSold}', '{$QtySold}','{$Date}','$BranchID','$EmployeeID','$MemberID')";
$db->query($sql);
}
?>
The Id for the receipt will be automatically generated using a trigger system. The only problem I have right now is that I can send in one row data just fine. But the moment I add a second row, it gives me an error Undefine index .... I tried to use print_r($_POST); to see what is happening and this is the result. When I submitted one row of data it looked fine one row But when I added the second row it gave me this error more than one row error. I am a beginner at making website so I am not sure what I am doing is correct or not. Please help, thank you. I added and image of what my sales page will look like so you might have a better understanding of what I am trying to do Sales page.
Just to clarify points above, you MUST set the inputs with attribute readonly NOT disabled so that the previous input rows get included.
Then just follow what I said in the comments by adding (concatenating) the index into the dynamically added input rows:
$('#addr' + i).html("<td><input name='item["+i+"][itemid]'
// ^ add the dynamic index here
Sidenote: Don't forget to wrap the table with the form tag
I'll just add the important bits, so all in all:
a. Form tag before table tag
<div class="col-md-12 column">
<form action="" method="post"> <!-- this -->
<table class="table table-bordered table-hover" id="tab_logic">
b. change to readonly instead of disabled attribute and add the index in the "add row"
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr'+(i-1)).find('input').attr('readonly',true);
$('#addr' + i).html("<td><input name='item["+i+"][itemid]' placeholder='ItemID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][amount]' placeholder='Amount' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][pricesold]' placeholder='PriceSold' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][branchid]' placeholder='BranchID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][employeeid]' placeholder='EmployeeID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][memberid]' placeholder='MemberID' class='form-control input-md'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
Full code:
$(document).ready(function() {
var i = 1;
$("#add_row").click(function() {
$('#addr'+(i-1)).find('input').attr('readonly',true);
$('#addr' + i).html("<td><input name='item["+i+"][itemid]' placeholder='ItemID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][amount]' placeholder='Amount' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][pricesold]' placeholder='PriceSold' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][branchid]' placeholder='BranchID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][employeeid]' placeholder='EmployeeID' class='form-control input-md'/></td><td><input type='text' name='item["+i+"][memberid]' placeholder='MemberID' class='form-control input-md'/></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<form action="" method="post">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
ItemID
</th>
<th class="text-center">
Amount
</th>
<th class="text-center">
Price Sold
</th>
<th class="text-center">
Branch ID
</th>
<th class="text-center">
EmployeeID
</th>
<th class="text-center">
MemberID
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
<input type="text" name='item[0][itemid]' placeholder='ItemID' class="form-control"/>
</td>
<td>
<input type="text" name='item[0][amount]' placeholder='Amount' class="form-control"/>
</td>
<td>
<input type="text" name='item[0][pricesold]' placeholder='PriceSold' class="form-control"/>
</td>
<td>
<input type="text" name='item[0][branchid]' placeholder='BranchID' class="form-control"/>
</td>
<td>
<input type="text" name='item[0][employeeid]' placeholder='EmployeeID' class="form-control"/>
</td>
<td>
<input type="text" name='item[0][memberid]' placeholder='MemberID' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
<input class="w3-button w3-black w3-round-large" type="submit" name='submit' value="Submit"/>
</tbody>
</table>
</form>
</div>
</div>
<button id="add_row" class="w3-button w3-black w3-round-large" style="position: absolute; right: 130px;">New row</button>
</div>
I have html code like this.
HTML
<div class="container" style="padding-top: 30px; padding-bottom: 30px; width: 1089px;">
<div class="row">
<div class="col-md-10 col-md-offset-1">
<div class="fresh-table toolbar-color-orange">
<!-- Available colors for the full background: full-color-blue, full-color-azure, full-color-green, full-color-red, full-color-orange
Available colors only for the toolbar: toolbar-color-blue, toolbar-color-azure, toolbar-color-green, toolbar-color-red, toolbar-color-orange
-->
<div class="toolbar">
<button id="selectAll" class="btn btn-default" style="padding-right:70px;">Select All</button>
<button id="popup" onclick="div_show()" class="btn btn-default" style="margin-left: 650px;">Send</button>
</div>
<table id="fresh-table1" class="table1">
<thead>
<tr>
<th></th>
<th data-field="id" data-sortable="true">ID</th>
<th data-field="name" data-sortable="true">First Name</th>
<th data-field="salary" data-sortable="true">Last Name</th>
<th data-field="country" data-sortable="true">Date Of Birth</th>
<th data-field="city">Gender</th>
<!-- <th data-field="actions" data-formatter="operateFormatter1" data-events="operateEvents1">Actions</th> -->
</tr>
</thead>
<tbody>
<tr>
<?php
foreach ($user->result_array () as $row ) {?>
<td><input type="checkbox"></td>
<td><?php echo $row['user_id'];?></td>
<td><?php echo $row['firstname'];?></td>
<td><?php echo $row['lastname'];?></td>
<td><?php echo $row['dob'];?></td>
<td><?php if($row['gender']==1){ echo 'Male';}else{echo 'Female';}?></td>
</tr>
<?php }?>
</tbody>
</table>
</div>
</div>
</div>
</div>
And my javascript just like this.
Javascript
<script>
$(document).ready(function () {
$('body').on('click', '#selectAll', function () {
if ($(this).hasClass('allChecked')) {
$('input[type="checkbox"]', '#fresh-table1').prop('checked', false);
} else {
$('input[type="checkbox"]', '#fresh-table1').prop('checked', true);
}
$(this).toggleClass('allChecked');
})
});
I am using Codeigniter Framework. I used javascript in my table form. I
want to get user_id on the select button so that I can send the notifications to the selected id(s). I want user_id in an array format.
:checkbox:checked selector and map to create an array of the user_ids:
Below is the working demo:
function getAllCheckedUserIds() {
var userIds = $('input:checkbox:checked').map(function() {
return $(this).parent().next().text();
}).get();
var userIds = userIds.filter(function(v) {
return v !== ''
});
console.log(userIds);
return userIds;
}
$(document).ready(function() {
$('body').on('click', '#selectAll', function() {
if ($(this).is(":checked")) {
$('input[type="checkbox"]', '#fresh-table1').prop('checked', true);
getAllCheckedUserIds();
} else {
$('input[type="checkbox"]', '#fresh-table1').prop('checked', false);
}
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="selectAll" type='checkbox' class="allChecked" /> select All
<table id='fresh-table1'>
<tr>
<td><input type='checkbox' /></td>
<td>User id: 1</td>
</tr>
<tr>
<td><input type='checkbox' /></td>
<td>User id: 2</td>
</tr>
</table>
$('.editimg').on('click',function(){
$("#myModel").modal("show");
var regionid = $(this).data('id');
$(".modal-body #id").val( regionid );
$("#region_id").val($(this).closest('tr').children()[1].textContent);
$("#region_name").val($(this).closest('tr').children()[2].textContent);
$("#description1").val($(this).closest('tr').children()[3].textContent);
$("#description2").val($(this).closest('tr').children()[4].textContent);
});
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="editimg" href="#" id="<?php echo $reg_id;?>"><img src="../dmo_images/action_ico/sys_icon_edit.png" width="20" height="20" alt="Edit"></a>
<div class="modal-body" >
<form id="btnupdate" action="#" enctype="multipart/form-data" method="post" class="form-horizontal" role="form" >
<table class="table" width="200" border="0" cellpadding="0" cellspacing="0">
<tr class="FormData" rowpos="1">
<td class="CaptionTD">Name of Region</td>
<td><input type="text" id="region_name" class="FormElement ui-widget-content" role="textbox" name="region_name" required=""></input></td>
</tr>
<tr class="FormData" rowpos="2">
<td class="CaptionTD">Description 1</td>
<td><input type="text" id="description1" class="FormElement ui-widget-content" role="textbox" name="description1" required="" ></input></td>
</tr>
<tr class="FormData" rowpos="3">
<td class="CaptionTD">Description 2</td>
<td><input type="text" id="description2" class="FormElement ui-widget-content" role="textbox" name="description2" required="" ></input></td>
</tr>
<tr class="FormData" rowpos="4"></tr>
</table>
</form>
</div>
<div class="modal-footer">
<button type="submit" id="send" class="btn btn-danger" name="btnupdate" onClick="return validate_region()">Update</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
if(isset($_POST["btnupdate"]))
{
$id=$_REQUEST["region_id"];
$name=$_REQUEST["region_name"];
$desc1=$_REQUEST["description1"];
$desc2=$_REQUEST["description2"];
$query1="Update tbl_region set region_name='$name', description1='$desc1', description2= '$desc2', created_date='$date' where region_id=$id";
}
//validation.js
function validate_region()
{ if(get("region_name").value=="") {
return false; }
else if(get("description1").value== "") {
return false; }
else if(get("description2").value== "") {
return false; }
else {
return true; }
}
I have a table with two image buttons at each row as below.
When these icons are clicked, I show a bootstrap modal with data in the row.
I've done the validation, but when I clicked on the "update" button, no validation is shown and the button doesn't work at all.
I am the very beginner level one so I don't know where do I wrong or left to code. I've been browsing online for solutions but I still can't get it.
The updated value is needed to store in the database.
P.S when click on delete button at Delete Modal, it also needs to delete from the database, which is not working too.
Your help is much appreciated. Thank you!
Try the following working code
$('.editimg').on('click',function(){
$("#myModel").modal("show");
var regionid = $(this).data('id');
$(".modal-body #id").val( regionid );
$("#region_id").val($(this).closest('tr').children()[1].textContent);
$("#region_name").val($(this).closest('tr').children()[2].textContent);
$("#description1").val($(this).closest('tr').children()[3].textContent);
$("#description2").val($(this).closest('tr').children()[4].textContent);
});
function validate_region()
{
if($("#region_name").val() == ""){
return false; }
else if($("#description1").val() == "") {
return false; }
else if($("#description2").val() == "") {
return false; }
else
{
// HERE U SHOULD WRITE CODE TO WRITE IT TO DATABASE
$("#myModel").modal("hide");
return true;
}
}
<!DOCTYPE html>
<html>
<head>
<title>sas</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class='modal fade bs-example-modal-sm' id='myModel' tabindex='-1' role='dialog' aria-labelledby='gridSystemModalLabel'>
<div class='modal-dialog modal-sm' style='transform: translate(0px, 50%);' role='document'>
<div class='modal-content'>
<form id="btnupdate" action="#" enctype="multipart/form-data" method="post" class="form-horizontal" role="form" >
<div class="modal-body" >
<table class="table" width="200" border="0" cellpadding="0" cellspacing="0">
<tr class="FormData" rowpos="1">
<td class="CaptionTD">Name of Region</td>
<td>
<input type="hidden" id="region_id" class="FormElement ui-widget-content" role="textbox" name="region_id">
<input type="text" id="region_name" class="FormElement ui-widget-content" role="textbox" name="region_name" required=""></td>
</tr>
<tr class="FormData" rowpos="2">
<td class="CaptionTD">Description 1</td>
<td><input type="text" id="description1" class="FormElement ui-widget-content" role="textbox" name="description1" required="" ></td>
</tr>
<tr class="FormData" rowpos="3">
<td class="CaptionTD">Description 2</td>
<td><input type="text" id="description2" class="FormElement ui-widget-content" role="textbox" name="description2" required="" ></td>
</tr>
<tr class="FormData" rowpos="4"></tr>
</table>
</div>
<div class="modal-footer">
<button type="reset" id="send" class="btn btn-danger" name="btnupdate" onClick="return validate_region()">Update</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</form>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<table class="table">
<tr>
<th></th><th>Id</th><th>Name of Region</th><th>Description 1</th><th>Description 2</th>
</tr>
<tr>
<td><a class="editimg" href="#" id="1"><i class="glyphicon glyphicon-edit" style="font-size:20px"></i></a></td><td>1</td><td>val1</td><td>val2</td><td>val3</td>
</tr>
<tr>
<td><a class="editimg" href="#" id="2"><i class="glyphicon glyphicon-edit" style="font-size:20px"></a></td><td>11</td><td>val11</td><td>val21</td><td>val31</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
I am trying to get a filter working for a table. What I would like is checkboxes to filter (hide) rows based on whether they're checked or not and if the value is present in the table cell. I have it somewhat working, but it will only sort one of the checkboxes. Also, if there are multiple values in the table cell being filtered, that row is hidden. Thoughts? Thank you in advance for any help. I'm really struggling with this for some reason!
Here is the code I have been using:
$("input:checkbox").click(function () {
var showAll = true;
$('tr').not('.first').hide();
$('input[type=checkbox]').each(function () {
if ($(this)[0].checked) {
showAll = false;
var status = $(this).attr('rel');
var value = $(this).val();
$('td.' + 'status' + '[rel="' + value + '"]').parent('tr').show();
}
});
if(showAll){
$('tr').show();
}
});
The markup is as follows (please excuse some messiness, its Wordpress)
<div class="grants-filter">
<h3 class="filter-title">Filter Scholarships</h3><br/>
<h3>Year of Study:</h3>
<input type="checkbox" name="chx" rel="status" value="Freshman">Freshman
<input type="checkbox" name="chx" rel="status" value="Sophmore">Sophmore
<input type="checkbox" name="chx" rel="status" value="Junior">Junior
<input type="checkbox" name="chx" rel="status" value="Senior">Senior
<br/><br/><h3>Duration:</h3>
<input type="checkbox" rel="duration" value="Summer">Summer
<input type="checkbox" rel="duration" value="Semester">Semester
<input type="checkbox" rel="duration" value="Full Year or More">Full Year or More
</div>
<div class="grants-listing">
<table border="1" id="table" class="grants-table">
<thead>
<tr class="first">
<th>Title</th>
<th>Description</th>
<th>Field</th>
<th>Duration</th>
<th>Year of Study</th>
<th>Other</th>
<th>Procedure</th>
<th>URL</th>
</tr>
</thead>
<tbody>
<?php
$grargs = array ( 'post_type' => 'scholarship');
$grant_query = new WP_Query( $grargs );
while ( $grant_query -> have_posts() ):
$grant_query -> the_post(); ?>
<tr class="grant-detail">
<td>
<?php the_title(); ?>
</td>
<td><?php echo wp_trim_words(get_the_content(), 25 ); ?></td>
<td class="fields" rel="<?php echo get_field('fields'); ?>"><?php echo the_field('fields'); ?></td>
<td class="duration" rel="<?php echo the_field('desired_duration'); ?>"><?php echo the_field('desired_duration'); ?></td>
<td class="status" rel="<?php echo the_field('year-of-study'); ?>"><?php echo the_field('year-of-study'); ?></td>
<td class="other" rel="<?php echo the_field('other'); ?>"><?php echo the_field('other'); ?></td>
<td class="procedure" rel="<?php echo the_field('procedure'); ?>"><?php echo the_field('procedure'); ?></td>
<td class="url"><?php echo get_field('url'); ?></td>
</tr>
<?php endwhile;
wp_reset_postdata(); //reset the first query
?>
</tbody>
</table>
As I think you just are calling the first checkbox [0]
if ($(this)[0].checked) {
call all by inserting someting like
$('input[type=checkbox]').each(function () {
if (this.checked) {
console.log($(this).val());
}
});
Your code works fine, here is a simplified version
$("input:checkbox").click(function() {
var showAll = true;
$('tr').not('.first').hide();
$('input:checkbox:checked').each(function() {
showAll = false;
var status = $(this).attr('rel');
var value = $(this).val();
$('td.' + 'status' + '[rel="' + value + '"]').parent('tr').show();
});
if (showAll) {
$('tr').show();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="grants-filter">
<h3 class="filter-title">Filter Scholarships</h3>
<br/>
<h3>Year of Study:</h3>
<input type="checkbox" name="chx" rel="status" value="Freshman">Freshman
<input type="checkbox" name="chx" rel="status" value="Sophmore">Sophmore
<input type="checkbox" name="chx" rel="status" value="Junior">Junior
<input type="checkbox" name="chx" rel="status" value="Senior">Senior
</div>
<div class="grants-listing">
<table border="1" id="table" class="grants-table">
<thead>
<tr class="first">
<th>Title</th>
<th>Description</th>
<th>Fields</th>
<th>Status</th>
<th>Procedure</th>
</tr>
</thead>
<tbody>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Freshman">Freshman</td>
<td class="status" rel="Freshman">Freshman</td>
<td class="procedure" rel="Freshman">Freshman</td>
</tr>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Sophmore">Sopho</td>
<td class="status" rel="Sophmore">Sopho</td>
<td class="procedure" rel="Sophmore">Sopho</td>
</tr>
<tr class="grant-detail">
<td>
Name
</td>
<td>Description</td>
<td class="fields" rel="Junior">Junior</td>
<td class="status" rel="Junior">Junior</td>
<td class="procedure" rel="Junior">Junior</td>
</tr>
</tbody>
</table>
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>      <?php echo $row['qty']; ?></td>
<td> <?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);
});
};