จากบทความเดิมที่เคย เขียนเรื่อง การใช้งาน Chosen Multiple Select with Groups หลายๆแถวนั้นได้เขียนเพียงวิธีเรียกใช้งานเท่านั้น วันนี้ผู้เขียนมีวิธีการ validate ค่าให้ยังคงค้างอยู่ในช่องเดิมที่จำเป็นต้องเก็บข้อมูล
ในบทความนี้ผู้ เขียนจะอธิบายการใช้งาน view และ controller เท่านั้น ส่วนเรื่องการเรียกใช้ jquery chosen นั้นให้ผู้อ่านกลับไปติดตามได้ที่ http://my.ict.buu.ac.th/Blog/Lists/Posts/Post.aspx?List=d0721da9%2Dc945%2D475e%2Db090%2Dde88e638bbfb&ID=2314&Source=http%3A%2F%2Fmy%2Eict%2Ebuu%2Eac%2Eth%2FBlog%2FLists%2FPosts%2FAllPosts%2Easpx%3FView%3D%7BDD9DFC3A%2D3AA2%2D4515%2D925F%2D901D3A32A703%7D%26FilterField1%3DAuthor%26FilterValue1%3DPantakarn%2520Manjan&Web=67dd98eb%2D790a%2D48e8%2Dbf3d%2D7a7afa55e0b
ขั้นตอนการเขียนโปรแกรม
View
- ต้องทราบจำนวนแถวของข้อมูลที่แน่ชัด
- hidden value ของแต่ละแถวเก็บเป็น array
- สร้าง form select ให้ tag name เก็บข้อมูลเป็น array 2 มิติโดยมี class chosen-select มาช่วยจัดเรียงข้อมูล
- เช็ค validate form select
Controller
- รับค่า form input ที่เป็น array มาเก็บไว้ในตัวแปร
- เช็ค validate form โดยใช้ library ของ codeigniter
ตัวอย่างโค้ดหน้า view
echo form_open("chosen/validate_chosen");
$data = array( "Group 1"=>array("1.1 Sub Group", "1.2 Sub Group", "1.3 Sub Group"),
"Group 2"=>array("2.1 Sub Group", "2.2 Sub Group", "2.3 Sub Group"),
"Group 3"=>array("3.1 Sub Group", "3.2 Sub Group", "3.3 Sub Group"), ); // ข้อมูลตัวอย่าง
// ข้อมูลมีทั้งหมด 5 แถว
for($num=0;$num<5;$num++)
{
echo '<input type="hidden" name="ROW['.$num.']" value="'.$num.'">'; // สร้าง input form hidden เพื่อใช้เช็คข้อมูลจำนวนแถว
/*************** เอาไว้เช็ค validate ********************/
$ARR_MULTI_SELECT[$num] = array();
for($num_sel=0;$num_sel<5;$num_sel++)
{
// ถ้าค่า set_value มีข้อมูล
if( set_value("MULTI_SELECT[$num][$num_sel]")!="" ) // validate
{
$ARR_MULTI_SELECT[$num][$num_sel] = set_value("MULTI_SELECT[$num][$num_sel]"); // นำค่า value ที่เช็ค validate ไว้มาเก็บไว้ใน array
}
}
/*********************************************************/
// สร้าง form dropdown group โดยมี tag name เป็น array 2 มิติ มิติแรกให้ใส่ลำดับของแถว มิติที่ 2 ให้ใส่ช่องว่างๆเพื่อให้โปรแกรมรัน index เอง
$select_dropdown = '<select data-placeholder="" style="width:450px;" class="chosen-select" multiple name="MULTI_SELECT['.$num.'][]">
<option value=""></option>';
// นำ value ของข้อมูลตัวอย่างมาใส้ที่ dropdown
foreach($data as $key=>$sub_data)
{
$select_dropdown .= '<optgroup label="'.$key.'">';
foreach($sub_data as $index=>$val)
{
/******** เอาไว้เช็ค validate ****************/
// ถ้า value ของข้อมูลตัวตรงกับค่า value ที่ validate ในแต่ละแถวให้แสดงข้อมูล
if( in_array($val, $ARR_MULTI_SELECT[$num]) ){
$selected = "selected";
}
else
{
$selected = "";
}
/***************************************/
$select_dropdown .= '<option '.$selected.' value="'.$val.'">'.$val.'</option>';
}
$select_dropdown .= '</optgroup>';
}
$select_dropdown .= '</select>';
echo $select_dropdown.form_error("MULTI_SELECT[$num]", '<div style="color:red">', '</div>')."<br><br>";
}
echo '<input type="submit" value=" บันทึก ">';
echo form_close();
ตัวอย่างโค้ดที่ controller
public function validate_chosen()
{
// รับข้อมูล input type post
$ROW = $this->input->post("ROW");
$MULTI_SELECT = $this->input->post("MULTI_SELECT");
// โหลด library form_validation
$this->load->library('form_validation');
$this->form_validation->set_error_delimiters('', '<br>');
// วนลูปจำนวนแถว จะได้จำนวนแถวทั้งหมด
foreach($ROW as $num=>$val)
{ // ถ้าในแถวนั้นมีข้อมูลจะเข้า if
if(!empty($MULTI_SELECT[$num]))
{
foreach($MULTI_SELECT[$num] as $index=>$val)
{ // validate form MULTI_SELECT ในแถวที่ $num และตัวที่ $index
$this->form_validation->set_rules('MULTI_SELECT['.$num.']['.$index.']', "Row".($num+1), 'required|xss_clean');
}
}
else
{
// validate form MULTI_SELECT ในแถวที่ $num
$this->form_validation->set_rules('MULTI_SELECT['.$num.']', "Row".($num+1), 'required|xss_clean');
}
}
// ถ้า validate form ไม่ผ่านจะส่งข้อมูลกลับไปที่หน้า view
if ($this->form_validation->run() == FALSE)
{
$this->validate_multiselect_group();
}
}
ผลลัพธ์ที่ได้
รูปภาพที่ 1 รูปภาพ form select dropdown ก่อน validate
รูปภาพที่ 2 รูปภาพ form select dropdown หลัง validate
จะเห็นได้ว่าจาก รูปภาพที่ 1 เมื่อเลือกข้อมูลที่ต้องการแล้ว ข้อมูลจะยังคงค้างค่าไว้ให้เมื่อโปรแกรม validate ข้อมูลดังรูปภาพที่ 2 ทำให้สะดวกต่อผู้ใช้งานที่เลือกข้อมูลไปเยอะๆแล้วเผลอลืมเลือกกรอกข้อมูลที่ จำเป็นอื่นๆได้