สอบถามปัญหากรณีไม่สามารถกำหนด key แบบเจาะจงให้กับ input ได้ครับ

อ้างอิงจาก https://www.ninenik.com/แนวทางการส่งค่า_จาก_checkbox_เพื่อบันทึกข้อมูลแบบ_array_ใน_php-500.html

ปัญหาก็คือมี input ตัวนึงที่ผมอยากจะให้ key กับมันไม่สามารถทำได้พอใส่แล้ว มันจะไม่สามารถใช้ id ของตัวมันในการคำนวณได้ครับ

<td width="5%"><center><input type="text" name="txtUnit[<?php echo $data3["id"];?>]" 
    id="txtUnit[<?php echo $i;?>]" size='6' onChange="fncUnitAlert(<?php echo $i;?>)" /></center></td>
<td width="5%"><center><input type="hidden" name="txtQTY[]" 
    id="txtQTY[<?php echo $i;?>]"value ="<?php echo $data3["amount"];?>"/><?php echo $data3["amount"];?></center>
</td>
<td width="5%"><center><div id=txtPrice<?php echo $i; ?> ></div>
<input type="hidden" name="txtPrice[]" id="txtPrice[<?php echo $i;?>]" value=""/></center></td>

ในส่วนของ txtPrice ครับ 

อันนี้คือฟังก์ชันที่เอา id ของ txtPrice ไปคำนวณ

function fncUnitAlert(id)
{  
sum = 0 ;

var u = document.getElementById("txtUnit[" id "]").value;
var q = document.getElementById("txtQTY[" id "]").value;
 document.getElementById("txtPrice" id).innerHTML =  u*q; 
 document.getElementById("txtPrice[" id "]").value =  u*q;
var p =  document.getElementsByName("txtPrice[]");
console.log(p);
  for (var i=0;i<p.length;i  )
  {
	  sum = sum + Number(p[i].value);
  }
	document.getElementById("subtotal").innerHTML = sum ;
	document.getElementById("subtotal").value = sum ;
	vat = 0;
	display(vat,sum);
}

การทำงาน

 

ถ้าหากมีการใช้ชื่อซ้ำกัน และไม่ได้กำหนดเป็น array ค่าที่ส่ง จะเป็นค่าของ element ตัวสุดท้าย ที่อยู่ใน form



ทดสอบสอบกรอกข้อมูลก่อนส่ง



ผลลัพธ์



จะเห็นว่าเป็นค่าของ input ของตัวที่สองที่มีชื่อ เหมือนกัน

กรณีเราต้องการใช้ชื่อเหมือนกัน เราสามารถใช้โดยกำหนดในรูปแบบ array มีค่า key เป็น unique ซึ่งมีอยู่สองวิธี
คำใช้ค่า key อัตโนมัติ ค่าจะเป็นตัวเลข เริ่มจาก 0 ....  โดยกำหนดเครื่องหมาย [] ต่อเข้าไปที่ชื่อของ elements



ทดสอบส่งค่า


จะเห็นว่าการกำหนดแบบที่ 1 เราจะได้ array ของ input ที่มีชื่อเหมือนกัน โดยเริ่มต้นตัวแรกเป็น key 0 เวลาอ้างอิงค่าต้นใช้งานก็จเป็น

echo $_POST['input_name'][0];
echo $_POST['input_name'][1];

แบบที่สอง คือ เรากำหนดค่าใน key ของ ชื่อ elements เอง โดยค่าจะเป็นตัวเลข หรือข้อความก็ได้ แต่ต้องเป็นค่าเฉพาะเช่น


หรือกรณีใช้ร่วมกับการกำหนดด้วยโปรแกรม


หรือการกำหนดเป็นข้อความ

ทดสอบส่งค่า

สังเกตว่า key ของ array จะเปลี่ยนไปตามที่เรากำหนด

วิธีที่เหมาะสมคือควรกำหนด key แบบตัวเพื่อป้องกันปัญหา กับบาง element เช่น checkbox 
โดยตัว checkbox หากไม่มีการติกเลือก จะไม่มีการส่งค่าๆ แม้แต่ค่าว่างไป ตูตัวอย่าง



ทดสอบ เลือก checkbox ตัวที่ 2 แล้วกดส่งค่า



จะได้เป็น


จะเห็นว่า กรณีไม่กำหนด key แบบเจาะจง จะทให้ถ้าเป็น checkbox จะมองว่าค่าตัวแรกที่ ที่ติ้กเลือก เป็นค่า key เริ่มต้นเป็น 0
ซึ่ง ถ้าจะให้สัมพันธ์กัน key 0 ควรส่งค่าที่เป็น a  ส่วนค่า b จะต้องเป็นของ key 1 

เราลองปรับโค้ด โดยกำหนดค่า key ตายตัวให้กับ checkbox และ input  ให้สัมพันธ์กัน เป็นดังนี้



ทดสอบส่งค่าเหมือนเดิมอีกครั้ง ผลได้ที่


จะเห็นว่า ตอนนี้ key ของ checkbox และ input สัมพันธ์กัน คือ key เท่ากับ 1 ของ input เท่ากับ test b และของ checkbox เท่ากับ b
การที่ค่า key ของชุดข้อมูล อย่างสมมติที่นี้เป็นข้อมูลแถวเดียวกัน key เดียวกัน เราก็สามารถอ้างอิงเวลานำไปใช้งาน ในรูปแบบ array ได้
เช่น



การอ้างอิงค่าข้างต้น ถ้าเราต้ิกเลือก checkbox ทั้งสอง ค่าก็จะแสดงปกติ ดังนี้


แต่ถ้า เราไม่ต้ิกเลือก รายการใดๆ หรือติ้กเลือกแค่ checkbox ตัวที่สอง หากเรากำหนดให้แจ้งเตือน error ก็จะแสดงผลลัพธ์ดังนี้



ทั้งนี้เพราะ ที่ checkbox key เท่ากับ 0 เราไม่ได้ติ้กเลือก จึงไม่มีการส่งค่ามา พอเราเรียกใช้งานตัวแปร ที่ไม่มีค่า หรือการอ้างอิง key ไม่
ถูกต้อง ก็จะขึ้นแจ้งเตือนในลํกษณะข้างต้น เราสามารถแก้ไข โดยตรวจสอบข้อมูล การนำมาแสดง ดังนี้


>>>  อัพเดท >>> 28-08-2019
------------------------------------------



การตรวจสอบข้อมูล การเรียกใช้งาน ข้างต้น จะช่วยแก้ปัญหา การแจ้งเตือน กรณีเรียกใช้งานตัวแปร ที่ไม่มีการส่งค่ามา โดยให้ไม่แสดงข้อมูล ถ้า
ไม่มีการส่งค่า เป็นต้น


การอ้างอิงค่า key สำหรับข้อมูล ในแถวเดียวกับ หรือชุดเดียวกับ จากข้างต้น เรามีแค่สองรายการคือ input กับ checkbox 
ถ้าหากมี element เพื่ิมเติม เราก็สามารถกำหนดในลักษณะเดียวกัน เช่นกรณี มี input hidden เพิ่มเข้ามา



การใช้งานข้อมูล



หรือกรณีเป็น input file สำหรับอัพโหลดไฟล์



การอ้างอิงการใช้งาน



หลักๆ แนวทางการส่งข้อมูลไปใช้งานกับ Server Side Script อย่าง PHP ก็จะปะรมาณนี้

สำหรับการจัดการในฝั่ง Client หรือฝั่งผู้ใช้งาน อย่างเช่น การกำหนด style ด้วยการใช้งาน CSS 
หรือการทำงานด้วย JavaScript โดยทั่วไป จะเป็นการจัดการ id และ class ของ elements 
และต้องมีความเข้าใจเกี่ยวกับ DOM ประกอบด้วย 
    เราสามารถใช้งาน javascript โดยไม่ต้องไปกำหนด ใน element นั้นได้ หรือ ถ้าใช้งาน jQuery ก็จะสะดวกและง่ายขึ้น



หรือ ถ้าเราไม่อยากยุ่งเกี่ยวกับ element เช่นไม่ต้องการกำหนด onChange ให้กับ input โดยตรง ก็สามารถกำหนดแยกมาในส่วนของ javascript ได้




ข้างต้นเราจะเห็นว่า มีการใช้งาน id ร่วมกับ Client side script อย่าง JavaScript รวมถึงใช้งานร่วมกับ การกำหนด style ด้วย CSS
ค่า id เป็นค่า เฉพาะ ไม่ควรกำหนดซ้ำกัน จริงๆ ก็คือห้ามกำหนดซ้ำกัน แต่ปกติ ถ้าไม่ได้นำไปใช้งาน ก็จะไม่มีผล
ดูตัวอย่างผลลัพธ์ 


เมื่อเราเปลี่ยนแปลงค่าใน ข่องแรก ที่เป็น ราคา 150 และกำหนดจำนวน เท่ากับ 3 ในช่องที่ 2 ผลลัพธ์ ที่ราคาสุทธิในช่องที่ 3 ก็จะเท่ากับ
ผลคูณของสองค่าแรก ซึ่งเป็นการไปทำงานใน event onchange ของ input qty และ input price เรียกใช้ฟังก์ชั่นคำสั่ง calc_price()

>>>  อัพเดท >>> 29-08-2019
------------------------------------------

อย่างไรก็ตาม การกำหนดด้วย id รวมถึงการเรียกใช้งานโดยอ้างอิงผ่าน id จะเหมาะกับรายการที่มีจำนวนไม่มาก หรือรายการที่ไม่ได้เป็น
ในลักษณะของชุดรายการ ที่มีหลายอัน 
    สำหรับรายการที่เป็นแบบชุดรายการ หรือมีหลายอัน จะเหมาะสำหรับการใช้งาน class แทน ดังนี้



หรือ




เมื่อไรก็ตาม ที่เป็นการอ้างอิง element หลายๆ รายการ หรือเป็นชุด เราควรใช้เป็น class แทน 
โดยเมื่อเป็น class การอ้างอิง ก็จะมีเรื่องของ array เข้ามาเกี่ยวกับ 




ตัวอย่างผลลัพธ์



จะเห็นการเรียกใช้งาน javascript แบบแยกไม่ยุ่งเกี่ยวกับ ตัว element ในฟอร์ม จะใช้การอ้างอิงจาก id หรือ class แล้วแต่กรณี
นอกจากวิธีข้างต้น เรายังสามารถใช้งาน jQuery ที่ทำการให้การงานง่านขึ้นกว่าเดิม เป็นดังนี้แทนได้



หรือจะแบบนี้ก็ได้