Perform POST from HTML Table
Posted: Thu Dec 17, 2015 1:10 pm
Demo Link : clean.omegakart.com
UID: admin
Pass : 123456
Under forecast Tab there is a Create Forecast form.
User will select Market from Drop Down -- This Multi Select Option , Select Production Date, Selection Sales Date
This form on Post opens up a HTML Table with Form Input.
Table Headers:
Category || Product ID || Product Name || [Dynamic Column Name populated from Drop-down Box from previous form]

Category, Product ID, Product Name are populated from products table
Need to collect Input for market quantity under each column for respective market in the header.

once all column are populated it should be inserted into the table production under database such that market headers are transposed to vertical list and inputs taken are appended alongside respectively for each product.
Edit: I am not able to post the values from Input Box o database, Not Sure what is missing now going though the loops. If someone can guide me here it would be really great
PS: Missed out on the Question Sorry.
UID: admin
Pass : 123456
Under forecast Tab there is a Create Forecast form.
User will select Market from Drop Down -- This Multi Select Option , Select Production Date, Selection Sales Date
This form on Post opens up a HTML Table with Form Input.
Table Headers:
Category || Product ID || Product Name || [Dynamic Column Name populated from Drop-down Box from previous form]

Category, Product ID, Product Name are populated from products table
Need to collect Input for market quantity under each column for respective market in the header.

once all column are populated it should be inserted into the table production under database such that market headers are transposed to vertical list and inputs taken are appended alongside respectively for each product.
Code: Select all
<?php
require_once dirname(__FILE__) . '/config/dbconfig.php';
if(!$user->is_loggedin())
{
$user->redirect('index.php');
}
$user_id = $_SESSION['user_session'];
$stmt = $DB_con->prepare("SELECT * FROM users WHERE user_id=:user_id");
$stmt->execute(array(":user_id"=>$user_id));
$userRow=$stmt->fetch(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<link rel="shortcut icon" href="images/favicon_1.ico">
<title>Omega CRM</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/core.css" rel="stylesheet" type="text/css">
<link href="css/components.css" rel="stylesheet" type="text/css">
<link href="css/icons.css" rel="stylesheet" type="text/css">
<link href="css/pages.css" rel="stylesheet" type="text/css">
<link href="css/responsive.css" rel="stylesheet" type="text/css">
<link href="plugins/custombox/dist/custombox.min.css" rel="stylesheet">
<link href="plugins/timepicker/bootstrap-timepicker.min.css" rel="stylesheet">
<link href="plugins/mjolnic-bootstrap-colorpicker/dist/css/bootstrap-colorpicker.min.css" rel="stylesheet">
<link href="plugins/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css" rel="stylesheet">
<link href="plugins/clockpicker/dist/jquery-clockpicker.min.css" rel="stylesheet">
<link href="plugins/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
<link href="plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.css" rel="stylesheet" />
<link href="plugins/switchery/dist/switchery.min.css" rel="stylesheet" />
<link href="plugins/multiselect/css/multi-select.css" rel="stylesheet" type="text/css" />
<link href="plugins/select2/select2.css" rel="stylesheet" type="text/css" />
<link href="plugins/bootstrap-select/dist/css/bootstrap-select.min.css" rel="stylesheet" />
<link href="plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.css" rel="stylesheet" />
<!--[if lt IE 9]><script src="https$//oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https$//oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script><![endif]-->
<script src="js/modernizr.min.js"></script>
</head>
<body class="fixed-left">
<div id="wrapper">
<div class="topbar">
<?php include_once dirname(__FILE__) . '/includes/topbarleft.php'; ?>
<div class="navbar navbar-default" role="navigation">
<div class="container">
<div class="">
<?php include_once dirname(__FILE__) . '/includes/topbarpullleft.php'; ?>
<?php include_once dirname(__FILE__) . '/includes/topbarright.php'; ?>
<div class="left side-menu">
<div class="sidebar-inner slimscrollleft">
<div class="user-details">
<div class="pull-left">
<img src="images/users/avatar-1.jpg" alt="" class="thumb-md img-circle">
</div>
<div class="user-info">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false"><?php echo $userRow['user_first_name'] ?></a>
<p class="text-muted m-0"><?php echo $userRow['user_department'] ?></p>
</div>
</div>
<div id="sidebar-menu">
<ul>
<?php include_once dirname(__FILE__) . '/includes/menu.php'; ?>
<?php
if($userRow['user_department']=="sales" || $userRow['user_role']=="Admin")
{
?>
<?php include_once dirname(__FILE__) . '/includes/salesmenu.php'; ?>
<?php
}
?>
<?php
if($userRow['user_department']=="production" || $userRow['user_role']=="Admin")
{
?>
<?php include_once dirname(__FILE__) . '/includes/productionmenu.php'; ?>
<?php
}
?>
<?php
if($userRow['user_department']=="marketing" || $userRow['user_role']=="Admin")
{
?>
<?php include_once dirname(__FILE__) . '/includes/forcastingmenu.php'; ?>
<?php
}
?>
<?php
if($userRow['user_role']=="Admin")
{
?>
<?php include_once dirname(__FILE__) . '/includes/menuadmin.php'; ?>
<?php
}
?>
</ul>
<div class="clearfix">
</div>
<div class="clearfix">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="content-page">
<div class="content">
<div class="container">
<div class="row">
<div class="col-sm-12">
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li class="active">Category Forecast</li>
</ol>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<?php
if(isset($_POST['for_post']))
{
try
{
?>
<div class="card-box" style="padding-left:5px;padding:10px;padding-bottom:50px">
<div class="row">
<div class="col-sm-12">
<?php
if(isset($_POST['for_post_market'])){ $market = $_POST['for_post_market']; }
if(isset($_POST['for_post_prod_date'])){ $date_prod = $_POST['for_post_prod_date']; }
if(isset($_POST['for_post_sale_date'])){ $date_sale = $_POST['for_post_sale_date']; }
$query = 'SELECT * FROM product WHERE prod_status="Active"';
$stmt = $DB_con->prepare($query);
$stmt->execute();
while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
$result[$row['prod_cat_name']][] = $row['prod_id'];
}
?>
<form method="post">
<table id="invoices" border="1" class="table table-striped table-bordered">
<thead>
<col width="65">
<col width="65">
<th>Category</th>
<th>Product ID</th>
<th>Product Name</th>
<th hidden="true">Production Date</th>
<th hidden="true">Sales Date</th>
<?php
$a=count($market);
for($i=0;$i<$a;$i++)
{
echo '<th><input type="hidden" value="'. $market[$i] . '">'. $market[$i] .'</th>';
}
?>
</thead>
<tbody>
<?php
foreach($result as $id => $invoices) {
echo '<tr>';
echo '<td rowspan='. count($invoices) . '>' . $id . '</td>';
$count = 0;
foreach ($invoices as $invoice) {
if ($count != 0) {
echo '<tr>';
}
$count++;
echo '<td>' . $invoice . '</td>';
?>
<?php
$psql = $DB_con->prepare("SELECT * FROM product WHERE prod_id='$invoice'");
$psql->execute();
$resultpro = $psql->fetchall(PDO::FETCH_ASSOC);
foreach($resultpro as $line) {
}
?>
<td><?php echo $line['prod_name']; ?></td>
<?php
echo '<td hidden="true">' . $date_prod . '</td>';
echo '<td hidden="true">' . $date_sale . '</td>';
$a=count($market);
for($j=0;$j<$a;$j++)
{
echo '<td><input type="text" name="'. $market[$j].$invoice .' "class="form-control" maxlength="6" size="4"></td>';
}
}
}
echo '</tbody>';
echo '</table>';
?>
<button type="submit" class="btn btn-default waves-effect waves-light" name="btn-saveforcast" id="btn-saveforcast">Save</button>
<?php
if(isset($_POST['btn-saveforcast']))
{
try{
foreach ($invoices as $i){
foreach( $market as $m ) {
$forcast_qtys = $_POST[$m.$i];
foreach( $forcast_qtys as $q) {
echo $q;
$result1 = $DB_con->prepare("INSERT INTO test(test) VALUES ($q)");
$result1->execute();
}
}
}
}
catch(PDOException $e)
{
echo $e->getMessage();
echo "<script type='text/javascript'>alert('$e')</script>";
}
}
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
else
{ ?>
</form>
</div>
</div>
</div>
<div class="card-box" style="padding-left:5px;padding:10px;padding-bottom:500px">
<div class="row">
<div class="col-sm-12">
<form class="form-inline" method="post">
<div class="form-group m-r-10">
<label for="exampleInputName2">Market : </label>
<div class="input-group">
<select class="selectpicker" multiple data-selected-text-format="count" data-style="btn-white" name="for_post_market[]">
<?php
$stmt = $DB_con->prepare('Select * from location');
$stmt->execute();
while($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
echo '<option>'.$row['location_name'].'</option>';
}
?>
</select>
<div>
 
<div class="form-group m-r-10">
<label for="exampleInputEmail2">Production Date : </label>
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker-autoclose" name="for_post_prod_date">
<span class="input-group-addon bg-custom b-0 text-white"><i class="icon-calender"></i></span>
</div>
</div>
<div class="form-group m-r-10">
<label for="exampleInputEmail2">Sales Date : </label>
<div class="input-group">
<input type="text" class="form-control" placeholder="mm/dd/yyyy" id="datepicker2-autoclose" name="for_post_sale_date">
<span class="input-group-addon bg-custom b-0 text-white"><i class="icon-calender"></i></span>
</div>
</div>
<button type="submit" class="btn btn-default waves-effect waves-light btn-md" id="for_post" name="for_post">
Submit
</button>
</form>
<?php
?>
</div>
</div>
</div>
</div>
</div>
</div>
<?php
}
?>
</div>
</div>
</div>
<div id="custom-modal" class="modal-demo">
<button type="button" class="close" onclick="Custombox.close()"><span>×</span><span class="sr-only">Close</span></button>
<h4 class="custom-modal-title">Add New Category</h4>
<div class="custom-modal-text text-left">
<form role="form" action="createcat.php">
<div class="form-group">
<label for="name">Category Name</label>
<input type="text" class="form-control" id="cat_name" name="cat_name" placeholder="Enter category name">
</div>
<button type="submit" class="btn btn-default waves-effect waves-light" name="btn-savecat" id="btn-savecat">Save</button>
<button type="button" class="btn btn-danger waves-effect waves-light m-l-10">Cancel</button>
<?php
if(isset($_GET['cat_name']))
{
try
{
$id=$_GET['cat_name'];
$result = $DB_con->prepare("INSERT INTO category(cat_name,cat_status)
VALUES(:userid,'Active')");
$result->bindParam(':userid', $id);
$result->execute();
}
catch(PDOException $e)
{
echo $e->getMessage();
}
}
?>
</form>
</div>
</div>
<script>var resizefunc = [];</script>
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/detect.js"></script>
<script src="js/fastclick.js"></script>
<script src="js/jquery.slimscroll.js"></script>
<script src="js/jquery.blockUI.js"></script>
<script src="js/waves.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/jquery.nicescroll.js"></script>
<script src="js/jquery.scrollTo.min.js"></script>
<script src="js/jquery.core.js"></script>
<script src="js/jquery.app.js"></script>
<script src="plugins/custombox/dist/custombox.min.js"></script>
<script src="plugins/custombox/dist/legacy.min.js"></script>
<script src="plugins/moment/moment.js"></script>
<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>
<script src="plugins/mjolnic-bootstrap-colorpicker/dist/js/bootstrap-colorpicker.min.js"></script>
<script src="plugins/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
<script src="plugins/clockpicker/dist/jquery-clockpicker.min.js"></script>
<script src="plugins/bootstrap-daterangepicker/daterangepicker.js"></script>
<script src="plugins/bootstrap-tagsinput/dist/bootstrap-tagsinput.min.js"></script>
<script src="plugins/switchery/dist/switchery.min.js"></script>
<script type="text/javascript" src="plugins/multiselect/js/jquery.multi-select.js"></script>
<script type="text/javascript" src="plugins/jquery-quicksearch/jquery.quicksearch.js"></script>
<script src="plugins/select2/select2.min.js" type="text/javascript"></script>
<script src="plugins/bootstrap-select/dist/js/bootstrap-select.min.js" type="text/javascript"></script>
<script src="plugins/bootstrap-filestyle/src/bootstrap-filestyle.min.js" type="text/javascript"></script>
<script src="plugins/bootstrap-touchspin/dist/jquery.bootstrap-touchspin.min.js" type="text/javascript"></script>
<script src="plugins/bootstrap-maxlength/bootstrap-maxlength.min.js" type="text/javascript"></script>
<script>
jQuery(document).ready(function() {
// Time Picker
jQuery('#timepicker').timepicker({
defaultTIme : false
});
jQuery('#timepicker2').timepicker({
showMeridian : false
});
jQuery('#timepicker3').timepicker({
minuteStep : 15
});
//colorpicker start
$('.colorpicker-default').colorpicker({
format: 'hex'
});
$('.colorpicker-rgba').colorpicker();
// Date Picker
jQuery('#datepicker').datepicker();
jQuery('#datepicker-autoclose').datepicker({
autoclose: true,
todayHighlight: true
});
jQuery('#datepicker2-autoclose').datepicker({
autoclose: true,
todayHighlight: true
});
jQuery('#datepicker-inline').datepicker();
jQuery('#datepicker-multiple-date').datepicker({
format: "mm/dd/yyyy",
clearBtn: true,
multidate: true,
multidateSeparator: ","
});
jQuery('#date-range').datepicker({
toggleActive: true
});
//Clock Picker
$('.clockpicker').clockpicker({
donetext: 'Done'
});
$('#single-input').clockpicker({
placement: 'bottom',
align: 'left',
autoclose: true,
'default': 'now'
});
$('#check-minutes').click(function(e){
// Have to stop propagation here
e.stopPropagation();
$("#single-input").clockpicker('show')
.clockpicker('toggleView', 'minutes');
});
//Date range picker
$('.input-daterange-datepicker').daterangepicker({
buttonClasses: ['btn', 'btn-sm'],
applyClass: 'btn-default',
cancelClass: 'btn-white'
});
$('.input-daterange-timepicker').daterangepicker({
timePicker: true,
format: 'MM/DD/YYYY h:mm A',
timePickerIncrement: 30,
timePicker12Hour: true,
timePickerSeconds: false,
buttonClasses: ['btn', 'btn-sm'],
applyClass: 'btn-default',
cancelClass: 'btn-white'
});
$('.input-limit-datepicker').daterangepicker({
format: 'MM/DD/YYYY',
minDate: '06/01/2015',
maxDate: '06/30/2015',
buttonClasses: ['btn', 'btn-sm'],
applyClass: 'btn-default',
cancelClass: 'btn-white',
dateLimit: {
days: 6
}
});
$('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
$('#reportrange').daterangepicker({
format: 'MM/DD/YYYY',
startDate: moment().subtract(29, 'days'),
endDate: moment(),
minDate: '01/01/2012',
maxDate: '12/31/2015',
dateLimit: {
days: 60
},
showDropdowns: true,
showWeekNumbers: true,
timePicker: false,
timePickerIncrement: 1,
timePicker12Hour: true,
ranges: {
'Today': [moment(), moment()],
'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
'Last 7 Days': [moment().subtract(6, 'days'), moment()],
'Last 30 Days': [moment().subtract(29, 'days'), moment()],
'This Month': [moment().startOf('month'), moment().endOf('month')],
'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
},
opens: 'left',
drops: 'down',
buttonClasses: ['btn', 'btn-sm'],
applyClass: 'btn-default',
cancelClass: 'btn-white',
separator: ' to ',
locale: {
applyLabel: 'Submit',
cancelLabel: 'Cancel',
fromLabel: 'From',
toLabel: 'To',
customRangeLabel: 'Custom',
daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
firstDay: 1
}
}, function (start, end, label) {
console.log(start.toISOString(), end.toISOString(), label);
$('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
});
});
</script>
<script>
jQuery(document).ready(function() {
//advance multiselect start
$('#my_multi_select3').multiSelect({
selectableHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
selectionHeader: "<input type='text' class='form-control search-input' autocomplete='off' placeholder='search...'>",
afterInit: function (ms) {
var that = this,
$selectableSearch = that.$selectableUl.prev(),
$selectionSearch = that.$selectionUl.prev(),
selectableSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selectable:not(.ms-selected)',
selectionSearchString = '#' + that.$container.attr('id') + ' .ms-elem-selection.ms-selected';
that.qs1 = $selectableSearch.quicksearch(selectableSearchString)
.on('keydown', function (e) {
if (e.which === 40) {
that.$selectableUl.focus();
return false;
}
});
that.qs2 = $selectionSearch.quicksearch(selectionSearchString)
.on('keydown', function (e) {
if (e.which == 40) {
that.$selectionUl.focus();
return false;
}
});
},
afterSelect: function () {
this.qs1.cache();
this.qs2.cache();
},
afterDeselect: function () {
this.qs1.cache();
this.qs2.cache();
}
});
// Select2
$(".select2").select2();
$(".select2-limiting").select2({
maximumSelectionLength: 2
});
$('.selectpicker').selectpicker();
$(":file").filestyle({input: false});
});
//Bootstrap-TouchSpin
$(".vertical-spin").TouchSpin({
verticalbuttons: true,
verticalupclass: 'ion-plus-round',
verticaldownclass: 'ion-minus-round'
});
var vspinTrue = $(".vertical-spin").TouchSpin({
verticalbuttons: true
});
if (vspinTrue) {
$('.vertical-spin').prev('.bootstrap-touchspin-prefix').remove();
}
$("input[name='demo1']").TouchSpin({
min: 0,
max: 100,
step: 0.1,
decimals: 2,
boostat: 5,
maxboostedstep: 10,
postfix: '%'
});
$("input[name='demo2']").TouchSpin({
min: -1000000000,
max: 1000000000,
stepinterval: 50,
maxboostedstep: 10000000,
prefix: '$'
});
$("input[name='demo3']").TouchSpin();
$("input[name='demo3_21']").TouchSpin({
initval: 40
});
$("input[name='demo3_22']").TouchSpin({
initval: 40
});
$("input[name='demo5']").TouchSpin({
prefix: "pre",
postfix: "post"
});
$("input[name='demo0']").TouchSpin({});
//Bootstrap-MaxLength
$('input#defaultconfig').maxlength()
$('input#thresholdconfig').maxlength({
threshold: 20
});
$('input#moreoptions').maxlength({
alwaysShow: true,
warningClass: "label label-success",
limitReachedClass: "label label-danger"
});
$('input#alloptions').maxlength({
alwaysShow: true,
warningClass: "label label-success",
limitReachedClass: "label label-danger",
separator: ' out of ',
preText: 'You typed ',
postText: ' chars available.',
validate: true
});
$('textarea#textarea').maxlength({
alwaysShow: true
});
$('input#placement') .maxlength({
alwaysShow: true,
placement: 'top-left'
});
</script>
</body>
</html>PS: Missed out on the Question Sorry.