ขอคำแนะนำการสั่งซื้อสินค้าขึ้นโชว์ข้อมูลทันทีพร้อมกับ submit ไปยัง db
HTML form <form id="order-form">
<input type="hidden" name="product_id" value="123">
<input type="hidden" name="product_name" value="Product Name">
<input type="hidden" name="product_price" value="19.99">
<label for="quantity">Quantity:</label>
<input type="number" name="quantity" id="quantity" min="1" max="10" value="1">
<button type="submit" id="order-btn">Order</button>
</form>
jQuery
$(document).ready(function() {
$('#order-form').submit(function(e) {
e.preventDefault(); // prevent default form submission
var form_data = $(this).serialize(); // serialize form data
$.ajax({
url: 'order.php',
method: 'POST',
data: form_data,
success: function(response) {
if (response == 'success') {
$('#order-msg').text('Order successful');
} else {
$('#order-msg').text('Order failed');
}
}
});
});
});
order.php <?php
// get form data
$product_id = $_POST['product_id'];
$product_name = $_POST['product_name'];
$product_price = $_POST['product_price'];
$quantity = $_POST['quantity'];
// validate form data
if (!is_numeric($quantity) || $quantity < 1 || $quantity > 10) {
echo 'error';
exit;
}
// insert order into database or send email to store owner
// เขียน insert table ตรงนี้
echo 'success';
?>
Date :
2023-04-03 12:41:36By :
009
ตอบความคิดเห็นที่ : 2 เขียนโดย : tomtourism3 เมื่อวันที่ 2023-04-03 16:56:10 รายละเอียดของการตอบ ::
แล้วแต่ความต้องการ ไม่มีใครถูกผิด สิ่งที่ควรมีคือพื้นฐาน HTML
ศึกษา PHP/CSS/JS หรือแม้แต่ framework ต่างๆ ถ้าเข้าใจ HTML คลาดเคลื่อน
ก็ไปต่อไม่ได้ เพราะสิ่งที่ยากหรือซับซ้อนกว่า สุดท้ายต้องอ้างอิง HTML
Code (PHP) <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<style>
.container {
width: 100%;
height: 100%;
position: relative;
}
#order-list-container {
width: 300px;
position: absolute;
top: 0;
right: 0;
}
.main-content {
width: calc(100% - 300px);
float: left;
}
table {
text-align: center;
}
</style>
</head>
<body>
<?php
// query products from database
// $products = query_products_from_database();
// example product data
$products = [
['id' => 1, 'name' => 'Product 1', 'price' => 9.99],
['id' => 2, 'name' => 'Product 2', 'price' => 14.99],
['id' => 3, 'name' => 'Product 3', 'price' => 24.99],
];
?>
<div class="container">
<div class="main-content">
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach ($products as $product): ?>
<tr>
<td><?= $product['id'] ?></td>
<td><?= $product['name'] ?></td>
<td><?= $product['price'] ?></td>
<td><button class="order-btn" data-product-id="<?= $product['id'] ?>" data-product-name="<?= $product['name'] ?>" data-product-price="<?= $product['price'] ?>">Order</button></td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
</div>
<div id="order-list-container">
<table id="order-list-table">
<thead>
<tr>
<th>Name</th>
<th>Quantity</th>
<th>Price</th>
<th>Action</th>
</tr>
</thead>
<tbody id="order-list"></tbody>
<tfoot>
<tr>
<td colspan="3">Total:</td>
<td colspan="2"><span id="order-total-price">0.00</span></td>
</tr>
<tr>
<td colspan="5"><input type="hidden" id="order-data-input" name="order_data" value="">
<button id="confirm-order-btn">Confirm Order</button></td>
</tr>
</tfoot>
</table>
</div>
</div>
<script>
$(document).ready(function() {
var order_data = {
items: [],
total_price: 0
};
$('.order-btn').on('click', function() {
// get product data from somewhere (e.g. a data attribute on the button)
var product_id = $(this).data('product-id');
var product_name = $(this).data('product-name');
var product_price = $(this).data('product-price');
// check if item already exists in order data
var existing_item = order_data.items.find(function(item) {
return item.id === product_id;
});
if (existing_item) {
// item already exists, increment quantity and update total price
existing_item.quantity++;
existing_item.subtotal = existing_item.price * existing_item.quantity;
order_data.total_price += existing_item.price;
// find existing item element in order list and update its quantity and price
var existing_item_element = $('#order-list tr[id="' + product_id + '"]');
var quantity_element = existing_item_element.find('.quantity');
var price_element = existing_item_element.find('.price');
quantity_element.text(existing_item.quantity);
price_element.text(existing_item.subtotal.toFixed(2));
} else {
// item does not exist, add to order data and update total price
var item = {
id: product_id,
name: product_name,
price: product_price,
quantity: 1 // initial quantity is 1
};
order_data.items.push(item);
order_data.total_price += product_price;
// update order list container with new item
var item_html = '<tr class="order-item" id="' + product_id + '">' +
'<td class="name">' + product_name + '</td>' +
'<td class="quantity">1</td>' +
'<td class="price">' + product_price + '</td>' +
'<td><button class="remove-btn">remove</button></td>' +
'</tr>';
$('#order-list').append(item_html);
}
$('#order-total-price').text(order_data.total_price.toFixed(2));
// update order data input value
$('#order-data-input').val(JSON.stringify(order_data));
});
// remove button click event
$(document).on('click', '.remove-btn', function() {
var index = $(this).parent().parent().index();
var item = order_data.items[index];
order_data.items.splice(index, 1);
order_data.total_price -= item.price * item.quantity;
$(this).parent().parent().remove()
$('#order-total-price').text(order_data.total_price.toFixed(2));
$('#order-data-input').val(JSON.stringify(order_data));
});
// confirm order button click event
$('#confirm-order-btn').on('click', function() {
// get order data from input value
var order_data_input = $('#order-data-input').val();
var order_data = JSON.parse(order_data_input);
// validate order data (e.g. check if items are not empty)
if (order_data.items.length === 0) {
alert('Order is empty!');
return;
}
// send order data to server-side (e.g. using ajax)
// ...
// clear order data and update order list
order_data = {
items: [],
total_price: 0
};
$('#order-list').empty();
$('#order-data-input').val(JSON.stringify(order_data));
});
});
</script>
</body>
</html>
จริงๆ ถ้าเป็นตัวอย่าง project เลย ค้นคำว่า eCommerce มีเยอะ
Date :
2023-04-04 00:05:13By :
009
Server 04
Load balance : Server 04
