ฟอร์มสั่งซื้อสินค้า โดยกรอกสินค้าและกด Submit ไม่ให้หน้าจอ Refresh

สวัสดีคะ NineNik

คือจะทำฟอร์มสำหรับสั่งซื้อคะ โดยหน้ากรอกสินค้าและจำนวน กับ ตารางสำหรับแสดงรายการ อยู่ในหน้าเดียวกันคะ

โดยมีขั้นตอนดังนี้
1. กรอกสินค้า และ จำนวน หลังจากนั้นกด Submit (หน้าเว็บต้องไม่ Refresh และต้องไปทำ Process 2)
2. ระบบจะทำการบันทึกรายการในฐานข้อมูล MySQL (เมื่อ Process 2 ทำงาน จะไปทำ Process 3)
3. แสดงรายการสั่งซื้อในตาราง (เมื่อ Process 2 เรียบร้อย Process 3 จะไป Query ข้อมูลมาแสดงในตาราง โดยหน้าเว็บจะต้องไม่ Refresh คะ)
เมื่อสั่งซื้อรายการเพิ่ม ก็ทำตามข้อ 1-3 โดยมีเงื่อนไขว่าหน้าเว็บจะไม่ต้อง Refresh คะ
4 เมื่อได้รายการครบตามที่ต้องการก็ให้คลิกปุ่น สิ้นสุดการสั่งซื้อ

ทีนี้ไม่แน่ใจว่าจะต้องเขียนแบบไปนเพื่อไม่ให้หน้าจอ Refresh คะ ช่วยแนะนำด้วยนะคะ ต้องส่งงานอาจารย์คะ ขอตัวอย่าง ที่คล้ายก็ได้คะ เดี๊ยวจะศึกษา และปรับอีกที

            _________
สินค้า : | ไม้บรรทัด |  >> สมมติว่าเป็น Textbox

              _____
จำนวน : | 100 |  ชิ้น >> สมมติว่าเป็น Textbox

_______
| Submit |  >> สมมติว่าเป็นปุ่ม


_____________________
| ลำดับ |    สินค้า    |   จำนวน  |
------------------------------------
     1        ปากกา        20
     2        ดินสอ          10
     3       ไม้บรรทัด     100

____________
| สิ้นสุดการสั่งซื้อ |
 

 ถ้ามีความรู้เกี่ยวกับ jQuery จะสามารถทำได้ง่ายด้วย ajax 

<?php
session_start();
header("Content-type:text/html; charset=UTF-8");        
header("Cache-Control: no-store, no-cache, must-revalidate");       
header("Cache-Control: post-check=0, pre-check=0", false);       
?>
<?php
if(count($_POST)>0){
	$_SESSION['ses_proname'][time()]=$_POST['pro_name'];
	$_SESSION['ses_qty'][time()]=$_POST['pro_qty'];
}
if($_GET['clear']){
	unset($_SESSION['ses_proname']);	
	unset($_SESSION['ses_qty']);	
	session_destroy();
}
?>
<?php if(isset($_GET['showDtata'])){ ?>
<table width="300" border="0" cellspacing="2" cellpadding="0">
  <tr>
    <td align="center">#</td>
    <td align="center">Pro</td>
    <td align="center">Qty</td>
  </tr>
<?php
$i=1;
if(count($_SESSION['ses_proname'])>0){
	foreach($_SESSION['ses_proname'] as $key=>$value){
?>  
  <tr>
    <td align="center"><?=$i?></td>
    <td align="left"> &nbsp; <?=$_SESSION['ses_proname'][$key]?></td>
    <td align="left"> &nbsp; <?=$_SESSION['ses_qty'][$key]?></td>
  </tr>
<?php
		$i++;
	}
 } ?>  
   <tr>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center"><input type="button" name="Clear" id="Clear" value="Clear"></td>
  </tr>
</table>
<?php } ?>

ขอบคุณมากคะ

แต่ว่า นุชลอง Copy ตัวไฟล์ genPro.php ไปลองเล่นดูที่เครื่อง ไม่เห็นมีในส่วนของฟอร์มรับข้อมูลเลยคะ ถ้าเป็นการไม่รบกวนขอความรู้เพิ่มอีกนิดได้หรือป่าวคะ เพราะว่าจะได้ลองมาปรับใช้กับโปรเจค

เพราะของพี่จะเป็นการเก็บลงใน Session แต่ของนุชเป็นการเก็บลงในฐานข้อมูล รบกวนด้วยนะคะ ไม่ค่อยมีความรู้เท่าไหร่คะ

ขอบคุณมากๆ เลยคะ

ไม่รู้จะเข้าใจหรือป่าวน่ะ ไฟล์ simple_shop.php https://www.ninenik.com/demo/simple_ajax_shop/simple_shop.php

ให้ึคลิกลิ้งค์เข้าไป แล้วคลิกขวา เลือกวิวซอร์ด ดูโค้ดในหน้านั้นได้เลย ส่วนไฟล์ genPro.php ก็ตามความเห็นที่ 1  ส่วน javascript ที่เรียกใช้งาน simple_shop.php สามารถดาวน์โหลดที่ www.jquery.com

ขอบคุณมากคะ

สงสัยเมื่อเช้าไม่ได้ Login เลย View Source ไม่ขึ้นคะ เดี๊ยวจะลองศึกษาดูคะ