How to Create a Shopping Cart using Session in PHP - javascript

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.

Related

Javascript inside PHP foreach

I made a loop using foreach, to show a list of products. Then I made a modal to edit each product. I need to get the value of product dimension and I'll make a dependent drop down between 'job drop down' and 'supply drop down'. At the moment, I can't continue it with Ajax because I got a problem at the first step to get value of dimension. In this code below I tried to get 'length' value of each product through javascript. But it returns the same value, it always is the value of the first product, even if I click on the 2nd, 3rd, 4th of product in the list.
<div class="table-responsive">
<table class="table table-hover" id="dataTable" width="100%" cellspacing="0">
<thead>
<tr>
<th>Product</th>
<th>Supplier</th>
<th>Dimension</th>
<th>Edit</th>
</tr>
</thead>
<tbody>
<?php
$pcs_1 = 0;
$meter_1 = 0;
foreach ($stock as $s) { ?>
<tr>
<td class="small">
<?php echo $s->cat . ' - ' . $s->prod ?>
</td>
<td class="small">
<?php echo $s->spl ?>
</td>
<td class="small">
<?php echo $s->length . ' x ' . $s->width . ' x ' . $s->height . ' x ' . $s->diameter ?>
</td>
<td>
<a type="button" data-toggle="modal" class="btn btn-small" data-target="#modal_edit<?php echo $s->id ?>"><i class="fas fa-edit"></i></a>
<!--MODAL-->
<div class="modal fade" id="modal_edit<?php echo $s->id ?>" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<form class="form-horizontal" method="post" action="<?php echo site_url('admin/Stock/edit/') ?>">
<div class="modal-header">
<h5 class="modal-title" id="labelModal">EDIT STOCK</h5>
</div>
<div class="modal-body">
<input type="hidden" id="length_product" class="length_product" value="<?php echo $s->length ?>" />
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<?php echo form_label('JOB') ?>
</div>
</div>
<div class="col-sm-9">
<div class="form-group">
<select name="ref" id="ref" class="form-control" required onchange="GetData()">
<option value="">-- Select Job --</option>
<?php foreach ($job as $j) : ?>
<option value="<?php echo $j->id; ?>"><?php echo $j->id ?> - <?php echo $j->cust ?></option>
<?php endforeach; ?>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-3">
<div class="form-group">
<?php echo form_label('Supply') ?>
</div>
</div>
<div class="col-sm-9">
<select name="supply" id="supply" class="form-control" required>
<option value="">--Select Supply--</option>
</select>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-warning submitBtn">edit</button>
</div>
</form>
</div>
</div>
</div> <!-- modal -->
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
Here is the javascript :
<script type="text/javascript">
function GetData() {
var length_product = $("#length_product").val();
alert(length_product);
}
</script>
The list works well, but I don't know how to get the detail of each list on javascript (passing multiple values from 'modal inside the list' to 'Javascript').

for me it looks like that you are always getting value of
<input type="hidden" id="length_product" class="length_product" value="<?php echo $s->length ?>" />
rather than option from the select element.
Try the following:
$('#ref').on('change', function(event) {
event.preventDefault();
var length_product = $(this).val();
alert(length_product);
});
and for the PHP and HTML:
<div class="form-group">
<select name="ref" id="ref" class="form-control" required>
<option value="">-- Select Job --</option>
<?php foreach ($job as $j) { ?>
<option value="<?php echo $j["id"]; ?>"><?php echo $j["id"]; ?>-<?php echo $j["cust"]; ?></option>
<?php
}
?>
</select>
</div>
Hope this helps!

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

How to use the value of a textbox in query?

How can I use properly the value of my textbox (ORDER_ID) in my query? What happening right now is, its need to click a button first in ordermodal.php in order to get the value of it, it didn;t get the value when I click the View Order. The output should be like this, when I click the View Order its getting already the value of it. I hope you can help me with my problem, I stucked at this. Thanks!
This is my code for order.php . This is where I click the View Order.
<tr>
<td><?= $order['order_id'] ?></td>
<td><?= $order['user_id'] ?></td>
<td><?= $date ?></td>
<td><?= $time ?></td>
<td><?= $order['order_deliveryCharge'] ?></td>
<td><?= $order['order_totalAmount'] ?></td>
<td><?= $order['address'] ?></td>
<td><?= $order['coordinates'] ?></td>
<td><?= $order['driver_number'] ?></td>
<td><?= $order['order_status'] ?></td>
<td><button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" onclick="viewOrder( '<?= $order['order_id'] ?>', '<?= $order['order_id'] ?>', '<?= $order['user_id'] ?>', '<?= $date ?>', '<?= $time ?>', '<?= $order['order_deliveryCharge'] ?>', '<?= $order['order_totalAmount'] ?>', '<?= $order['address'] ?>', '<?= $order['coordinates'] ?>', '<?= $order['driver_number'] ?>', '<?= $order['order_status'] ?>')"> View Order </button>
</td>
</tr>
<?php endwhile; ?>
<?php endif; ?>
</tbody>
</table>
</div>
<div class="panel-footer">
</div>
</div>
</div>
<script>
function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
document.getElementById("titleModal").innerHTML = "Order Information";
document.getElementsByName("ORDER_ID")[0].setAttribute("value", order_id);
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementsByName("user_id")[0].setAttribute("value", user_id);
document.getElementsByName("order_date")[0].setAttribute("value", order_date);
document.getElementsByName("order_time")[0].setAttribute("value", order_time);
document.getElementsByName("order_deliveryCharge")[0].setAttribute("value", order_deliveryCharge);
document.getElementsByName("order_totalAmount")[0].setAttribute("value", order_totalAmount);
document.getElementsByName("address")[0].setAttribute("value", address);
document.getElementsByName("coordinates")[0].setAttribute("value", coordinates);
document.getElementsByName("drivers_number")[0].setAttribute("value", driver_number);
document.getElementsByName("order_status")[0].setAttribute("value", order_status);
document.getElementsByName("viewOrder")[0].setAttribute("name", "viewOrder");
}
</script>
This is my code for ordermodal.php .
<?php
include_once 'ordermodal2.php';
/** *ordermodal.php **/
$id = "";
$order_date = "";
$order_time = "";
$order_id = "";
$order_deliverCharge = "";
$order_status = "";
$order_totalAmount= "";
$coordinates = "";
$driver_number = "";
$address = "";
$food_name="";
$special_request="";
$quantity="";
$amount="";
$orders="";
?>
<!-- MODALS --> <!-- DETAILS -->
<div id="myModal" class="modal fade" role="dialog" style="z-index: 1400;">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form action="" method="post" class="form-horizontal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><center>×</button>
<h4 class="modal-title" id="titleModal">Order Information</h4>
</div>
<div class="modal-body">
<div class="form-group">
<label for="order_id" class="col-sm-2 control-label">Order ID</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="ORDER_ID" id="ORDER_ID" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="id" class="col-sm-2 control-label">User ID</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="user_id" id="user_id" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_date" class="col-sm-2 control-label">Order Date</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_date" id="order_date" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_time" class="col-sm-2 control-label">Order Time</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_time" id="order_time" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_deliverCharge" class="col-sm-2 control-label">Delivery Charge</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_deliveryCharge" id="order_deliveryCharge" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_totalAmount" class="col-sm-2 control-label">Total Amount</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_totalAmount" id="order_totalAmount" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="address" class="col-sm-2 control-label">Address</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="address" id="address" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="coordinates" class="col-sm-2 control-label">Coordinates</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="coordinates" id="coordinates" placeholder="" value="" required="required" maxlength="11" readonly>
</div>
</div>
<div class="form-group">
<label for="driver_number" class="col-sm-2 control-label">Driver Number</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="drivers_number" id="drivers_number" placeholder="" value="" required="required" readonly>
</div>
</div>
<div class="form-group">
<label for="order_status" class="col-sm-2 control-label">Order Status</label>
<div class="col-lg-3">
<input type="text" input style="width:500px" class="form-control" name="order_status" id="order_status" placeholder="" value="" required="required" readonly>
</div>
</div>
<?php
$order_id = trim(addslashes($_POST['ORDER_ID']));
$sql = "SELECT food_name, special_request, quantity, amount
FROM cart_tbl
WHERE order_id=$order_id";
$result = mysqli_query(connection2(), $sql);
?>
<table class="table table-hover table-bordered">
<thead>
<tr>
<th>Food</th>
<th>Special Request</th>
<th>Quantity</th>
<th>Amount</th>
</tr>
</thead>
<?php
if(mysqli_num_rows($result)>0)
{
while($row = mysqli_fetch_array($result))
{
?>
<tr>
<td><?php echo $row["food_name"];?></td>
<td><?php echo $row["special_request"];?></td>
<td><?php echo $row["quantity"];?></td>
<td><?php echo $row["amount"];?></td>
</tr>
<?php
}
}
?>
</table>
</div>
<div class="modal-footer">
<button type="submit" input style="background-color:#00000;color:white;float:left" name="showfood" id="showFood" class="btn btn-primary " onclick="if(!confirm('Are you sure you want to see food order?')){return false;}" > Show Food </button>
<button type="submit" input style="background-color:#4CAF50;color:white" name="submitDelivered" id="submitDelivered" class="btn btn-primary " onclick="if(!confirm('Are you sure you want to deliver order?')){return false;}" > Delivered </button>
<button type="submit" input style="background-color:#0000FF;color:white" name="submitAccept" id="submitAccept" class="btn btn-primary" onclick="if(!confirm('Are you sure you want to accept order?')){return false;}" > Accept </button>
<button type="button" style="background-color:#FFFF00;color:black" class="btn btn-success" data-toggle="modal" data-target="#myDropdown" onclick="send('<?= $_POST['order_id'] ?>')"> Send </button>
<button type="submit" input style="background-color:#f44336;color:white" name="submitCancel" class="btn btn-danger" onclick="if(!confirm('Are you sure you want to cancel order?')){return false;}">Cancel</button>
<?php
if(isset($_POST['submitDelivered'])){
$order_id = trim(addslashes($_POST['ORDER_ID']));
$query = "UPDATE order_tbl SET `order_status`='Delivered' WHERE `order_id` = $order_id";
if (mysqli_query(connection2(), $query)) {
mysqli_query(connection2(), "COMMIT");
$_SESSION['message'] = "Order Delivered"; }
else {
$_SESSION['message'] = mysqli_error(connection2());
mysqli_query(connection2(), "ROLLBACK");
}
}
if(isset($_POST['submitAccept'])){
$order_id = trim(addslashes($_POST['ORDER_ID']));
$query = "UPDATE order_tbl SET `order_status`='Accepted' WHERE `order_id` = $order_id";
if (mysqli_query(connection2(), $query)) {
mysqli_query(connection2(), "COMMIT");
$_SESSION['message'] = "Order Accepted"; }
else {
$_SESSION['message'] = mysqli_error(connection2());
mysqli_query(connection2(), "ROLLBACK");
}
}
if(isset($_POST['submitCancel'])){
$order_id = trim(addslashes($_POST['ORDER_ID']));
$query = "UPDATE order_tbl SET `order_status`='Cancelled' WHERE `order_id` = $order_id";
if (mysqli_query(connection2(), $query)) {
mysqli_query(connection2(), "COMMIT");
$_SESSION['message'] = "Order Cancelled"; }
else {
$_SESSION['message'] = mysqli_error(connection2());
mysqli_query(connection2(), "ROLLBACK");
}
}
?>
</div>
</form>
</div>
</div>
</div>
<script>
function send(order_id) {
document.getElementById("titleModal2").innerHTML = "Choose Driver";
document.getElementsByName("ORDER_ID_MODAL_2")[0].setAttribute("value", order_id);
document.getElementsByName("send")[0].setAttribute("name", "send");
}
</script>

It would be nice if you use jquery.
//Change your button 'View Order' with this
<button type="button" class="btn btn-success" onclick="viewOrder( '<?= $order['order_id'] ?>', '<?= $order['order_id'] ?>', '<?= $order['user_id'] ?>', '<?= $date ?>', '<?= $time ?>', '<?= $order['order_deliveryCharge'] ?>', '<?= $order['order_totalAmount'] ?>', '<?= $order['address'] ?>', '<?= $order['coordinates'] ?>', '<?= $order['driver_number'] ?>', '<?= $order['order_status'] ?>')"> View Order </button>
//place this script below this function
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
function viewOrder(order_id, order_id, user_id, order_date, order_time, order_deliveryCharge, order_totalAmount, address, coordinates, driver_number, order_status) {
$('#titleModal').text("Order Information")
$("#ORDER_ID").val(order_id);
$("#ORDER_ID_MODAL_2").val(order_id);
$("#user_id").val(user_id);
$("#order_date").val(order_date);
$("#order_time").val(order_time);
$("#order_deliveryCharge").val(order_deliveryCharge);
$("#order_totalAmount").val(order_totalAmount);
$("#address").val(address);
$("#coordinates").val(coordinates);
$("#drivers_number").val(driver_number);
$("#order_status").val(order_status);
$("#viewOrder").attr("name", "viewOrder");
$('#myModal').modal('show');
}

How to get the name of the td to use in the modal window

I make a table, in each row there is a button, when I click it, it show a modal-window, the idea is show the values of the row in modal-window.
At moment:
Get a row(tr) of the table, this is ok!
Get values of the cell(td), this is ok!
Get attrib name of the cell(td) ;)
Please Could you help me to get the name of the cells?
Code:
$('#edit').on('show.bs.modal', function (event) {
var $button = $(event.relatedTarget) // Button that triggered the modal
var row = $button.closest("tr"), // edit button is in the same row as data you want to change
$tds = row.find("td"); // get all table cells in that row
$.each($tds, function(index,value) {
var input_name = $(this).attr("name"); // get name of cell we are evaluating (pagina, codigo, descripcion etc)
alert(input_name);
$([name='"' + input_name + '"']).val($(this).text()); //input name in the modal window
});
});
<table class='table-bordered' id='tableprod'
data-toggle='table'
data-toolbar='#toolbar'
data-show-refresh='true'
data-show-toggle='true'
data-sort-name='name'
data-sort-order='desc'
data-show-columns='true'
data-pagination='true'
data-search='true'>
<thead class='thead-inverse'>
<tr>
<th data-field='seleccion' data-switchable='false' data-checkbox='true'></th>
<th data-field='estado' data-switchable='false'></th>
<th data-field='edicion' data-sortable='true' data-visible='false'>EDICIÓ</th>
<th data-field='pagina' data-sortable='true'>PÀGINA</th>
<th data-field='codigo' data-sortable='true' data-switchable='false'>CODI</th>
<th data-field='image' data-switchable='false'>IMATGE</th>
<th data-field='descripcion-cat' data-sortable='true'>DESCRIPCIÓ CAT</th>
<th data-field='descripcion-esp' data-sortable='true'>DESCRIPCIÓ ESP</th>
<th data-field='marca' data-sortable='true'>MARCA</th>
<th data-field='gramaje' data-sortable='true'>GRAMATJE</th>
<th data-field='destacado' data-sortable='true' data-visible='false'>DESTACAT</th>
<th data-field='pvp-cat' data-sortable='true'>PVP-CAT</th>
<th data-field='pvp-lev' data-sortable='true'>PVP-LEV</th>
<th data-field='pvp-and' data-sortable='true'>PVP-AND</th>
<th data-field='pvp-cen' data-sortable='true'>PVP-CEN</th>
<th data-field='pvp-nor' data-sortable='true'>PVP-NOR</th>
<th data-field='pvp-vas' data-sortable='true'>PVP-VAS</th>
<th data-field='pvp-spar' data-sortable='true'>PVP-SPAR</th>
<th data-field='user' data-sortable='true' data-visible='false'>USER</th>
<th data-field='fecha-mod' data-sortable='true' data-visible='false'>FECHA-MOD</th>
<th data-field='edit' data-sortable='false' data-switchable='false'>EDIT</th>
</tr>
</thead>
<tbody>
<?php while ($row = pg_fetch_row($result)){ ?>
<tr id='<?php echo $row[0]; ?>'>
<td></td>
<?php echo $estado = EstadoIcon($row[2]); ?>
<td name='edicion'><?php echo $row[1] ?></td>
<td data-pagina='pagina' name='pagina'><?php echo $row[3] ?></td>
<td name='codigo'><?php echo $row[0] ?></td>
<?php echo $imatge = AddImage($row[9]); ?>
<td name='descripcion-cat'><?php echo $row[5] ?></td>
<td name='descripcion-esp'><?php echo $row[4] ?></td>
<td name='marca'><?php echo $row[6] ?></td>
<td name='gramaje'><?php echo $row[7] ?></td>
<td name='destacado'><?php echo $row[8] ?></td>
<td name='pvp-cat'><?php echo $row[10] ?></td>
<td name='pvp-lev'><?php echo $row[11] ?></td>
<td name='pvp-and'><?php echo $row[12] ?></td>
<td name='pvp-cen'><?php echo $row[13] ?></td>
<td name='pvp-nor'><?php echo $row[14] ?></td>
<td name='pvp-vas'><?php echo $row[15] ?></td>
<td name='pvp-spar'><?php echo $row[16] ?></td>
<td name='user'><?php echo $row[17] ?></td>
<td name='fecha-mod'><?php echo $row[18] ?></td>
<td><button class='btn btn-xs edit btn-edit' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button></td>
</tr>
<?php } ?>
</tbody>
</table>
<div class="modal-body" id="editDetails">
<div class="container-fluid">
<input type="hidden" name="id" type="text"> <!-- hidden input for id -->
<div class="row">
<div class="col-md-2 descFields">
CODI
</div>
<div class="col-md-4">
<input class="form-control" name="codigo" type="text" placeholder="CODI">
</div>
<div class="col-md-6">
<input class="form-control" name="imagen" type="text" placeholder="IMATGE">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
EDICIÓ
</div>
<div class="col-md-4">
<input class="form-control" name="edicion" type="text" placeholder="EDICION">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
PÀGINA
</div>
<div class="col-md-4">
<input class="form-control" name="pagina" type="text" placeholder="EDICION">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
MODIF.
</div>
<div class="col-md-4">
<input class="form-control" name="fecha-mod" type="text" placeholder="FECHA MODIFICACIÓ">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
USER
</div>
<div class="col-md-4">
<input class="form-control" name="user" type="text" placeholder="USER">
</div>
<div class="col-md-6">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
DESC. CAT
</div>
<div class="col-md-10">
<input class="form-control" name="descripcion-cat" type="text" placeholder="DESCRIPCIÓ CAT">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
DESC. ESP
</div>
<div class="col-md-10">
<input class="form-control" name="descripcion-esp" type="text" placeholder="DESCRIPCIÓ ESP">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
MARCA
</div>
<div class="col-md-10">
<input class="form-control" name="marca" type="text" placeholder="MARCA">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
GRAMATGE
</div>
<div class="col-md-10">
<input class="form-control" name="gramaje" type="text" placeholder="GRAMATGE">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
PVP-CAT
</div>
<div class="col-md-4">
<input class="form-control" name="pvp-cat" type="text" placeholder="PVP-CAT">
</div>
<div class="col-md-2 descFields">
PVP-LEV
</div>
<div class="col-md-4">
<input class="form-control" name="pvp-lev" type="text" placeholder="PVP-LEV">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
PVP-AND
</div>
<div class="col-md-4">
<input class="form-control" name="pvp-and" type="text" placeholder="PVP-AND">
</div>
<div class="col-md-2 descFields">
PVP-NOR
</div>
<div class="col-md-4">
<input class="form-control" name="pvp-nor" type="text" placeholder="PVP-NOR">
</div>
</div>
<div class="row">
<div class="col-md-2 descFields">
PVP-SPAR
</div>
<div class="col-md-4">
<input class="form-control" name="pvp-spar" type="text" placeholder="PVP-SPAR">
</div>
<div class="col-md-2 descFields">
DESTACAT
</div>
<div class="col-md-4">
<input class="form-control" name="destacat" type="text" placeholder="DESTACAT">
</div>
</div>
</div>
</div>

Categories