|
 |
|
javascript คำนวณนะครับ คือผมดึงข้อมูลมาจากฐานข้อมูลนะครับแล้วอยากให้ติกสองช่องแล้วช่องที่สามคำนวณเงินมาเลยนะครับ |
|
 |
|
|
 |
 |
|
ถ้าคุณต้องการระบบคำนวณอัตโนมัติ ใน js จะว่าไปมันก็ไม่ยาก แต่มันก็ใช้เวลาบ้าง
วิธีการก็คือ
1. ใช้ onchange ดัก หรื onblur
2. ตรวจสอบว่า อันไหนกรอกครบสองช่อง(คู่กัน) แล้วเอา index มาไว้ใช้ตอนคำนวณ
3. ตรวจสอบว่ากรอกเป็นตัวเลขหรือไม่ อาจใช้ isNaN() (อาจตรวจก่อนข้อ 2)
4. เปลี่ยนข้อมูลให้เป็นตัวเลข จะใช้ parseInt() หรื parseFloat() ก็แล้วแต่
5. คำณวนตาม index ที่เก็บไว้ แสดงผลตาม index เดียวกันในที่แสดงผล ส่วน last total ก็แค่เอามารวมกัน
ถ้าคุณเขียนได้ด้วยตัวเอง คุณก็จะถนัด js มากขึ้น และต่อไปก็ง่ายแล้ว
ผมมีตัวอย่าง อาจจะไม่เหมือนคุณแต่ลักษณะคล้ายกัน (พอดีใช้ jquery อย่าเพิ่งงง นะคับ)
Code (JS)
$(':text[count_id]').change( function(){
var count_id = $(this).attr('count_id');
var price_per_day = $('#price_id'+count_id).attr('price');
var start_promotion = $('#price_id'+count_id).attr('start_promotion');
var discount = $('#price_id'+count_id).attr('discount');
var rooms_total_price = parseInt($(this).val()) * parseFloat(price_per_day) * parseInt(booking_days);
if( isNaN(rooms_total_price) || rooms_total_price < 0 ){
alert('กรุณากรอกจำนวนห้องให้ถูกต้อง');
$(this).val('');
$('span[totalroomprice='+count_id+']').attr('amount', '0').html('0฿').css('color', 'black');
}else{
$(this).val( parseInt($(this).val())+'' );
if( parseInt($(this).val()) >= parseInt(start_promotion) && parseInt(start_promotion) != 0 ){//คำนวนลดราคาถ้าเข้าสู่เงื่อนไขตามจำนวนจอง
rooms_total_price = Math.ceil(rooms_total_price * (100 - parseInt(discount)) / 100);
$('span[totalroomprice='+count_id+']').css('color', 'darkgreen');
}else{
$('span[totalroomprice='+count_id+']').css('color', 'black');
}
$('span[totalroomprice='+count_id+']').attr('amount', rooms_total_price+'').html( addCommas(rooms_total_price)+'฿' );
}
showTotalPrice();
});
function showTotalPrice(){
var total_price = 0;
$('span[totalroomprice]').each( function(){
total_price += parseFloat( $(this).attr('amount') );
});
var total_with_tax = Math.ceil(total_price * 1.07);
$('#total_price').html( addCommas(total_price) );
$('#grand_total_price').attr('amount', total_with_tax+'').html( addCommas(total_with_tax)+'฿' );
$('#tdtotal').width(99);
}
<?php
//ถ้ามีการย้อนกลับมาแก้ไขข้อมูล ให้คำนวนเงิน
if($edit){//if x
?>
$(':text[count_id]').change();
<?php
}//if x
?>
http://gunner.freetzi.com
|
 |
 |
 |
 |
Date :
2010-07-15 12:47:36 |
By :
pjgunner |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
งงง ครับ..
|
 |
 |
 |
 |
Date :
2010-07-15 12:49:54 |
By :
sleepington |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
 |
|
|
 |
 |
|
คับ ไม่ต้องไปสนใจโค้ดผมหรอก แค่ทำตามขั้นตอนครับ เพราะโค้ดนี้เป็นโค้ดแบบ ดราฟ เพราะ gui มันออกแบบยากผมไม่รู้ว่าจะต้องรื้อหรือป่าว ถ้าเขียนโค้ดแบบดีๆ มันจะเสียของถ้าต้องทำ gui ใหม่
|
 |
 |
 |
 |
Date :
2010-07-15 12:57:24 |
By :
pjgunner |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 02
|