onChange/onBeforeChange Events
This checkbox is allowed to be changed This checkbox - NOT |
Log (clear) |
This checkbox is allowed to be changed This checkbox - NOT |
Log (clear) |
<link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxform_dhx_skyblue.css"> <script src="../../codebase/dhtmlxcommon.js"></script> <script src="../../codebase/dhtmlxform.js"></script> <style> div#simpleLog { width: 500px; height: 200px; font-family: Tahoma; font-size: 11px; overflow: auto; } span.allow { color: green; } span.deny { color: red; } </style> <script></script> <table> <tr><td><div id="myForm"></div></td></tr> <tr><td><b>Log (<a href="javascript:void(0);" onclick="clearLog();">clear</a>)</b></td></tr> <tr><td><div id="simpleLog"></div></td></tr> </table>var myForm, formData, logObj; function doOnLoad() { formData = [{ type: "settings", position: "label-right" }, { item: "label", label: "Some checkboxes" }, { type: "checkbox", name: "ch_allow", value: "value_allow", label: "This checkbox is allowed to be changed" }, { type: "checkbox", name: "ch_deny", value: "value_deny", label: "This checkbox - NOT" } ]; myForm = new dhtmlXForm("myForm", formData); myForm.attachEvent("onBeforeChange", function(name, value, is_checked) { var status = (name.search(/allow/) >= 0); logEvent("onBeforeChange, item name '" + name + "', value '" + value + "', is checked '" + (is_checked ? "true": "false") + "', " + (status ? "<span class='allow'>": "<span class='deny'>not ") + "change</span><br>"); return status; }); myForm.attachEvent("onChange", function(name, value, is_checked) { logEvent("onChange, item name '" + name + "', value '" + value + "', is checked '" + (is_checked ? "true": "false") + "'<br>"); }); } function logEvent(t) { if (!logObj) logObj = document.getElementById("simpleLog"); logObj.innerHTML += t; } function clearLog() { if (!logObj) logObj = document.getElementById("simpleLog"); logObj.innerHTML = ""; }