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

ConfiForms Form Definition

formName	myform
registrationFormTitle	Start typing something inside the text area below

tatatextarea

addCounter(formName, formId);Run custom JavaScript

HTML

<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

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

Page tree

Versions Compared

Old Version 1

New Version Current

Key