Register Register Member Login Member Login Member Login Forgot Password ??
PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone
 

Registered : 109,036

HOME > PHP > PHP Forum > ขอคำแนะนำการสั่งซื้อสินค้าขึ้นโชว์ข้อมูลทันทีพร้อมกับ submit ไปยัง db



 

ขอคำแนะนำการสั่งซื้อสินค้าขึ้นโชว์ข้อมูลทันทีพร้อมกับ submit ไปยัง db

 



Topic : 136988



โพสกระทู้ ( 11 )
บทความ ( 0 )



สถานะออฟไลน์




อยากได้วิธีการหรือคำแนะนำ หน่อยคับ เช่น 1. เริ่มจากตรงนี้ 2. ต่อไปก็ทำแบบนี้ เก็บข้อมูลไว้ยังไงแบบไหน
ขอเป็นวิธีคิดและทำง่ายๆสักนิดนะคับไม่ได้เก่งมาก ภาษาก็ php jQuery ajax หรือมีตัวอย่างสักนิดก็จะขอบคุณมากคับ


ดังรูปเลยคับ
picture



Tag : PHP, jQuery







Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2023-04-03 11:21:52 By : tomtourism3 View : 302 Reply : 4
 

 
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:36 By : 009
 


 

No. 2



โพสกระทู้ ( 11 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 1 เขียนโดย : 009 เมื่อวันที่ 2023-04-03 12:41:36
รายละเอียดของการตอบ ::
ขอสอบถามเพิ่มเติมหน่อยคับ
คือที่ผมจะทำมันประมานนี้คับ

1. คือเป็นปุ่มวนลูปและส่งค่า ไม่ต้องระบุจำนวน เช่น ID 1 >>
2. โชว์ข้อมูลด้านขวา(ในหน้าเดิม) id 1 name บลาๆๆ **ยังไม่ต้องบันทึก และ สามารถลบได้
3. กด submit บันทึกลง DB

มันต้องระบุค่าใน ตัวปุ่ม <?php echo $row['id'];?> แบบนี้ใช่มั้ยคับ
แล้วเอาไปเก็บและแสดงผลยังไงคับ เพราะผมยังไม่ต้องการบันทึก
หรือเขาทำกันแบบอื่นนอกจากที่ผมคิด แนะนำทีคับ


แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2023-04-03 16:56:10 By : tomtourism3
 

 
ตอบความคิดเห็นที่ : 2 เขียนโดย : tomtourism3 เมื่อวันที่ 2023-04-03 16:56:10
รายละเอียดของการตอบ ::
แล้วแต่ความต้องการ ไม่มีใครถูกผิด สิ่งที่ควรมีคือพื้นฐาน HTML
ศึกษา PHP/CSS/JS หรือแม้แต่ framework ต่างๆ ถ้าเข้าใจ HTML คลาดเคลื่อน
ก็ไปต่อไม่ได้ เพราะสิ่งที่ยากหรือซับซ้อนกว่า สุดท้ายต้องอ้างอิง HTML


data, variables, comment เป็นของ AI
ส่วนที่เหลือ ผมปรับแก้ให้มันรันได้...ลองดู

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 มีเยอะ
ไม่ต้องแก้คำตอบมั่วๆ ของ AI
AI เหมาะกับคำถามจำเพาะและปริมาณน้อย
ปริมาณมากไป google

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2023-04-04 00:05:13 By : 009
 


 

No. 4



โพสกระทู้ ( 11 )
บทความ ( 0 )



สถานะออฟไลน์


ตอบความคิดเห็นที่ : 3 เขียนโดย : 009 เมื่อวันที่ 2023-04-04 00:05:13
รายละเอียดของการตอบ ::
ขอบคุณมากคับ ที่เขียนโค้ดให้เป็นตัวอย่าง
ขอบคุณสำหรับคำแนะนำด้วยคับผม

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2023-04-04 21:47:55 By : tomtourism3
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ขอคำแนะนำการสั่งซื้อสินค้าขึ้นโชว์ข้อมูลทันทีพร้อมกับ submit ไปยัง db
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)







Exchange: นำเข้าสินค้าจากจีน, Taobao, เฟอร์นิเจอร์, ของพรีเมี่ยม, ร่ม, ปากกา, power bank, แฟลชไดร์ฟ, กระบอกน้ำ

Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2024 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่