TEST : Show characters count in text area field with ConfiForms Field Definition Rule of JavaScript type

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)


Start typing something inside the text area below

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');
  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>