วันศุกร์ที่ 22 ตุลาคม พ.ศ. 2553

คำนวณ textbox array แบบอัตโนมัติ


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="th" xml:lang="th">
<head>
<meta http-equiv="content-type" content="text/html; charset=tis-620" />
<title>calculate number</title>
<script type="text/javascript">
//<![CDATA[
window.onload=function(){
var f = document.getElementById('box');
function calA(i){
var d = function (){
var k = f['k[]'][i];
var p = f['p[]'][i];
var a = f['a[]'][i];
k.value = k.value.replace(/[^\d\.]/g,'');
p.value = p.value.replace(/[^\d\.]/g,'');
a.value = (k.value*1) * (p.value*1);
if (a.value <= 0){
a.style.color = 'red';
} else {
a.style.color = 'black';
}
}
return d;
}
for(var i=0;i<f['k[]'].length;i++){
f['k[]'][i].onkeyup = calA(i);
f['p[]'][i].onkeyup = calA(i);
}
}
//]]>
</script>
</head>
<body>


<form method="post" action="?" id="box">
<input type="text" name="a" value="k" disabled="disabled" />
<input type="text" name="p" value="p" disabled="disabled" />
<input type="text" name="k" value="a" disabled="disabled" />
<?php echo '<br'.' />';?>
<?php foreach(range(1,5) as $m):?>
<input type="text" name="k[]" value="" />
<input type="text" name="p[]" value="" />
<input type="text" name="a[]" value="" />
<?php echo '<br'.' />';?>
<?php endforeach;?>
</form>

</body>
</html>

3 ความคิดเห็น:

  1. k , p, a คือไรอะ อธิบายฟังก์ชันด้วยได้มั๊ยคับ

    ตอบลบ
  2. พอดีมีคนถามถึงตะกร้าสินค้าที่เปลี่ยนราคารวมอัตโนมัติครับ
    ให้ k แทนราคาสินค้า p แทนจำนวนสินค้า ส่วน a แทนราคารวมครับ
    a จะเท่ากับ k*p

    ที่อ่านยากหน่อยจะมีส่วน
    k.value = k.value.replace(/[^\d\.]/g,'');
    เป็นการลบค่าตัวอักษรที่ไม่ใช่ตัวเลขและเครื่องหมายจุดออกจาก textbox ครับ
    \d หมายถึง 0-9
    [^\d\.] หมายถึง ตัวใดๆ ที่ไม่ใช่ 0-9 และ .
    /g หมายถึง แทนที่ string ทุกตัว (global)
    '' หมายถึง empty string หรือทำการลบตัวอักษร string ตัวใดๆ ที่ไม่ใช่ 0-9และ .

    และ
    f['k[]'][i].onkeyup = calA(i);
    เป็นการผูก event onkeyup ของ textbox ที่มีชื่อ name="k[]" ลำดับที่ i
    เข้ากับ event handler (calA(i))

    ซึ่ง calA จะมีการส่ง i ไปเพื่อให้ผูก textbox p[] และ a[] ลำดับที่ i เข้ากับ textbox k[] ลำดับที่ i ทำให้คำนวนและแสดงผลลัพธ์ใน textbox ลำดับเดียวกันครับ

    ตอบลบ
  3. ขอบคุณครับพี่ครับ
    ขอรบกวนอีกนิดหน่อยได้ไหมครับ ถ้าจะเพิ่มช่องคำนวนยอดเงินรวมทั้งหมด โค๊ดต้องเขียนปบบไหนครับ แล้วสามารถใช้ functionเดิมได้ไหม หรือว่าต้องสร้างไว้ใน function อันใหม่

    ขอบคุณครับ

    ตอบลบ