Hi there i got some problem doing checkbox limit. Here are the coding. Focus on ajaxTable.php. I'm using aceAdmin template.
Procedure: If customer request 2 notebook, admin can only choose 2 notebook from stock that been called from databases.
Problem: Checkbox limit not working, I place the checkbox limit code at ajaxTable.php
itemCheckOut.php
<?php
session_start();
include '../connect.php';
$surname = null;
$icno = $_SESSION['owner'];
$sql = "SELECT * FROM profile WHERE icno='$icno'";
$result = $conn -> query($sql);
$getData = $result->fetch_assoc();
$surname = $getData['panggilan'];
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta charset="utf-8" />
<title>Admin Dashboard</title>
<meta name="description" content="overview & stats" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="assets/css/bootstrap.min.css" />
<link rel="stylesheet" href="assets/font-awesome/4.5.0/css/font-awesome.min.css" />
<link rel="stylesheet" href="assets/css/fonts.googleapis.com.css" />
<link rel="stylesheet" href="assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
<link rel="stylesheet" href="assets/css/ace-skins.min.css" />
<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
<script src="assets/js/ace-extra.min.js"></script>
</head>
<body class="no-skin">
<div id="navbar" class="navbar navbar-default ace-save-state">
<div class="navbar-container ace-save-state" id="navbar-container">
<div class="navbar-header pull-left">
<a href="index.php" class="navbar-brand">
<small>
<i class="fa fa-archive"></i>
Selamat Datang : <?php echo $surname; ?>
</small>
</a>
</div>
</div><!-- /.navbar-container -->
</div>
<div class="main-container ace-save-state" id="main-container">
<script type="text/javascript">
try{ace.settings.loadState('main-container')}catch(e){}
</script>
<div id="sidebar" class="sidebar responsive ace-save-state">
<script type="text/javascript">
try{ace.settings.loadState('sidebar')}catch(e){}
</script>
<ul class="nav nav-list">
<li class="">
<a href="index.php">
<i class="menu-icon fa fa-tachometer"></i>
<span class="menu-text"> Dashboard </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-search"></i>
<span class="menu-text">
Inventori
</span>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="addInventory.php">
<i class="menu-icon fa fa-search"></i>
<span class="menu-text">
Tambah Inventori
</span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="manageInventory.php">
<i class="menu-icon fa fa-file-text-o"></i>
<span class="menu-text"> Uruskan Inventori </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="allInventory.php">
<i class="menu-icon fa fa-list"></i>
<span class="menu-text"> Senarai Inventori </span>
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="bookingStatus.php">
<i class="menu-icon fa fa-book"></i>
<span class="menu-text"> Status Tempahan </span>
</a>
<b class="arrow"></b>
</li>
<li class="active open">
<a href="#" class="dropdown-toggle">
<i class="menu-icon fa fa-flag"></i>
<span class="menu-text"> Uruskan Tempahan </span>
</a>
<b class="arrow"></b>
<ul class="submenu">
<li class="">
<a href="itemCheckIn.php">
<i class="menu-icon fa fa-book"></i>
<span class="menu-text"> Inventori Masuk </span>
</a>
<b class="arrow"></b>
</li>
<li class="active">
<a href="itemCheckOut.php">
<i class="menu-icon fa fa-book"></i>
<span class="menu-text"> Inventori Keluar </span>
</a>
<b class="arrow"></b>
</li>
</ul>
</li>
<li class="">
<a href="updateProfile.php">
<i class="menu-icon fa fa-user"></i>
<span class="menu-text"> Kemas Kini Profile </span>
</a>
<b class="arrow"></b>
</li>
<li class="">
<a href="../logout.php">
<i class="menu-icon fa fa-list-alt"></i>
<span class="menu-text"> Logout </span>
</a>
<b class="arrow"></b>
</li>
</ul><!-- /.nav-list -->
<div class="sidebar-toggle sidebar-collapse" id="sidebar-collapse">
<i id="sidebar-toggle-icon" class="ace-icon fa fa-angle-double-left ace-save-state" data-icon1="ace-icon fa fa-angle-double-left" data-icon2="ace-icon fa fa-angle-double-right"></i>
</div>
</div>
<div class="main-content">
<div class="main-content-inner">
<div class="page-content">
<div class="page-header">
<h1>
Inventori Keluar
</h1>
</div><!-- /.page-header -->
<div class="row">
<div class="col-xs-12">
<form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" class="form-horizontal">
<label>Pilih Peminjam : </label><br />
<table id="simple-table" class="table table-bordered table-hover">
<?php
echo "
<thead>
<tr>
<th>Kod Tempahan</th><th>Nama Peminjam</th><th>Jenis Item</th><th>Kuantiti</th><th>Pilihan</th>
</tr>
</thead>
<tbody>
";
$sqlPinjaman = "SELECT * FROM pinjaman WHERE status=1";
$queryPinjaman = $conn -> query($sqlPinjaman);
while ($resultPinjaman = $queryPinjaman -> fetch_assoc())
{
$icnoUser = $resultPinjaman['peminjam'];
$sqlProfile = "SELECT nama FROM profile WHERE icno='$icnoUser'";
$queryProfile = $conn -> query($sqlProfile);
$resultProfile = $queryProfile -> fetch_assoc();
$namaProfile = $resultProfile['nama'];
echo "
<tr>
<td>". $resultPinjaman['bookid'] ."</td><td>$namaProfile</td><td>". $resultPinjaman['jenis'] ."</td><td>". $resultPinjaman['kuantiti'] ."</td>
<td>
<div class='radio'>
<label>
<input name='form-field-radio' type='radio' class='ace' value='". $resultPinjaman['jenis'] ."' onclick='showJenis(this.value)'/>
<span class='lbl'> Pilih</span>
</label>
</div>
</td>
</tr>
";
}
?>
</tbody>
</table>
<div id="showTable">PILIH TEMPAHAN DIATAS</div>
<div class="clearfix form-actions">
<div class="col-md-offset-3 col-md-9">
<button class="btn btn-info" type="submit">
<i class="ace-icon fa fa-check bigger-110"></i>
Item Keluar
</button>
</div>
</div>
</form>
</div><!-- /.col -->
</div><!-- /.row -->
</div><!-- /.page-content -->
</div>
</div><!-- /.main-content -->
<div class="footer">
<div class="footer-inner">
<div class="footer-content">
<span class="bigger-120">
<span class="blue bolder">YT</span>
Inventory © <?php echo date('Y'); ?>
</span>
</div>
</div>
</div>
<a href="#" id="btn-scroll-up" class="btn-scroll-up btn btn-sm btn-inverse">
<i class="ace-icon fa fa-angle-double-up icon-only bigger-110"></i>
</a>
</div><!-- /.main-container -->
<!-- basic scripts -->
<!--[if !IE]> -->
<script src="assets/js/jquery-2.1.4.min.js"></script>
<!-- <![endif]-->
<!--[if IE]>
<script src="assets/js/jquery-1.11.3.min.js"></script>
<![endif]-->
<script type="text/javascript">
if('ontouchstart' in document.documentElement) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
</script>
<script src="assets/js/bootstrap.min.js"></script>
<!-- page specific plugin scripts -->
<!--[if lte IE 8]>
<script src="assets/js/excanvas.min.js"></script>
<![endif]-->
<script src="assets/js/jquery-ui.custom.min.js"></script>
<script src="assets/js/jquery.ui.touch-punch.min.js"></script>
<script src="assets/js/jquery.easypiechart.min.js"></script>
<script src="assets/js/jquery.sparkline.index.min.js"></script>
<script src="assets/js/jquery.flot.min.js"></script>
<script src="assets/js/jquery.flot.pie.min.js"></script>
<script src="assets/js/jquery.flot.resize.min.js"></script>
<!-- ace scripts -->
<script src="assets/js/ace-elements.min.js"></script>
<script src="assets/js/ace.min.js"></script>
<!-- inline scripts related to this page -->
<script type="text/javascript">
function showJenis(jenisItem)
{
if (jenisItem == "PS3")
{
document.getElementById("showTable").innerHTML = "FREE PS3";
return;
}
else
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
document.getElementById("showTable").innerHTML = this.responseText;
}
};
}
xmlhttp.open("GET","ajaxTable.php?jenisItem=" + jenisItem, true);
xmlhttp.send();
}
jQuery(function($) {
//show the dropdowns on top or bottom depending on window height and menu position
$('#task-tab .dropdown-hover').on('mouseenter', function(e) {
var offset = $(this).offset();
var $w = $(window)
if (offset.top > $w.scrollTop() + $w.innerHeight() - 100)
$(this).addClass('dropup');
else $(this).removeClass('dropup');
});
})
</script>
</body>
</html>
ajaxTable.php
<?php
session_start();
include '../connect.php';
$jenis = $_GET['jenisItem'];
$sqlTable = "SELECT * FROM stock WHERE jenis='$jenis'";
$queryTable = $conn -> query($sqlTable);
echo "<label>SILA PILIH ITEM UNTUK DIKELUARKAN :</label>";
?>
<table id="simple-table" class="table table-bordered table-hover">
<thead>
<tr>
<th>Jenama</th><th>Model</th><th>No Siri</th><th>No Siri Pendaftaran</th><th>Pilih</th>
</tr>
</thead>
</tbody>
<?php
while ($resultTable = $queryTable -> fetch_assoc())
{
echo "
<tr>
<td>". $resultTable['jenama'] ."</td><td>". $resultTable['model'] ."</td><td>". $resultTable['nosiri'] ."</td><td>". $resultTable['nosiripendaftaran'] ."</td>
<td>
<div class='checkbox'>
<label>
<input name='form-field-checkbox' type='checkbox' class='ace limitBox' />
<span class='lbl'> Pilih</span>
</label>
</div>
</td>
</tr>
";
}
?>
<script>
jQuery(function(){
var max = 1;
var checkboxes = $('input[type="checkbox"]');
checkboxes.change(function(){
var current = checkboxes.filter(':checked').length;
checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
});
});
</script>
</tbody>
</table>
