PHP & Jquery - Set row status as approved/pending via modal - javascript

My status column should read Approved or Pending per user row. Upon click of edit button, at bottom of modal should say current status and Yes/No radio buttons to keep as is or change status, and have that reflected in the table.
Right now it's only setting to Pending in the modal upon selecting No, and I need the same logic but upon click of Yes for Approved. Help!
PHP Function:n
public function approve(){
$id = $this->input->get("user_id");
$this->db->where("id", $id);
$data = [
"approved" => 1
];
if (isset($data['approved']) && $data['approved'] == 1) {
$this->db->update("User_Inputs", $data);
redirect("/myform/getdatabase");
}
else {
echo 0;
}
HTML/JQuery:
<html>
<head>
<title>Admin View</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body background=http://wallpapercave.com/wp/ItmVuT6.jpg>
<!-- container with table headers / user records / edit function / approve function -->
<div class="container">
<table class="table table-hover table-striped">
<center>
<thead>
<tr style="font-size: 24; color: white;">
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Status</th>
<th colspan="1">Action</th>
</tr>
</thead>
</center>
<tbody style="background-color: #F0F8FF">
<?php
foreach($users as $u)
{
?>
<tr style="font-size: 20;" id="row<?= $u->id?>">
<td width="5%;"> <?php echo $u->id; ?></td>
<td><?php echo $u->first_name; ?></td>
<td><?php echo $u->last_name; ?></td>
<td><?php echo $u->email; ?></td>
<td><?php echo ($u->approved) ? "Approved" : "Pending"; ?></td>
<!--edit button-->
<td><button type="button" data-id="<?= $u->id ?>" data-first_name="<?= $u->first_name ?>" data-last_name="<?= $u->last_name ?>" data-email="<?= $u->email ?>" data-approved="<?= $u->approved ?>" onclick="loadmodal(this)"><span class='glyphicon glyphicon-edit'></span></button></td>
<!--approve button
<td><span class="glyphicon glyphicon-ok gi-15x" style='color: green'></span></td>-->
</tr>
<?php } ?>
</tbody>
</table>
<!--modal-->
<script type="text/javascript">
function loadmodal(button){
var first_name = $(button).data("first_name");
var last_name = $(button).data("last_name");
var email = $(button).data("email");
var id = $(button).data("id");
var status = $(button).data("approved");
/* pass values to modal */
$("#m_id").val(id);
$("#m_first_name").val(first_name);
$("#m_last_name").val(last_name);
$("#m_email").val(email);
$("#m_approved").val(status);
$("input[name=r1]:checked").val()
$("input[name=r2]:checked").val()
$("#myModalLabel").text("Entry for User ID: " + id);
$("#editModal").modal("show");
$("#formdata").submit(function(e){
e.preventDefault();
var data = $(this).serialize();
$.post("/ci/index.php/myform/edituser", data, function(html){
console.log(html);
var response = $.parseJSON(html);
console.log(response);
if (response.status == 'success'){
$("#row"+id).html(response.html);
$("#editModal").modal("hide");
} else {
console.log('Error updating user');
$("#editModal").modal("hide");
}
});
});
function approveRadio(){
if (document.getElementsByID('r1').checked) {
rate_value = document.getElementsByID
}
var choice = document.getElementsByName('choice').value;
}
}
</script>
<div class='modal fade' id='editModal' tabindex='-1' role='dialog' aria-labelledby='myModalLabel'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<h3 class="modal-title" id='myModalLabel'></h3>
<button type='button' class='close' data-dismiss='modal' aria-label="Close"><span class='glyphicon glyphicon-remove'></span></button>
</div>
<!--modal body-->
<div class='modal-body'>
<form id="formdata">
<input type="hidden" id="m_id" name="id" value="">
<div class='form-group'>
<label class='control-label' for='First Name'>First Name</label>
<input type='text' id="m_first_name" name='first_name' class='form-control'
value=""><br/>
</div>
<div class='form-group'>
<label class='control-label' for='Last Name'>Last Name</label>
<input type='text' id="m_last_name" name='last_name' class='form-control' value=""/><br/>
</div>
<div class='form-group'>
<label class='control-label' for='Last Name'>Email</label>
<input type='text' id="m_email" name='email' class='form-control' value=""/><br/>
</div>
<div class='form-group'>
<label class='control-label' for='Approved'>Is user approved? Current status:</label><br>
<input type="radio" id="r1" name="approved" value="1"> Yes
<input type="radio" id="r2" name="approved" value="0"> No
<!--m<input type="text" id="m_approved" name="status" class='form-control' value="">-->
</div>
<button type='submit' class='btn btn-success'>Update Entry</button>
</form>
</div>
</div>
</div>
</div>
</body>
</html>

Related

Get data attribute from an array of select box

I have an account form in which the all account are being pulled from my mysql database into a dropdown menu. The user selects the account from the dropdown menu then the account code field is automatically populated via the data-acc attribute. I have added a button to add more account.
It works at first set of input and select box, but not in the next one
sample screenshot
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('select[name="account_name[]').change(function()
{
$('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
});
</script>
<script>
$(document).ready(function(){
var i=1;
var chart_add = '<tr id="row_chart'+i+'"><td align="center"> <input type="text" name="account_code[]" class="form-control account_num" readonly></td><td><select class="form-control selectpicker" data-live-search="true" name="account_name[]" required> <option></option><?php $account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");while($acc = mysqli_fetch_assoc($account)){$account_no = $acc['acoount_no'];$account_title = $acc['account_title'];?><option value="<?php echo $account_title; ?>" data-price="<?php echo $account_no; ?>"><?php echo $account_title ; ?> </option><?php } ?></select></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart"><i class="fa fa-minus"></i></button></td></tr>';
$('#add').click(function(){
i++;
$('#dynamic_field').append(chart_add);
$('.selectpicker').selectpicker('render');
});
$(document).on('click', '.remove_chart', function(){
var button_id = $(this).attr("id");
$('#row_chart'+button_id+'').remove();
});
});
</script>
<div class="row">
<div class="col-md-12">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Report Per Office</h3>
</div>
<div class="box-body">
<div class="col-md-12">
<h4>Project Procurement Management Plan (PPMP) <hr >
</div>
<div class="col-md-1">
Office:
</div>
<div class="col-md-4">
<select class="selectpicker" data-live-search="true" name="office_from" data-width="auto" required >
<option>--Select Reponsible Office--</option>
<?php
$q = "SELECT * FROM `office_code_dept`";
$r = mysqli_query($conn,$q);
while($row = mysqli_fetch_assoc($r)){
$off_desc = $row['off_name'];
?>
<option value="<?php echo $off_desc;?>"><?php echo $off_desc; ?></option>
<?php
}
?>
</select>
</div>
<div class="col-md-1">Year:</div>
<div class="col-md-4"><input type="number" min="1990" max="3000" name="tax_year" class="form-control" style="text-align: center;" value="<?php echo date('Y'); ?>"></div>
<div class="col-md-2"><input type="submit" name="search" value="Search" class="btn btn-primary btn-block">
</div>
<div class="col-md-12"><br></div>
</h4>
<table class="table table-bordered" id="dynamic_field">
<thead>
<tr>
<th width="7%" rowspan="2" style="text-align: center;">Code</th>
<th width="27%" rowspan="2" style="text-align: center;">General Description</th>
<th rowspan="2" width="5%"><button type="button" name="add" id="add" class="btn btn-success"><i class="fa fa-plus"></i></button></th>
</tr>
</thead>
<tbody>
<tr>
<td align="center">
<input type="text" name="account_code[]" class="form-control account_num" readonly>
</td>
<td>
<select class="form-control selectpicker" data-live-search="true" name="account_name[]" required>
<option></option>
<?php
$account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");
while($acc = mysqli_fetch_assoc($account)){
$account_no = $acc['acoount_no'];
$account_title = $acc['account_title'];
?>
<option value="<?php echo $account_title; ?>" data-acc="<?php echo $account_no; ?>">
<?php echo $account_title ; ?>
</option>
<?php } ?>
</select>
</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
your .change function is not bound to the new input and select box
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$('select[name="account_name[]').change(function()
{
$('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
});
</script>
<script>
$(document).ready(function(){
var i=1;
var chart_add = '<tr id="row_chart'+i+'"><td align="center"> <input type="text" name="account_code[]" class="form-control account_num" readonly></td><td><select class="form-control selectpicker" data-live-search="true" name="account_name[]" required> <option></option><?php $account = mysqli_query($conn,"SELECT chart_of_account.acoount_no, chart_of_account.account_title from chart_of_account inner join account_group_tbl on chart_of_account.account_group = account_group_tbl.account_name where account_group_tbl.account_type = 'Expense'");while($acc = mysqli_fetch_assoc($account)){$account_no = $acc['acoount_no'];$account_title = $acc['account_title'];?><option value="<?php echo $account_title; ?>" data-price="<?php echo $account_no; ?>"><?php echo $account_title ; ?> </option><?php } ?></select></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart"><i class="fa fa-minus"></i></button></td></tr>';
$('#add').click(function(){
i++;
$('#dynamic_field').append(chart_add);
$('.selectpicker').selectpicker('render');
$('select[name="account_name[]').change(function()
{
$('.account_num').val($('select[name="account_name[]"] option:selected').data('acc'));
});
});
$(document).on('click', '.remove_chart', function(){
var button_id = $(this).attr("id");
$('#row_chart'+button_id+'').remove();
});
});
</script>
Something like this should work.

Get data-price attribute from dynamically added row and put inside the input box

how to get data-price inside the text box using select in php html and sql?
i tried this so far. what im trying to do is, when i change the selection box, the input box beside should change base on the value of data-price.
been trying this for a week.
e.g
select debit
local treasury 100
<script>
$(document).ready(function(){
var i=1;
var chart_add = '<tr id="row_chart'+i+'"><td><select name="chart_of_account[]" class="selectpicker" data-live-search="true"><option style="width: 400px;">--Select Chart of Account--</option><?php $chart=mysqli_query($conn,"Select acoount_no,account_title from chart_of_account"); while($row=mysqli_fetch_assoc($chart)){$account_no = $row["acoount_no"]; $account_title = $row["account_title"];?><option value="<?php echo $account_no; ?>" style="width: 400px;"><?php echo $account_no ." | ". $account_title; ?></option><?php }?></select></td><td><input type="text" name="chart_debit[]" class="form-control chart_debit" id="chart_debit"onchange="chart_change_debit()"></td><td><input type="text" name="chart_credit[]" class="form-control chart_credit" id="chart_credit" onchange="chart_change_credit()"></td><td><button type="button" name="remove_chart" id="'+i+'" class="btn btn-danger remove_chart">X</button></td></tr>';
$('#add').click(function(){
i++;
$('#dynamic_field').append(chart_add);
$('.selectpicker').selectpicker('render');
$('.chart_debit').val($('select[name="chart_of_account"] option:selected').data('price'));
});
$(document).on('click', '.remove_chart', function(){
var button_id = $(this).attr("id");
$('#row_chart'+button_id+'').remove();
});
});
</script>
<form method = "POST" name="add_name" id="add_name">
<div class="row">
<div class="col-md-12">
<!-- chart of account -->
<div class="row">
<div class="col-md-12">
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Chart of Account</h3>
</div>
<div class="box-body">
<table class="table table-bordered" id="dynamic_field">
<tr>
<th rowspan="2">Chart of Account</th>
<th>Debit</th>
<th>Credit</th>
<th rowspan="2"><button type="button" name="add" id="add" class="btn btn-success">Add More</button></th>
</tr>
<tr>
<th>
<input type="text" name="chart_debit_sum" class="form-control chart_debit_sum" id="chart_debit_sum" readonly>
</th>
<th>
<input type="text" name="chart_credit_sum" class="form-control chart_credit_sum" id="chart_credit_sum" readonly>
</th>
</tr>
<tr>
<td>
<select name="chart_of_account[]" class="selectpicker" data-live-search="true">
<option style="width: 400px;">--Select Chart of Account--</option>
<?php
$chart = mysqli_query($conn,"Select acoount_no,account_title from chart_of_account");
while($row = mysqli_fetch_assoc($chart)){
$account_no = $row['acoount_no'];
$account_title = $row['account_title'];
$amount = $row['test_amount'];
?>
<option value = "<?php echo $account_no; ?>" style="width: 400px;" data-price = "<?php echo $amount; ?>">
<?php echo $account_no . " | " .$account_title; ?>
</option>
<?php } ?>
</select>
</td>
<td>
<input type="text" name="chart_debit[]" class="form-control chart_debit" id="chart_debit" onchange="chart_change_debit()">
</td>
<td>
<input type="text" name="chart_credit[]" class="form-control chart_credit" id="chart_credit" onchange="chart_change_credit()">
</td>
<td></td>
</tr>
</table>
</div>
</div>
</div>
</div>
<!-- chart of account -->
</div>
<!-- chart and sub-->
</div>
</form>
sample screenshot

Ajax not working on multiple inserts - CI

I want to save multiple data in one go using codeigniter and then on success load the data on my datatable wihtout refreshing the whole page. I am able to do this successfully if I use modal and insert a single value but when I try to save multiple values, it doesn't work. I produce my input boxes on button click. Below are my codes:
CONTROLLER
public function add_multiple_orders(){
$dataset=[];
$item_name=$this->input->post('m_item_name');
$quantity=$this->input->post('m_quantity');
$amount=$this->input->post('m_amount');
$order_comment=$this->input->post('m_order_comment');
$branch_name=$this->input->post('m_branch_name');
$date_added=$this->input->post('m_date_added');
for($i=0;$i<sizeof($item_name);$i++){
$dataset[$i]=array(
'date_added'=>$date_added,
'item_name'=>$item_name[$i],
'quantity'=>$quantity[$i],
'amount'=>$amount[$i],
'ordered_by'=>$this->session->userdata['username'],
'order_status'=>'ordered',
'order_comment'=>$order_comment[$i],
'branch_name'=>$branch_name
);
}
$result=$this->sales_model->insert_mult_orders($dataset);
}
VIEW
<a name="mult_page">
<button class="btn btn-info" data-toggle="collapse" data-target="#add_multiple" style="margin-left: 20px;">Add Multiple Orders</button>
<div class="collapse" id="add_multiple" style="width: 95%; margin: 0 auto; margin-top: 10px;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-primary">
<div class="panel-heading">
</div>
<div class="panel-body">
<form class="form_mult_ordrs form-inline" method="post">
<div class="form-group">
<label for="m_date_added">Date</label>
<input type="date" name="m_date_added" required>
</div>
<div class="form-group">
<label for="m_branch_name" class="control-label">Branch Name</label>
<select name="m_branch_name" class="form-control">
<option value="superdome">Superdome</option>';
<option value="seaside">Sea Side</option>
<option value="robinsons">Robinsons</option>
</select>
</div>
<div class="btn btn-warning pull-right" onclick="add_new_row()">Add more</div>
<hr>
<div style="font-weight: bold;">Total Php <input type="text" id="total_result" placeholder="0.00" class="form-control"></div>
<br>
<table id="mult_ord_tbl" class="table table-striped table-bordered table-condensed">
<thead>
<tr>
<th class="ui-help-center">Item Name</th>
<th class="ui-help-center">Quantity</th>
<th class="ui-help-center">Amount</th>
<th class="ui-help-center">Comment</th>
<th class="ui-help-center">Delete</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select name="item_name[]" class="form-control">
<?php foreach($items as $item){
echo '<option value"='.$item->item_name.'">'.$item->item_name.'</option>';
} ?>
</select>
</td>
<td><input type="text" name="m_quantity[]" placeholder="Quantity"></td>
<td><input type="text" name="m_amount[]" id='m_amount[]' placeholder="Amount" onblur="total_values()"></td>
<td><input type="text" name="m_order_comment[]" placeholder="Commment"></td>
<td>
<button class="btn btn-danger" onclick="delete_row(this)"><i class="glyphicon glyphicon-remove"></i></button>
</td>
</tr>
</tbody>
</table>
<tr>
<td colspan="12">
<button id="btn_mult_ordrs" class="btn btn-success" onclick="save_mult_ordrs()" value="">Submit All</button>
</td>
</tr>
</form>
</div> <!-- end of panel body -->
<div class="panel-footer">
footer
</div>
</div> <!-- end of panel primary -->
</div> <!-- end of column 12 -->
</div> <!-- end of row -->
</div> <!-- end of collapse -->
<script type="text/javascript">
$(document).ready(function(){
$('#table_id').DataTable({
"order":[[0,"desc"]]
});
});
function save_mult_ordrs(){
if(confirm("Are you done?")){
var url="<?php echo site_url('sales/add_multiple_orders')?>";
add_new_row();
// $("#form_mult_ordrs").submit();
$.ajax({
url:url,
type:"POST",
data:$('#form_mult_ordrs').serialize(),
datatype:"JSON",
success:function(data)
{
alert('All data has been saved.');
location.reload();
},
error:function(jqXHR, textStatus, errorThrown){
alert('Error in saving.');
}
});
}
}
function add_new_row(){
var arrTables = document.getElementById('mult_ord_tbl');
var oRows = arrTables.rows;
var numRows = oRows.length;
var newRow = document.getElementById('mult_ord_tbl').insertRow( numRows );
var cell1=newRow.insertCell(0);
var cell2=newRow.insertCell(1);
var cell3=newRow.insertCell(2);
var cell4=newRow.insertCell(3);
var cell5=newRow.insertCell(4);
cell1.innerHTML = "<tr><td><select name='m_item_name[]' class='form-control'>" +
<?php
foreach($items as $item){
echo ('"<option value=\"'.$item->item_name.'\">'.$item->item_name.'</option>"+');
}
?>
+ "</select></td>";
cell2.innerHTML="<td height='5'><input type='text' name='m_quantity[]' placeholder='Quantity'></td>";
cell3.innerHTML="<td height='5'><input type='text' name='m_amount[]' placeholder='Amount' onblur='total_values()'></td>"
cell4.innerHTML="<td height='5'><input type='text' name='m_order_comment[]' placeholder='Comment'></td>";
cell5.innerHTML="<td><button class='btn btn-danger' onclick='delete_row(this)''><i class='glyphicon glyphicon-remove'></i></button></td></tr>";
}
</script>
MODEL
public function insert_mult_orders($data){
$this->db->insert_batch('piercapitan.sls_ordrs',$data);
return $this->db->affected_rows();
}
Your help is immensely appreciated.
Never mind guys. I found what's wrong. It's my form id! I somehow placed the name on the class and not on the id.
<form class="form_mult_ordrs form-inline" method="post">
It should have been:
<form id="form_mult_ordrs" class="form-inline" method="post">

How to Create a Shopping Cart using Session in PHP

I'm having trouble creating a shopping cart. How do I make the output so that when I click the add cart button on my products table, it will appear on the cart?
//Product List
<?php
$query = "SELECT * FROM products";
$exec = mysqli_query($connection, $query);
while ($row = mysqli_fetch_array($exec)) {
$product_id = $row['product_id'];
$product_name = $row['product_name'];
$product_quantity = $row['quantity'];
$product_price = $row['sell_price'];
?>
<tr>
<td class="text-center"><?php echo $product_id; ?></td>
<td><?php echo $product_name; ?></td>
<td><?php echo $product_price; ?></td>
<td><?php echo $product_quantity; ?></td>
<td class="text-center">
<div class="btn-group">
<a href="add_sales.php?action=add&product_id=<?php echo $product_id; ?>" class="btn btn-xs btn-info" data-toggle="tooltip" title="Select">
<span class="fa fa-shopping-cart"></span>
</a>
</div>
</td>
</tr>
<?php } ?>
Item Details Panel
if (isset($_GET['product_id'])) {
$prod_id = $_GET['product_id'];
$selectProd = "SELECT * FROM products WHERE product_id = $prod_id";
$execProd = mysqli_query($connection, $selectProd);
while ($row = mysqli_fetch_array($execProd)) {
$prod_name = $row['product_name'];
$prod_price = $row['sell_price'];
$quantity = $row['quantity'];
?>
<div class="panel-body">
<div class="col-md-2">
<div class="form-group">
<label for="">Item ID</label>
<input type="text" class="form-control" value="<?php echo $prod_id; ?>" readonly>
</div>
</div>
<div class="col-md-7">
<div class="form-group">
<label for="">Item Name</label>
<input type="text" class="form-control" value="<?php echo $prod_name ?>" readonly>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Unit Price</label>
<input type="text" class="form-control" value="<?php echo $prod_price; ?>" readonly id="unitPrice">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="">Available Qty</label>
<input type="text" class="form-control" value="<?php echo $quantity ?>" readonly>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="">Sale Qty</label>
<input type="number" class="form-control" id="saleQty" name="saleQty">
</div>
</div>
<div class="col-md-5">
<div class="form-group">
<label for="">Total Amount</label>
<input type="text" class="form-control" id="totalSale" name="saleTotal" readonly>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<input type="submit" value="Add to Cart" class="btn btn-info form-control" formnovalidate>
</div>
</div>
Cart
<!-- Start of Customer's Cart -->
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading">
<strong>
<span class="fa fa-shopping-cart"></span>
<span>Customer's Cart</span>
</strong>
</div>
<div class="panel-body">
<table class="table table-hover">
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Quantity</th>
<th>Product Amount</th>
<th>Total Amount</th>
<th>Remove</th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- End of Customer Cart -->
Ordering Page Flow (GIF)
None of your input element have name attributes so (I think) when you submit the form, the URL query parameters (if the form has GET method) or the request body parameters (POST method) won't be available and you can't "catch" the act of someone submitting the order. If you add them and handle the form submission (say by ifing on a isset($_POST['order']) you can INSERT the order into the DB and render the cart from the DB table. Also look into http://php.net/manual/en/mysqli.prepare.php to avoid SQL injection.

Search result on click of button in popup

I want to display search result on click of button, but my code is giving me the search result without click on button.
I think it's giving me the query result not the search result.
This code is working fine when I display the result on the page, but as per my requirement I want to display the search result on a popup.
I have used jquery popup.
<body><form action="#" method="POST"><body><form action="#" method="POST"><div data-role="page">
<div data-role="main" class="ui-content" >
Smart Search
</div>
<div data-role="popup" id="a" class="col-sm-6 ui-content">
<div class="input-group col-sm-8">
<input type="text" name="query" class="form-control" placeholder="Search Products to Buy..." " />
<span class="input-group-btn">
<button name ="search_btn" id ="search class="btn btn-warning" type="submit" value="Search" style="background-color:orange;">Search</button>
</span>
</div><div class="input-group col-sm-8 " ><table class="table table-hover">
<thead >
<tr bgcolor="#1E90FF">
<th>Products</th>
<th>Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
</div><?php
error_reporting(0);
mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
mysql_select_db("wordpress") or die(mysql_error());
?><?php $query = $_POST['query']; $query = htmlspecialchars($query);
$query = mysql_real_escape_string($query);
$raw_results=mysql_query("select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$query."%'") or die(mysql_error());
if(mysql_num_rows($raw_results) > 0)
{
while($results = mysql_fetch_array($raw_results))
{ ?><div class="input-group col-sm-8" style="text-align:center;margin-top:10px;"><tbody>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:70px;width:100px;" /></td>
<td><?php echo "<p>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:40px;width:120px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td>Buy now</td>
</tr>
</tbody>
</div>
<?php
}
}
else
{ // if there is no matching rows do following
echo "No results";
}
?>
</div>
</form>
</div>
This will give you search results in modal popup. I have changed your code around a bit. You can popup in case of no search results too.
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="main" class="ui-content" >
Smart Search
</div>
<div data-role="popup" id="a" class="col-sm-6 ui-content">
<div class="input-group col-sm-8">
<form method="POST">
<input type="text" name="query" class="form-control" placeholder="Search Products to Buy..." " />
<span class="input-group-btn">
<button name ="search_btn" id ="search" class="btn btn-warning" type="submit" value="Search" style="background-color:orange;">Search</button>
</span>
</form>
</div>
<?php
if(isset($_POST['query']) && $_POST['query']!="" ) {
error_reporting(0);
mysql_connect("localhost", "root", "") or die("Error connecting to database: ".mysql_error());
mysql_select_db("wordpress") or die(mysql_error());
$query = $_POST['query']; $query = htmlspecialchars($query);
$query = mysql_real_escape_string($query);
$raw_results=mysql_query("select feed_product_image,feed_product_name,price,deeplink,image from wp_pc_products_merchants e,wp_pc_products w where e.slug=w.id_merchant and feed_product_name LIKE '%".$query."%'") or die(mysql_error());
if(mysql_num_rows($raw_results) > 0)
{
?>
<div class="input-group col-sm-8 modal-box" id="popup" title="Search Results" style="text-align:center;margin-top:10px;">
<table class="table table-hover">
<thead >
<tr bgcolor="#1E90FF">
<th>Products</th>
<th>Details</th>
<th>Retailers</th>
<th>Price</th>
<th>Buy</th>
</tr>
</thead>
<tbody>
<?php
while($results = mysql_fetch_array($raw_results))
{ ?>
<tr>
<td><img src = "<?php echo $results['feed_product_image']; ?>" style="object-fit:contain;height:70px;width:100px;" /></td>
<td><?php echo "<p>".$results['feed_product_name']. "</p>" ; ?></td>
<td><img src = "<?php echo $results['image']; ?>" style="background-size:contain;height:40px;width:120px;" /></td>
<td><?php echo '<i class="fa fa-inr"> '.$results['price']. '</i>'.".00" ; ?></td>
<td>Buy now</td>
</tr>
<?php
}
?>
</tbody>
</table>
</div>
<?php
}
else
{ // if there is no matching rows do following
echo "No results";
}
}
?>
</div>
</form>
</div>
<script>
$(function() {
$( "#popup" ).dialog();
});
</script>

Categories