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 |
---|
|
|
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 = if( currentLength >= maxlength ){
AJS.$('#i_taCharNum').val("0 chars left");
}else{
AJS.$('#i_taCharNum').val(maxlength - currentLengthmaxlength - 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>
</script>ac:structured-macro>
|