ต้องการให้ user ต้องคลิก Click to Edit เพื่อที่จะแก้ไขข้อมูล ที่เป็นข้อมูลที่สำคัญ ๆ เพื่อป้องกันการบันทึกข้อมูลโดยไม่ตั้งใจ เพื่อที่จะสามารถ reused code นี้ไปใช้ในฟอร์มอื่น ๆ จึงเขียนไว้ในไฟล์กลาง
/*
pitt phunsanit
editable input
version 1
*/
function clickToEdit (inputs) {
$.each (inputs, function (key, value) {
let id = value + "EditFlag";
let input = FormUtil.getField (value) ; input
.attr ("readonly", true) .closest (".form-cell") .append;
$ ("#" + id) .on ("change", function () {
if ($ (this) .prop ("checked") == true) {
input.prop ("readonly", false) ;
} else {
input.prop ("readonly", true) ;
}
}) ;
}) ;
}
การใช้งานเพียงแค่เรียกใช้ function ถ้าต้องการให้คลิกเพื่อแก้ไข input id firstname, surname, middlename ก็เขียน JavaScript ตามตัวอย่าง
<script src="/jw/assets/scripts.js"></script>
<script>
$ (document) .ready (function () { clickToEdit (['firstname', 'surname', 'middlename']) ; }) ;
</script>