A-AA+then

เทคนิคกการคำนวณราคาสินค้าโดยที่ไม่ต้อง Sumit นั้น มีเทคนิคง่ายๆ โดยที่ไม่ต้องพึ่ง Ajax แต่อย่างใด (หลายๆคนคิดว่ามันต้องใช้ Ajax) เพราะหลักการของมันจริงๆแล้ว มันไม่จำเป็นต้องมีอะไรติดต่อกับ Server เลย เพียงแค่เราเตรียมข้อมูลที่จำเป็นเท่านั้น ซึ่งข้อมูลที่จำเป็นที่เราต้องเตรียมก็คือ ข้อมูลราคาสินค้าต่อหน่วย ส่วน จำนวนนั้นเราจะให้ User เป็นผู้กรอก

หลักการของมันก็คือ ดักจับอีเวนต์การกดคีย์ (กรอกตัวเลขจำนวนที่ต้องการ แล้วนำไปคำนวณ)

ในตัวอย่างนี้ผมจะนำเสนอแค่การเขียนโค้ดเพื่อคำนวณเท่านั้นนะครับ.. 

อย่างแรกเลยเรามาดูโค้ดฟอร์มกันก่อน
<form method="get" action="calc.php">
<p><input type="text" id="amount1" value="1" /> * <input type="text" id="price1" value="10" /> = <input type="text" id="sum1" name="sum[]" /></p>
</form>

amount1 ก็คือ input สำหรับจำนวนสินค้า ซึ่งปกติจะเป็นแบบ text และ เราจะกำหนดให้มันรับค่าได้แค่ตัวเลขเท่านั้น
price1 ก็คือ input สำหรับราคาสินค้าซึ่งโดยปกติมันจะต้องรับค่าจุดทศนิยมด้วย(เศษสตางค์) ในตัวอย่างผมกำหนดให้เป็น text เพื่อแสดงเทคนิคการทำงาน แต่ในทางปฏิบัติหากใช้ในระบบตะกร้าสินค้า input นี้ควรเป็น hidden เพราะเราไม่จำเป็นต้องมีการกรอกค่าใดๆ เนื่องจากราคาสินค้าจะต้องถูกกำหนดจากระบบอยู่แล้ว หรือ อาจให้มันแสดงแต่ disabled ไว้ เพื่อป้องกันการแก้ไขราคาก็ได้ และ ไม่จำเป็นต้องกำหนด event ใดๆเพราะมันไม่ได้รับค่าจากผู้ใช้
sum1 เป็นฟิลด์แสดงราคารวมของสินค้าหลังจากการคำนวณ ฟิลด์นี้ก็เช่นกันเราอาจใช้เป็น <span> หรืออะไรก็ได้เพราะมันทำหน้าที่แสดงผลเท่านั้น แต่หากเราต้องนำไปคำนวณราคารวมเราต้องต้องใช้ input ชนิด text เพื่อให้มันสามารถนำไปคำนวณต่อได้ง่าย

โค้ด Javascript ที่ใช้ครับ
<script type="text/javascript">
<!--
/* ตัวเลขเท่านั้น */
var numberOnly = function(event) {
var key = event.which || event.keyCode;
if(!((key > 47 && key < 58) || key == 8 || key == 9 || key == 37 || key == 39)) {
GEvent.stop(event);
return false;
}else {
return true;
}
};
/* ตัวเลขและจุดเท่านั้น */
var currencyOnly = function(event) {
var key = event.which || event.keyCode;
if(!((key > 47 && key < 58) || key == 8 || key == 9 || key == 37 || key == 39 || key == 46)) {
GEvent.stop(event);
return false;
}else {
return true;
}
};
/* หาผลคูณ */
var calc = function(event) {
var amount = parseFloat($E('amount1').value);
amount = isNaN(amount) ? 0 : amount;
var price = parseFloat($E('price1').value);
price= isNaN(price) ? 0 : price;
$E('sum1').value = amount * price;
};
/* อีเว้นต์สำหรับกรอกกตัวเลขเท่านั้น */
$G('amount1').addEvent('keypress', numberOnly);
$G('price1').addEvent('keypress', currencyOnly);
/* อีเวนต์สำหรับการคำนวณ */
$G('amount1').addEvent('keyup', calc);
$G('price1').addEvent('keyup', calc);
$G('amount1').addEvent('change', calc);
$G('price1').addEvent('change', calc);
/* เรียกคำนวณครั้งแรกตอนเริ่มต้น */
calc.call(this);
//-->
</script>

หลักการของมันก็คือ
1.ดักจับ event(keypress) ของ amount1 ไปยัง numberOnly เพื่อให้มันรับค่าแค่การกดตัวเลขเท่านั้น
2.ทำอย่างเดียวกันกับ price1 แต่เพิ่มเติมต้องรับจุดทศนิยมด้วยเลยเขียนใหม่เป็น curencyOnly
3.ดักจับ event keyup และ change ของ input ทั้ง 2 ตัว เพื่อนำไปคำนวณหลังจากที่มีการเปลี่ยนแปลงค่าภายใน input ซึ่งเมื่อคำนวณแล้วก็เอาค่าที่คำนวณได้ใส่ใน sum1

เพิ่มเติม หากต้องการคำนวณราคาสินค้ารวม ภายในฟังก์ชั่น calc หลังจากที่คำนวณเสร็จแล้ว เราอาจเพิ่มเติมให้มันไปคำนวณราคารวมต่อ โดยการนำเอาจนวนเงินจาก sum1 ของแต่ละรายการมารวมกัน ได้เป็นผลลัพท์ราคารวม

ตัวอย่าง

cart

Relate

^