We Keep Coding

what can i do to make my add to cart button work?

Please help me out, i'm working on an e-commerce site, I added a category page, on the index page the add to cart works but when I select a particular category, and I try to add any of the product, it doesn't add to the cart and it goes back to the index page, and untick the category, maybe someone can assist me here is my code below:
I have three files,
this is my index codes
index.php:
<!--= this code displays the categories -->
<h3 class="text-center text-light bg-dark p-2"><b><a style="color: white;" href="index.php">Products</a></b></h3>
`enter code here`<div class="container-fluid">
enter code here<div class="row">
<div class="col-lg-3">
<h3 class="text-center"><b>All Categories</b></h3>
<hr>
<h6 class="text-light bg-dark p-2 rounded"><b>Select Category</b></h6>
<ul class="list-group">
<?php
$sql = "SELECT DISTINCT product_cat FROM products ORDER BY product_cat";
$result = $conn->query($sql);
while ($row=$result->fetch_assoc()){
?>
<li class="list-group-item">
<div class="form-check">
<label class="form-check-label">
<input type="checkbox" class="form-check-input product_check" value="<?= $row['product_cat']; ?>" id="product_cat"><?= $row['product_cat']; ?>
</label>
</div>
</li>
<?php } ?>
</ul>
</div>
<div class="col-lg-9">
<h5 class="text-center" style="font-weight: bolder;" id="textChange">All Products</h5>
<hr>
<div class="text-center">
<img src="../images/loader.gif" id="loader" width="200" style="display: none;">
</div>
<div class="row" id="result">
<div id="message"></div>
<div class="row mt-2 pb-3">
<?php
include 'config.php';
$sql="SELECT * FROM products";
$result = $conn->query($sql);
while($row = $result->fetch_assoc()):
?>
<div class="col-sm-6 col-md-3 col-lg-3 mb-2">
<div class="card-deck">
<div class="card p-2 border-secondary mb-2">
<img src="../admin/product-images/<?= $row['product_image']; ?>" class="card-img-top" height="250">
<div class="card-body p-1">
<h4 class="card-title text-center text-info"><?= $row['product_name'] ?></h4>
<h5 class="card-text text-center text-danger"><b>₦ <?= number_format($row['product_price'],2) ?>/- </b></h5>
</div>
<div class="card-footer p-1">
<form action="" class="form-submit">
<input type="hidden" class="pid" value="<?= $row['id'] ?>">
<input type="hidden" class="pname" value="<?= $row['product_name'] ?>">
<input type="hidden" class="pprice" value="<?= $row['product_price'] ?>">
<input type="hidden" class="pimage" value="<?= $row['product_image'] ?>">
<input type="hidden" class="pcode" value="<?= $row['product_code'] ?>">
<button class="btn btn-success btn-block addItemBtn"><i class="fas fa-cart-plus"></i> Add to Cart</button>
<button class="btn btn-info btn-block viewItemBtn"><i class="fas fa-info-circle"></i> View Details</button>
</form>
</div>
</div>
</div>
</div>
<?php endwhile; ?>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="https://cdn.datatables.net/v/bs4/dt-1.10.20/datatables.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2#8"></script>
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript" src="../js/bootstrap.bundle.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".addItemBtn").click(function(e){
e.preventDefault();
var $form = $(this).closest(".form-submit");
var pid = $form.find(".pid").val();
var pname = $form.find(".pname").val();
var pprice = $form.find(".pprice").val();
var pimage = $form.find(".pimage").val();
var pcode = $form.find(".pcode").val();
$.ajax({
url: 'action.php',
method: 'post',
data: {pid:pid,pname:pname,pprice:pprice,pimage:pimage,pcode:pcode},
success:function(response){
$("#message").html(response);
load_cart_item_number();
}
});
});
load_cart_item_number();
function load_cart_item_number(){
$.ajax({
url: '../action.php',
method: 'get',
data: {cartItem:"cart_item"},
success:function(response){
$("#cart-item").html(response);
}
});
}
$(".product_check").click(function(){
$("#loader").show();
var action = 'data';
var product_cat = get_filter_text('product_cat');
$.ajax({
url:'action.php',
method:'POST',
data:{action:action,product_cat:product_cat},
success:function(response){
$("#result").html(response);
$("#loader").hide();
$("#textChange").text("Filtered Products");
}
});
});
function get_filter_text(text_id){
var filterData = [];
$('#'+text_id+':checked').each(function(){
filterData.push($(this).val());
});
return filterData;
}
});
</script>
</body>
</html>
this is my action codes
action.php:
<?php
//db connection
require 'config.php';
//display products and category products
if (isset($_POST['action'])) {
$sql = "SELECT * FROM products WHERE product_cat !=''";
if (isset($_POST['product_cat'])) {
$product_cat = implode("','", $_POST['product_cat']);
$sql .="AND product_cat IN('".$product_cat."')";
}
$result = $conn->query($sql);
$output='';
if($result->num_rows>0){
while ($row=$result->fetch_assoc()){
$output .= '<div id="message"></div>
<div class="col-sm-6 col-md-3 col-lg-3 mb-2">
<div class="card-deck">
<div class="card p-2 border-secondary mb-2">
<img src="../admin/product-images/'.$row['product_image'].'" class="card-img-top" height="250">
<div class="card-body p-1">
<h4 class="card-title text-center text-info">'.$row['product_name'].'</h4>
<h5 class="card-text text-center text-danger"><b>₦ '.number_format($row['product_price'],2).'/- </b></h5>
</div>
<div class="card-footer p-1">
<form action="" class="form-submit">
<input type="hidden" class="pid" value="'.$row['id'].'">
<input type="hidden" class="pname" value="'.$row['product_name'].'">
<input type="hidden" class="pprice" value="'.$row['product_price'].'">
<input type="hidden" class="pimage" value="'.$row['product_image'].'">
<input type="hidden" class="pcode" value="'.$row['product_code'].'">
<button class="btn btn-success btn-block addItemBtn"><i class="fas fa-cart-
plus"></i> Add to Cart</button>
<button class="btn btn-info btn-block viewItemBtn"><i class="fas fa-info-
circle"></i> View Details</button>
</form>
</div>
</div>
</div>
</div>';
}
}
else{
$output = "<h3>No Products Found!</h3>";
}
echo $output;
}
//add to cart codes
if(isset($_POST['pid'])){
$pid = $_POST['pid'];
$pname = $_POST['pname'];
$pprice = $_POST['pprice'];
$pimage = $_POST['pimage'];
$pcode = $_POST['pcode'];
$pqty = 1;
$stmt = $conn->prepare("SELECT product_code FROM cart WHERE product_code=?");
$stmt->bind_param("s",$pcode);
$stmt->execute();
$res = $stmt->get_result();
$r = $res->fetch_assoc();
$code = $r['product_code'];
if(!$code){
$query = $conn->prepare("INSERT INTO cart (product_name,product_price,product_image,qty,total_price,product_code) VALUES (?,?,?,?,?,?)");
$query->bind_param("sssiss",$pname,$pprice,$pimage,$pqty,$pprice,$pcode);
$query->execute();
echo '<div class="alert alert-success alert-dismisible mt-2">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Item added to your cart!</strong>
</div>';
}
else{
echo '<div class="alert alert-danger alert-dismisible mt-2">
<button type="button" class="close" data-dismiss="alert">×</button>
<strong>Item already added to your cart!</strong>
</div>';
}
}
?>
thank you

Reviews button not working in the jquery function

I am developing a shopping website for food items. I have my products displayed on my order.php page based on an ajax call which will take the default category on my dropdown list. The items are displayed in cards each with a review button having class 'reviews'. However, when i am making a test with the button using jquery, the page is simply reloading with no action. Please help me
//order.php
<div id="message">
</div>
<div class="container" style="position:relative; top:200px; float:center">
<div class="collapse" id="filterdiv">
<form class="d-inline">
<select id="Category">
<option value='' selected>All</option>
<?php
$fCategory="SELECT DISTINCT Food_Type from food";
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$res=$conn->query($fCategory);
if($res->rowCount()>0)
{
while($row=$res->fetch(PDO::FETCH_ASSOC))
{
echo "<option value=".$conn->quote($row['Food_Type']).">".$row['Food_Type']."
</option>";
}
}
?>
</select>
<select id="price">
<option value="">Price</option>
<option value="lowtohigh">Low to High</option>
<option value="hightolow">High to Low</option>
<
</select>
</form>
</div>
<div class="row" id="result">
</div>
</div>
<script type="text/javascript" src="Bootstrap4/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="Bootstrap4/js/bootstrap.min.js"></script>
<!--Ajax code to get food info-->
<script type="text/javascript">
$(document).ready(function()
{
$("#filterdiv").ready(function(){
let foodType=$("#Category").val();
let price=$("#price").val();
$.ajax({
url:'action.php',
method:'post',
data:{foodType:foodType,price:price},
success:function(response)
{
$("#result").html(response);
}
});
});
});
</script>
Now for action.php
if (isset($_POST['foodType']) || isset($_POST['price']))
{
$foodType=$price=$priceSort=$foodSort="";
if (isset($_POST['foodType']))
{
$foodType=$_POST['foodType'];
if ($foodType=='')
{
$foodSort='';
}
else
{
$foodSort="WHERE Food_Type=".$conn->quote($foodType);
}
}
if (isset($_POST['price']))
{
$price=$_POST['price'];
if ($price=="lowtohigh")
{
$priceSort="ORDER BY `Food_Price(Rs)` ASC";
}
else if ($price=='hightolow')
{
$priceSort="ORDER BY `Food_Price(Rs)` DESC";
}
else
{
$priceSort="";
}
}
$foodDisp="SELECT * FROM food ".$foodSort." ".$priceSort;
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
$res=$conn->query($foodDisp);
while($row=$res->fetch(PDO::FETCH_ASSOC))
{
?>
<div class="col-lg-3 mx-0">
<div class="card-deck" style="display:flex; flex:flex-wrap; padding:2px;">
<div class="card bg-transparent p-2 h-100 border-secondary mx-0 mb-2" style="min-
height:35rem;max-height:35rem;">
<img src="<?= 'foodImages/'.$row['Food_Url'] ?>" class="card-img-top img-fluid img-
responsive img-thumbnail" height="100" width="100%">
<div class="card-body p-1 text-center">
<h4 class="card-title text-center text-info"><?php echo $row['Food_Name']; ?>
</h4>
<h5 class="card-text text-center text-white"><?php echo $row['Food_Description'];
?>
</h5>
<h5 class="card-text text-center text-danger"><?php echo "Rs
".$row['Food_Price(Rs)']; ?>
</h5>
<button class="btn btn-success reviews">Reviews</button>
</div>
<div class="footer p-1">
<form action="" class="form-submit">
<input type="hidden" class="fid" value="<?php echo $row['Food_Id'] ;?>
">
<input type="hidden" class="fname" value="<?php echo $row['Food_Name'] ;?>
">
<input type="hidden" class="fprice" value="<?php echo $row['Food_Price(Rs)']
;?>
">
<input type="hidden" class="fimage" value="<?php echo $row['Food_Url'] ;?>
">
<input type="hidden" class="ftype" value="<?php echo $row['Food_Type'] ;?>
">
<button class="btn btn-info btn-block addItemBtn">Add to cart</button>
</form>
</div>
</div>
</div>
</div>
<?php }
}
?>

Change JS function:
$("form.d-inline select").on('change', function(){
let foodType=$("#Category").val();
let price=$("#price").val();
$.ajax({
url:'action.php',
method:'post',
data:{foodType:foodType,price:price},
success:function(response)
{
$("#result").html(response);
}
});
});

Need detailed view of a table column, when it is clicked(PHP+Mysql+HTML)

I have a table with information fetched from MySQL, but when i click on name column,it should fetch all details of that name and display in detailed view page.my edit and delete buttons work ,but i have no idea how to get a detailed view of the name and its related columns in a new page.kindly help me with that.Thanks in advance.
<div class="table-responsive">
<table class="table table-list-search table-bordered table-striped table-condensed ">
<div class="row">
<div class="col-md-3">
<?php $apage = array('id'=>'','name'=>'');?>
<script>var page_0 = <?php echo json_encode($apage)?></script>
<h3>
<a data="page_0" class="model_form btn btn-sm btn-danger" href="#">
<span class="glyphicon glyphicon-plus"></span> Add new record</a>
</h3>
</div>
<div class="col-md-3">
<?php $apage = array('id'=>'','name'=>'');?>
<script>var page_0 = <?php echo json_encode($apage)?></script>
<h3>
<a data="page_0" class="model_form btn btn-sm btn-danger" href="#">
<span class="glyphicon glyphicon-plus"></span> View record</a>
</h3>
</div>
</div>
<tbody>
<?php if(isset($result) && ($data_record) > 0) : $i=1;
while ($users = mysqli_fetch_object($result)) { ?>
<tr class="<?=$users->id?>_del">
<td><?=$i;?></td>
<td><a data="<?php echo 'page_'.$users->id ?>" class="model_form " href="#"> <?=$users->name;?></a></td>
<td><?=$users->bandwidth;?></td>
<td><?=$users->connectivity;?></td>
<td><?=$users->popname;?></td>
<td><?=$users->popip;?></td>
<td><?=$users->port;?></td>
<td><?=$users->vlan;?></td>
<td><?=$users->nms;?></td>
<td>
<i class="material-icons"></i>
</td>
<script>var page_<?php echo $users->id ?> = <?php echo json_encode($users);?></script>
<td>
<a data="<?php echo 'page_'.$users->id ?>" class="model_form btn btn-info btn-sm" href="#"> <span class="glyphicon glyphicon-pencil"></span></a>
<a data="<?php echo $users->id ?>" title="Delete <?php echo $users->name;?>" class="tip delete_check btn btn-info btn-sm "><span class="glyphicon glyphicon-remove"></span> </a>
</td>
</tr>
<?php $i++; } ?>
<?php else : echo '<tr><td colspan="8"><div align="center">-------No record found -----</div></td></tr>'; ?>
<?php endif; ?>
</tbody>
</table>
<?php
if(isset($_SESSION['flash_msg'])) :
$message = $_SESSION['flash_msg'];
echo $error= '<div class="alert alert-success" role="alert"><span class="glyphicon glyphicon-envelope">
</span> <strong>'.$message.'</strong> </div>';
unset($_SESSION['flash_msg']);
endif;
?>
</div>
</div>
</div>
</div>
</div>
</tbody>
</table>
</div>
</div>
<script src="js/jquery-1.11.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-table.js"></script>
<script src="js/script.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).on('click','.model_form',function(){
$('#form_modal').modal({
keyboard: false,
show:true,
backdrop:'static'
});
var data = eval($(this).attr('data'));
$('#id').val(data.id);
$('#name').val(data.name);
$('#bandwidth').val(data.bandwidth);
$('#connectivity').val(data.connectivity);
$('#popname').val(data.popname);
$('#popip').val(data.popip);
$('#port').val(data.port);
$('#vlan').val(data.vlan);
$('#nms').val(data.nms);
$('#latitude').val(data.latitude);
$('#longitude').val(data.longitude);
if(data.id!=""){
$('#pop_title').html('Edit');
}else{
$('#pop_title').html('Add');
}
});
$(document).on('click','.delete_check',function(){
if(confirm("Are you sure to delete data")){
var current_element = $(this);
url = "add_edit1.php";
$.ajax({
type:"POST",
url: url,
data: {ct_id:$(current_element).attr('data')},
success: function(data) { //location.reload();
$('.'+$(current_element).attr('data')+'_del').animate({ backgroundColor: "#003" }, "slow").animate({ opacity: "hide" }, "slow");
}
});
}
});
});
</script>
<!-- Form modal -->
<div id="form_modal" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"><i class="icon-paragraph-justify2"></i><span id="pop_title">ADD</span> POP INFORMATION</h4>
</div>
<!-- Form inside modal -->
<form method="post" action="add_edit1.php" id="cat_form">
<div class="modal-body with-padding">
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>name :</label>
<input type="text" name="name" id="name" class="form-control required">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>bandwidth :</label>
<input type="text" name="bandwidth" id="bandwidth" class="form-control required number">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>connectivity :</label>
<input type="text" name="connectivity" id="connectivity" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>popname:</label>
<input type="text" name="popname" id="popname" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>popip:</label>
<input type="text" name="popip" id="popip" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>port:</label>
<input type="text" name="port" id="port" class="form-control required number">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>vlan:</label>
<input type="text" name="vlan" id="vlan" class="form-control required number">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>nms:</label>
<input type="text" name="nms" id="nms" class="form-control required number">
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>Latitude:</label>
<input type="text" name="latitude" id="latitude" class="form-control required" >
</div>
</div>
</div>
<div class="form-group">
<div class="row">
<div class="col-sm-12">
<label>Longitude:</label>
<input type="text" name="longitude" id="longitude" class="form-control required" >
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button>
<span id="add">
<input type="hidden" name="id" value="" id="id">
<button type="submit" name="form_data" class="btn btn-primary">Submit</button>
</span>
</div>
</form>
</div>
</div>
</div>
<!-- /form modal -->
<script type="text/javascript">
var $table = $('table');
$table.bootstrapTable({
search: true,
pagination: true,
buttonsClass: 'primary',
minimumCountColumns: 2,
columns: [{
field: 'id',
title: 'ID',
sortable: true,
},{
field: 'name',
title: 'Name',
sortable: true,
},
{
field: 'bandwidth',
title: 'BANDWIDTH',
sortable: true,
},
{
field: 'connectivity',
title: 'CONNECTIVITY',
sortable: true,
},
{
field: 'popname',
title: 'SWITCH NAME',
sortable: true,
},
{
field: 'popip',
title: 'SWITCH IP',
sortable: true,
},
{
field: 'port',
title: 'PORT NAME',
sortable: true,
},
{
field: 'vlan',
title: 'VLAN',
sortable: true,
},
{
field: 'nms',
title: 'NMS',
sortable: true,
},
{
title: 'OPERATIONS' ,
},
{
field: 'operation' ,
title: 'Action' ,
},
],
});
</script>
**add_edit1.php*
<?php
session_start();
include("config.php");
if(isset($_POST['form_data'])) :
$user_name = $db->real_escape_string($_POST['name']);
$user_bandwidth = $db->real_escape_string($_POST['bandwidth']);
$user_connectivity = $db->real_escape_string($_POST['connectivity']);
$user_popname = $db->real_escape_string($_POST['popname']);
$user_popip = $db->real_escape_string($_POST['popip']);
$user_port = $db->real_escape_string($_POST['port']);
$user_vlan = $db->real_escape_string($_POST['vlan']);
$user_nms = $db->real_escape_string($_POST['nms']);
$user_latitude = $db->real_escape_string($_POST['latitude']);
$user_longitude = $db->real_escape_string($_POST['longitude']);
$id = ($_POST['id']!="") ? $_POST['id'] : '';
if($id!="") :
$query = " UPDATE `illt` SET `name`= '$user_name', `bandwidth`='$user_bandwidth',`connectivity`='$user_connectivity', `popname`='$user_popname' , `popip`='$user_popip',`port`='$user_port' , `vlan`='$user_vlan' , `nms`='$user_nms', `latitude`='$user_latitude', `longitude`='$user_longitude' WHERE id=$id";
$msg = "Successfully Updated Your Record";
else:
$query = " INSERT INTO `illt` SET `name`= '$user_name', `bandwidth`='$user_bandwidth',
`connectivity`='$user_connectivity', `popname`='$user_popname' , `popip`='$user_popip',
`port`='$user_port' , `vlan`='$user_vlan' , `nms`='$user_nms', `latitude`='$user_latitude', `longitude`='$user_longitude' ";
$msg = "Successfully Inserted Your Record";
endif;
$sql = $db->query($query);
$_SESSION['flash_msg'] = $msg;
header("Location:illmasterlist.php");
endif;
if(isset($_POST['ct_id'])) :
$id = ($_POST['ct_id']!="") ? $_POST['ct_id'] : '';
if($id!="") :
$query = "DELETE FROM illt WHERE id =$id";
$sql = $db->query($query);
echo 1;
else :
echo 0;
endif;
else :
echo 0;
endif;
?>

you want a detailed view of user when the username found here <td><a data="<?php echo 'page_'.$users->id ?>" class="model_form " href="#"> <?=$users->name;?></a></td> is clicked. You have it inside a link which is the first step. next step is to put the username inside the href and redirect to another page. Using $_GETyou can retrieve the username from the url and search for users in your DB with the username. what i mean is...
//add the href to your code which will redirect to
//new page with url detailed_view.php?john doe
<td><a href="detailed_view.php?name='.$users->name.'"data="<?php echo 'page_'.$users->id?>"
class="model_form " href="#"> <?=$users->name;?></a></td>
create a file called detailed_view.php (can be any name but change it to match the href redirect)
on that file use
<?php
session_start();
include("config.php");
if(isset($_GET['name'])){
$username = $_GET['name'];
$query = "SELECT * FROM your_user_table_name WHERE name = '.$username.'";//your case table name is illt
$sql = $db->query($query);
while ($users = mysqli_fetch_object($sql)) {
echo $users->name','$users->id','$users->vlan','$users->popip;//and so on
}
}
?>

I want to display data from database.if we newly add a form data ,i want to append the new post on display without refresh using codeigniter

I have a show and hide div. That is an add form. I want to display all data from the table on the bottom of the form. If form is opened or not, the data must be displayed. When we add new post, that must append on the top of displayed data without refresh.
My view
<div class="slidingDiv" style="display:none">
<div class="row">
<div class="col-xs-12">
<div class="box box-primary">
<div class="box-header">
<h3 class="box-title">Add Requirement Item</h3>
</div><!-- /.box-header -->
<!-- form start -->
<?php echo validation_errors(); ?>
<?php
$attributes = array('id' => 'myForm');
echo form_open_multipart(base_url().'moderator/Requirement/add_employee_data',$attributes); ?>
<div class="box-body">
<div class="row">
<div class="col-xs-6">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="txttitle">Requirement Title (Product/Service) : </label>
</div>
<div class="col-xs-12">
<input type="text" name="txtService" class="form-control" id="txttitle" placeholder="Requirement Title (Product/Service) : " value="" required>
</div>
</div>
</div>
</diV>
<div class="col-xs-6">
<div class="form-group">
<div class="row">
<div class="col-xs-8">
<label for="txtquantity">Estimated Quantity : </label>
</div>
<div class="col-xs-4">
<label for="txtquantity"></label>
</div>
<div class="col-xs-8">
<input type="text" name="txtQuantity" class="form-control" id="txtquantity" placeholder="Estimated Quantity" value="
" required>
</div>
<div class="col-xs-4">
<select class="form-control" name="txtunit" required="required">
<option value="">----Select------</option>
<?php
foreach ($units as $name) {
echo ' <option value="' . $name->id . '">' . $name->name . '</option>';
}
?>
</select>
</div>
</div>
</div>
</diV>
<div class="col-xs-12">
<div class="form-group">
<div class="row">
<div class="col-xs-12">
<label for="txtdetails">Requirement Details : </label>
</div>
<div class="col-xs-12">
<textarea class="textarea" name="txtRequirement" placeholder="Requirement Details" id="txtdetails" style="width: 100%; height: 200px; font-size: 14px; line-height: 18px; border: 1px solid #dddddd; padding: 10px;">
</textarea>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<div class="form-group">
<div class="row">
<div class="col-xs-6">
<label for="sbUser">Expiry of Requirement : </label><br>
<div class="input-group">
<div class="input-group-addon">
<i class="fa fa-calendar"></i>
</div>
<input id="thedate" type="text" name="txtBidclosing" class="form-control" required="required"/>
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.box-body -->
<div class="box-footer">
<input type="button" class="button" value="submit" />
</form>
</div>
</div>
</div>
</div>
<div id="sort">
<br>
</div>
Ajax code
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type:"POST",
url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
data:$("#myForm").serialize(),
success: function (dataCheck) {
//alert(dataCheck);
$('#sort').append(dataCheck);
//window.location.reload();},
});});});
</script>
Model
public function add_employee_data($data){
$this->db->insert('jil_requirementdetail',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('jil_requirementdetail');
$this->db->where('rqmd_id',$id);
$result = $this->db->get()->result();
return $result;
}

On your model
public function add_employee_data($data){
$this->db->insert('jil_requirementdetail',$data);
$id = $this->db->insert_id();
$this->db->select('*');
$this->db->from('jil_requirementdetail');
// $this->db->where('rqmd_id',$id); // get all data
$this->db->order_by('rqmd_id','DESC');
$result = $this->db->get();
if($result->num_row() > 0)
{
echo json_encode(['status'=>'pass','data'=>$result->result()];
}else{
echo json_encode(['status'=>'fail']);
}
}
On Ajax Success
<script>
$(document).ready(function(){
$(".button").click(function(){
$.ajax({
type: "POST",
url: "<?php echo base_url() ?>moderator/Requirement/add_employee_data",
data: $("#myForm").serialize(),
success: function(dataCheck){
//alert(dataCheck);
var res = JSON.parse(dataCheck);
if(res.status=='pass')
{
var user_data = res.data;
var html = '';
var length = user_data.length;
for(var i = 0; i < length; i++)
{
//your html
html += '<div>' + user_data[i].name + '</div>'; //add your html structure as you want
}
$('#sort').append(html);
},
}
});
});
});
</script>

how to insert datedropdown value in to database

Here is some code i need ur help on, in this code the input form do have a name so that i can store the value of the input form to the database and fetch it to post to another page but those textfield with the script do not recognized, it call them undefined variable but if the textfield it self is apeared without the script it works just by removing the script.but i want to use that plugin by the script n i want u to help me with why do the name variable cant be recognized wn i add that script it works fine w/out it.
<?php $active = "";?>
<?php
include 'includes/header.php';
include 'includes/event_functions.php';
?>
<?php
if (isset($_GET['id'])) {
$event = get_event_by_id($_GET['id']);
if ($event != null) {
?>
<div class="container">
<div class="clearfix" style="margin-top:20%;"> </div>
<h1 style="color:#808080;text-align:center;"> Registering new event in afrisol </h1>
<form method="post" action="updateevent.php" style = "margin-bottom:3%;" enctype="multipart/form-data">
<div class="col-md-12">
<div class="col-md-6">
<div class="form-group">
<label>
Event start date
</label>
</div>
<div class="col-md-8">
<div class="example">
<input type="date" name="sdate" id="example1">
</div>
</div>
</div>
<div>
<!-- date -->
<div class="col-md-6">
<div class="form-group">
<label>
Event end date
</label>
</div>
<div class="col-md-8">
<div class="example">
<input type="date" class = "form-control" name ="ldate" id="ldate" /></br></br>
</div>
</div>
</div class = "col-md-12">
<div class="col-md-6">
<div class="form-group">
<label>
Ticket start date
</label>
</div>
<div class="col-md-8">
<input value= "<?php echo $event->tsdate;?>" type="Date" class = "form-control" name ="tsdate" /></br></br>
</div>
</div>
<!-- ticket date -->
<div class="col-md-6">
<div class="form-group">
<label>
Ticket end date
</label>
</div>
<div class="col-md-8">
<input value= "<?php echo $event->tldate;?>" type="Date" class = "form-control" name ="tldate" /></br></br>
</div>
</div>
</div>
</div>
<div class="col-md-8">
<input type="submit" class = "form-control" name ="submit" value="update" />
</div>
<!-- <input value= type = "text" class = "form-control" name = "daterange" value="01/01/2015- 01/31/2015" /> -->
</div>
</form>
<?php }} ?>
</div>
<?php
include 'includes/footer.php';
?>
<script>
$(function() {
$("#example1").dateDropdowns();
// Set all hidden fields to type text for the demo
$('input[type="hidden"]').attr('type', 'Date').attr('readonly','readoniy');
});
</script>
<link href="js/Easy-Customizable-jQuery-Dropdown-Date-Picker-Plugin/demo/styles.css" rel="stylesheet">
<script src ="js/Easy-Customizable-jQuery-Dropdown-Date-Picker-Plugin/dist/jquery.date-dropdowns.js"></script>
in the other page 'updateevent.php' i have this source code in case...
<?php $active = "";?>
<?php
include 'includes/header.php';
include 'includes/util.php';
include 'includes/event_functions.php';
?>
<div style="margin-top:15%;"></div>
<?php
if (isset($_POST['id']) ){
// echo "string";
$id = $_POST['id'];
$title = $_POST['title'];
$ldesc = $_POST['ldesc'];
$desc = $_POST['desc'];
$allowComment = $_POST['allowComment'];
$level= $_POST['level'];
$eBy = $_POST['by'];
$country = $_POST['country'];
$region = $_POST['Region'];
$Town = $_POST['Town'];
$kebele = $_POST['Kebele'];
$Price = $_POST['price'];
$video = $_POST['video'];
$catagory = $_POST['catagory'];
$longtude = $_POST['Longtude'];
$lattitude = $_POST['lattitude'];
$sdate = $_POST['sdate'];
$edate = $_POST['ldate'];
$tsdate = $_POST['tsdate'];
$tedate = $_POST['tldate'];
$update = update_event( $id , $title, $ldesc, $desc, $allowComment,$level,$eBy,$country,$region,$Town,$kebele,$Price,$video,$catagory,$longtude,$lattitude,$sdate,$edate,$tsdate,$tedate );
//echo $fName.$mName.$lName.$gender.$email.$phone;
if ($update > -1) {
/* header("Location event_update_success.php?id=".$id);*/
$event = get_event_by_id($update);
echo "<h1 style='color:green;text-align:center;'>you have updated successfully!!</h1>" ;
echo "<h2 style='color:green;text-align:center;'>with those contents...</h2>"
?>
<section id="blog" class="container">
<div class="center">
<h2> <?php echo $event->title; ?> </h2><hr/>
</div>
<div class="blog">
<div class="row">
<div class="col-md-2" style="width:230px;">
<div class="blog-item">
<div class="row">
<div class="col-md-12" style="text-align:center;background:rgba(255,255,255,0.5);border=1px solid;border-radius:10px">
<h2>About This Event </h2>
<img src="<?php echo $event->image; ?>" style="height:250px;" class="img-responsive">
<div class="col-xs-12 col-sm-12 text-center" style="border:1px solid #999;background:rgba(0,0,0,0.1);border-radius:10px;margin-top:10px;">
<div class="entry-meta">
<h3>Event By <b>Afrisol Events </b> </h3>
<div id="publish_date" style="text-align:left;padding:8px "><div><i class="fa fa-user"></i> posted by:-<p style="text-align:right;"><?php echo $event->by;?></p> </div></div>
***<span style="text-align:left;">
<h2 style="text-decoration:underline;"> Event Dates</h2>
<h3 style="color:#333;">Event Start Date:
</h3><b><?php echo $event->sdate ;?></b>
<h3 style="color:#333;">Event End Date:
</h3> <b><?php echo $event->ldate ;?></b>
<li>Ticket Start Date:
<b><?php echo $event->tsdate ;?></b></li>
<li> Ticket End Date:
<b><?php echo $event->tldate ;?></b></li>-->***
</span>
<span style="text-align:left;"><h3>Event For:</h3><b><?php echo $event->level; ?> Membership</b></span>
<span style="text-align:left;"><h3>Event Catagory : </h3><b><?php echo $event->catagory; ?> </b></span>
<span style="text-align:left;"><h2 style="text-decoration:underline;">Location</h2>
<h3>Country:</h3>
<b><?php echo $event->country ;?></b>
<h3>Region:</h3>
<b><?php echo $event->Region ;?></b>
<h3>City:</h3>
<b><?php echo $event->Town ;?></b></span>
<!-- <span><i class="fa fa-heart"></i>56 Likes</span> -->
</div></div>
<span style="text-align:left;"><h3>Map of Event Place</h3></span>
<iframe class="actAsDiv" width="100%" height="200" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&q=<?php echo $event->lattitude?>%2C%20<?php echo $event->longtude?>&aq=0&ie=UTF8&t=h&z=16&iwloc=A&output=embed"></iframe>
</div>
</div>
</div><!--/.blog-item-->
</div><!--/.col-md-8-->
<div class="col-md-7" style="margin-left: 10px;background:rgba(255,255,255,0.7);border=1px solid;border-radius:10px">
<div style="padding:10px 0px;"><img style="height:300px;width:100%;" src="<?php echo $event->image; ?>" class="img-responsive"></div>
<div> <?php echo $event->desc;?></div>
<!--<img src="uploads\profile\upload3470digitalManufacturing.jpg" > -->
</div>
<aside class="col-md-1" style="width:230px;margin-left: 10px;background-color:#fafafa;height:100%;">
<div class="col-md-12" style="margin:5px 0px;">
<div>
<h2 style="text-align:center;"> AFrisol Events Advertizing Portion </h2>
<img src="images/at-Afrisol.gif" class="img-responsive" ></div>
</div>
<div class="col-md-12" style="margin:5px 0px;">
<div>
<h2 style="text-align:center;"> Fasion Design Cotest Adama 2008 </h2>
<img src="images/news/10X20_youthopia_Adama1.jpg" class="img-responsive" >
</div>
</div>
</aside>
</div><!--/.row-->
</div><!--/.blog-->
</section><!--/#blog-->
<?php }
else{
echo "<h2> Something Must went wrong </h2>";
}
}
// $passportNum = $_POST['passportNum'];
// $level = $_POST['level'];
?>
<?php
include 'includes/footer.php';
?>

so to answer your question completely, possible things could be.
add name attribute to element
add form tag, if you posting data normally
or add ajax code to submit the form and add it to some variable so that it is available to server side script.
in case needed help please let me know.
Thanks
Amit