ต้องการให้ user ต้องคลิก Click to Edit เพื่อที่จะแก้ไขข้อมูล ที่เป็นข้อมูลที่สำคัญๆ เพื่อป้องกันการบันทึกข้อมูลโดยไม่ตั้งใจ
เพื่อที่จะสามารถ reused code นี้ไปใช้ในฟอร์มอื่นๆ จึงเขียนไว้ในไฟล์กลาง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | /*pitt phunsaniteditable inputversion 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 ตามตัวอย่าง
1 2 3 4 5 6 7 8 | <script src="/jw/assets/scripts.js"></script><script>$(document).ready(function () {clickToEdit(['firstname', 'surname', 'middlename']);});</script> |