“การใส่จุลภาคหรือคอมม่า(,)ให้กับตัวเลขหลักพัน”

“การใส่จุลภาคหรือคอมม่า(,)ให้กับตัวเลขหลักพัน”

ลูกค้า : "พี่ขอให้กรอกช่องเงินได้โดยให้มีคอมม่า กับทศนิยม ด้วยได้มั้ย แบบนี้มันดูแล้วไม่รู้มันกี่บาท ดูยากมากๆ เลย"

SW Teamleader : อ่อ ได้ครับพี่

หลังจากนั้นก็นำไปให้โปรแกรมเมอร์ทำ ซึ่งโปรแกรมเมอร์ส่วนใหญ่ใช้วิธีดั้งเดิม คือ จะนับจำนวนตัวเลขแล้วนำคอมม่า (,) ไปแทรกทีละ 3 หลัก

ผลปรากฎว่า …..
programmer : "พี่ครับผมแก้ให้เรียบร้อยแล้วครับเรื่องใส่ comma งานง่ายๆสบายมาก"
SW Teamleader: "โอเค เดี๋ยวพี่ลองเทส อ่าวเห้ย...... มันบันทึกไม่ได้อ่ะ แต่ format ออกมาตรงเปะเลย"

เหตุการนี้ เกิดจาก replace string แทรก คอมม่าเข้าไป พอนำ string กลับไปบันทึกในฐานข้อมูลซึ่งโครงสร้างเป็น float จึงไม่สามารถบันทึกได้

วิธีแก้ให้ทำงานได้ง่าย คือ ใช้ Jquery ช่วยสิครับ
1.ใช้ฟังก์ชั่นโดยใส่ format ให้ เช่น numeral(parseFloat(0.00)).format('0,0.00'); ในการกำหนด format ให้กับตัวเลขให้มีคอมม่า (,) คั่นหลัก และมีทศนิยม 2 ตำแหน่ง ดังตัวอย่าง
$(document).ready(function(){
$('.numberOnly').pressOnly(/[0-9.]/i);
$('.inputOtDay').change(function(){
if( $(this).val() == '' ){
var input = numeral(parseFloat(0.00)).format('0,0.00');
}else{
var n = numeral().unformat($(this).val());
var input = numeral(parseFloat(n)).format('0,0.00');
}
$(this).val(input);
calculateOnPage();
});
});

2.และตอนนำไปบันทึกใช้การ unformat ให้กับตัวแปร เช่น salary = parseFloat(numeral().unformat($('#salary').val()));
แล้วนำตัวแปรไปบันทึกลงฐานข้อมูลต่อไป ดังตัวอย่าง

function calculateOnPage(){
$('.inputOtDay').each(function(){
var salary = parseFloat(numeral().unformat($('#salary').val()));
}

จากตัวอย่างจะเป็นการใช้ numeral function ของ Jquery ทำการเปลี่ยนค่าตัวเลขจาก 1000000.00 เป็น 1,000,000.00 และจะนำไปบันทึกในฐานข้อมูลเป็น 1000000.00 ซึ่งสามารถบันทึกได้อย่างแน่นอน ไม่ bug ซึ่งหลักการใช้งานก็คือ ทำการ ใส่ format ให้กับตัวเลขในช่องนั้นๆตอนที่ผู้ใช้กรอกข้อมูล และเมื่อทำการบันทึกข้อมูลจะทำการ unformat ตัวเลขที่มีคอมม่าให้เอาคอมม่าออกเพื่อนำไปบันทึกลงฐานข้อมูล

"การสร้าง format ตัวเลขโดยใช้ Jquery เป็นหนึ่งในหลายเทคนิคขึ้นอยู่กับความถนัดและความเข้าใจของนักพัฒนาโปรแกรม แต่สิ่งสำคัญมากกว่าประเด็นเทคนิคคือ การใช้ความคิดวิเคราะห์หาแนวทางแก้ไขโจทย์ปัญหาเพื่อที่จะได้โค้ดที่ดี กระชับ ตรงตามความต้องการและมีประสิทธิภาพสูงสุด"

สเถียรพงศ์ สุกิน
Software Team Leader
Sapphire Research and Development co.,ltd.

Contact Us!

199/445 M.2 Nong-jom,
Sansai, Chiangmai,
Thailand 50210
Tel : 053-248985
Fax : 053-854907
Email : This email address is being protected from spambots. You need JavaScript enabled to view it.
facebook : Sapphire Research & Development
Location : 18.830784, 99.016745

Please publish modules in offcanvas position.