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)
ConfiForms (FormView) Registrations Control | ||
---|---|---|
| ||
...
HTML |
---|
<script> function addCounter(formName, formId) { var taElem = AJS.$('#' + formId).find('#i_ta'); if (!taElem.hasClass('cfcounter')) { taElem.addClass('cfcounter'); taElem.after('<div id="i_taCharNum">10 characters left</div>'); taElem.on("input", function(){ var maxlength = 10; var currentLength = AJS.$(this).val().length; if( currentLength >= maxlength ){ AJS.$('#i_taCharNum').html("0 chars left"); }else{ AJS.$('#i_taCharNum').html(maxlength - currentLength + " chars left"); } }); } } </script> |
Storage format
Code Block |
---|
<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');
if (!taElem.hasClass('cfcounter')) {
taElem.addClass('cfcounter');
taElem.after('<div id="i_taCharNum">10 characters left</div>');
taElem.on("input", function(){
var maxlength = 10;
var currentLength = AJS.$(this).val().length;
if( currentLength >= maxlength ){
AJS.$('#i_taCharNum').html("0 chars left");
}else{
AJS.$('#i_taCharNum').html(maxlength - currentLength + " chars left");
}
});
}
}
</script>]]></ac:plain-text-body>
</ac:structured-macro>
|