ต้องการให้ 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(
'<label style="display: inline;"><input id="' +
id +
'" name="' +
id +
'" type="checkbox" value="Y"> Click to Edit</label>'
);
$("#" + 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>