PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

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

ฟอร์มสั่งซื้อสินค้า โดยกรอกสินค้าและกด 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

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



โดย:  Nutchanat2903 IP: 183.89.180.xxx วันที่: 09-09-2010 เวลา: 11:51:54

คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ


  • ( หรือ สามารถทำการ สมัครสมาชิก และล็อกอิน ด้วย ปุ่ม Log in with Facebook ด้านล่าง )
 ความคิดเห็นที่ 4

ขอบคุณมากคะ

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



โดย:  Nutchanat2903 IP: 183.89.152.xxx วันที่: 10-09-2010 เวลา: 23:05:56
 ความคิดเห็นที่ 3

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

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

 



โดย:  Ninenik IP: 124.120.16.xxx วันที่: 10-09-2010
 ความคิดเห็นที่ 2

ขอบคุณมากคะ

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

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

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



โดย:  Nutchanat2903 IP: 183.89.227.xxx วันที่: 10-09-2010 เวลา: 08:42:02
 ความคิดเห็นที่ 1

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

 
ตัวอย่างโค้ด simple_shop.php คลิกขวาดูได้จากลิ้งค์ด้านล่าง
 
http://www.ninenik.com/demo/simple_ajax_shop/simple_shop.php
 
โค้ดไฟล์ genPro.php
<?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 } ?>
ดูเป็นแนวทาง หากไม่มีพื้นฐาน อาจะข้าใจยาก แต่ให้ดูผลลัพธ์ ว่า สามารถทำได้ ไม่ยาก


โดย:  Ninenik IP: 183.89.168.xxx วันที่: 09-09-2010