ในกรณีที่เราสร้างฟอร์มแล้วมีตัวเลือกบางตัวที่เราต้องการให้แสดงก็ต่อเมื่อมีการเลือกตัวเลือกนั้นเช่น เรามีฟอร์มกรอกอาชีพ แพทย์, พยาบาล, อื่นๆ ถ้าหากเลือก อื่นๆ เราจะให้แสดงช่องกรอกข้อมูลเพิ่มเติม
ในกรณียังไม่ได้เลือก หรือเปิดขึ้นมาครั้งแรก
ในกรณีที่เลือกจะแสดงช่องกรอกข้อมูล
หลักการนั้นง่ายมากๆ ครับ ถ้าใครเคยเขียน JQuery มาบ้างน่าจะเข้าใจง่าย เราจะใช้ฟังก์ชัน JQuery hide(),show() เพื่อซ่อนและแสดง input ตามเงื่อนไขของเรา
ให้เราสร้างโค้ดนี้ที่ view ที่ต้องการเช่น _form.php
<?php
$this->registerJs("
var input1 = 'input[name=\"Blog[category]\"]';
setHideInput(3,$(input1).val(),'.field-blog-tag');
$(input1).click(function(val){
setHideInput(3,$(this).val(),'.field-blog-tag');
});
function setHideInput(set,value,objTarget)
{
console.log(set+'='+value);
if(set==value)
{
$(objTarget).show(500);
}
else
{
$(objTarget).hide(500);
}
}
");
?>
ฟังก์ชัน setHideInput() นี้สร้างขึ้นมาเพื่อรับค่าตามเงื่อนไขแล้วทำการซ่อนหรือแสดง input ที่เราต้องการจะมี 3 parameter ตามลำดับ
- set คือค่าที่เรากำหนดเพื่อนำไปเปรียบเทียบตามเงื่อนไข
- value ค่าที่ได้จาก input นั้นๆ ที่เราต้องการตรวจสอบ
- objTarget คือ tag ที่เราต้องการจะซ่อนหรือแสดง
ส่วนแรกเราจะประกาศค่า input เพื่อนำไปใช้ในการตรวจสอบโดยเรียกใช้งานแบบ selector ระบุ input ที่มี attribute name
= Blog[category]
ซึ่ง Blog
คือชื่อ model, category
คือชื่อฟิวด์ ง่ายๆ คลิกขวา inspect element ใน browser ดูได้ครับ
var input1 = 'input[name=\"Blog[category]\"]';
การดึงค่าใช้คำสั่ง val() ของ JQuery
$(input1).val();
เราจะต้องทำการกำหนดค่าก่อนว่าเราจะดักจับเมื่อค่าเท่ากับอะไร ในตัวอย่างนี้ ค่าอาชีพ = 3 จะให้แสดงช่องกรอกข้อมูลเพิ่มเติม ซึ่งการเรียกใช้งานมันจะมี 2 เหตการณ์
เหตุการณ์แรกคือ เมื่อเปิดฟอร์มขึ้นมาไม่ว่าจะเป็น create,update
setHideInput(3,$(input1).val(),'.field-blog-tag');
เหตุการณ์ที่สองเมื่อมีการคลิกจะใช้ส่วนนี้ดังจับ event click ของ input นั้นๆ
$(input1).click(function(val){
setHideInput(3,$(this).val(),'.field-blog-tag');
});
ในส่วน element หรือ tag ที่เราต้องการจะซ่อนนั้นสามารถดูได้ง่ายๆ เพียงคลิก inspect element นั้นที่ต้องการจะซ่อน
จากนั้นเลื่อนขึ้นนิดนึงมันจะมี tag ครอบ input อยู่และจะมีชื่อ class ของ css กำกับตามชื่อฟิวด์นั้นๆ เราสามารถนำชื่อนี้มาเป็นตัวอ้างอิงในการซ่อนแสดงได้ ในตัวอย่างนี้คือ field-blog-tag
เมื่อลองคลิกค่าเมื่อเลือก อื่นๆ จะแสดงช่องกรอกข้อมูลให้ แต่ถ้าหารเลือกอาชีพอื่นๆ จะซ่อนไว้
ในกรณีที่ต้องการใช้หลายๆ ฟิวด์ก็แค่สร้างชึ้นมาอีกชุด แต่ใช้ฟังก์ชันเดียวกัน
var input1 = 'input[name=\"Blog[category1]\"]';
setHideInput(3,$(input1).val(),'.field-blog-tag');
$(input1).click(function(val){
setHideInput(3,$(this).val(),'.field-blog-tag');
});
var input2 = 'input[name=\"Blog[category2]\"]';
setHideInput(1,$(input2).val(),'.field-blog-other');
$(input2).click(function(val){
setHideInput(1,$(this).val(),'.field-blog-other');
});
เป็นตัวอย่างง่ายๆ นะครับ ลองใช้กันดู
ชื่อฟิวด์ในตัวอย่างอาจจะไม่ตรงกับความเป็นจริงซักเท่าไหร่ผมทำตัวอย่างจากฟอร์มเดิมๆ ครับไม่ต้องสนใจนะ
@dixonsatit