Page History

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

embedded	true

...

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>

Page tree

Versions Compared

Old Version 5

New Version 6

Key