Simple demo to show how to use Javascript function with ConfiForms Field Definition Rule
We just add a counter to textarea field and track the user input (there is no validation here, it is just a demo on how to glue together ConfiForms field definition rule with custom JavaScript function and how to access the form field)
<script> function addCounter(formName, formId) { var taElem = AJS.$('#' + formId).find('#i_ta'); // find the "textare field" by name "ta" if (!taElem.hasClass('cfcounter')) { taElem.addClass('cfcounter'); // this is sort of a marker that tells if the "counter div" is initialized taElem.after('<div id="i_taCharNum">10 characters left</div>'); // setup handler taElem.on("input", function(){ var maxlength = 10; var currentLength = AJS.$(this).val().length; var charsLeft = maxlength - currentLength; AJS.$('#i_taCharNum').html(Math.max(0, charsLeft, charsLeft) + " chars left"); }); } } </script> |
Storage format
<ac:structured-macro ac:macro-id="cc63f296-c16b-49ac-ae4c-4f4df68a6c7a" ac:name="confiform-entry-register" ac:schema-version="1"> <ac:parameter ac:name="embedded">true</ac:parameter> <ac:rich-text-body> <p> <br/> </p> </ac:rich-text-body> </ac:structured-macro> <ac:structured-macro ac:macro-id="4fd4a40e-d0a0-47b0-82f7-7f034a606568" ac:name="confiform" ac:schema-version="1"> <ac:parameter ac:name="formName">myform1</ac:parameter> <ac:rich-text-body> <p> <ac:structured-macro ac:macro-id="abdd5765-8d68-4fc9-8d9f-715c68fdeddc" ac:name="confiform-field-definition" ac:schema-version="1"> <ac:parameter ac:name="fieldName">ta</ac:parameter> <ac:parameter ac:name="fieldLabel">ta</ac:parameter> <ac:parameter ac:name="type">textarea</ac:parameter> </ac:structured-macro> </p> <p> <ac:structured-macro ac:macro-id="24c415b4-ba74-429b-a651-cf9521913dab" ac:name="confiform-field-definition-rules" ac:schema-version="1"> <ac:parameter ac:name="values">addCounter(formName, formId);</ac:parameter> <ac:parameter ac:name="action">Run custom JavaScript</ac:parameter> </ac:structured-macro> </p> </ac:rich-text-body> </ac:structured-macro> <ac:structured-macro ac:macro-id="3496b6cf-5467-45eb-a4db-0cdb4c0a423e" ac:name="html" ac:schema-version="1"> <ac:plain-text-body><![CDATA[<script> function addCounter(formName, formId) { var taElem = AJS.$('#' + formId).find('#i_ta'); // find the "textare field" by name "ta" if (!taElem.hasClass('cfcounter')) { taElem.addClass('cfcounter'); // this is sort of a marker that tells if the "counter div" is initialized taElem.after('<div id="i_taCharNum">10 characters left</div>'); // setup handler taElem.on("input", function(){ var maxlength = 10; var currentLength = AJS.$(this).val().length; var charsLeft = maxlength - currentLength; AJS.$('#i_taCharNum').html(Math.max(0, charsLeft, charsLeft) + " chars left"); }); } } </script>]]></ac:plain-text-body> </ac:structured-macro> |