Forums

we are using chronoforms v5 by recomendation of everyone and we are sure we'll solve this issue.
we have a multitab form inside of a conditional multipage(if condition true on page 1 goes to page 2)
our issue is that we don't know where execute js code ¿on load page 1 or in page 2? text-box is on page 2

Our js code to count Words on text-box is:

window.addEvent('load', function() {
       // execute the check after each keystroke
       $('resumen').addEvent('keyup', function() {
         // set the maximum number of words
         int_max_words = 500;   // get the current value of the input field
         s = $('resumen').value;
         s = s.replace(/(^\s*)|(\s*$)/gi,"");
		 s = s.replace(/[ ]{2,}/gi," ");
	     s = s.replace(/\n /,"\n");
         // get current words count contando los espacios
         int_current_length = s.split(' ').length;
         // calculate remaining chars
         int_remaining_words = int_max_words - int_current_length;
         // show the remaining characters

       // Change color if there are less than 5 chars remaining
    if (int_remaining_words <=5) {
      $('resumen').setStyle('background-color', '#F88');
      $('resumen').value = $('resumen').value.substring(0,int_max_words-1);
   if (int_remaining_words <=0) {
    int_remaining_words=0;
   }
   }
   else {
     $('resumen').setStyle('background-color', 'white');
   }
   $('int_counter').innerHTML = int_remaining_words;
       });
     });

our code in label field of text box with id=resumen is
<label class="cf_label" style="width: 450px;">Quedan por escribir <span id='int_counter'>500</span> palabras</label>

Hi teldrive,

The JavaScript needs to be in a Load JS action in the same event as the HTML (Render Form) action that renders that form page. It also probably needs to be before the HTML action in the event.

Bob

i debugged with firebird and I found some programming errors that I have fixed
but anyway it doesn't work
I have checked with firebug script debugging that is inserted correctly on page, but although inserted breakpoint never stopped on them

My doubt is when I have a multipage-Form ( page1 and page2) and page 2 is also multitab(tab1 and tab2) I am assuming
JS code must be defined related to event on page2 ( although tex-box is in tab2 )
window.addEvent('page2', function() {.......

<script src="http://congresoseden14.es/libraries/cegcore/assets/jquery/jquery.js" type="text/javascript"></script>
<script src="http://congresoseden14.es/libraries/cegcore/assets/bootstrap/js/bootstrap.js" type="text/javascript"></script>
<script src="http://congresoseden14.es/libraries/cegcore/assets/gplugins/gtooltip/gtooltip.js" type="text/javascript"></script>
<script src="http://congresoseden14.es/libraries/cegcore/assets/gplugins/gvalidation/gvalidation.js" type="text/javascript"></script>
<script src="http://congresoseden14.es/libraries/cegcore/assets/jquery/jquery.inputmask.js" type="text/javascript"></script>
<script type="text/javascript">window.addEvent('datostrabajo', function() {
// execute the check after each keystroke
$('resumen').addEvent('keyup', function() {
// set the maximum number of words
int_max_words = 500;
// get the current value of the input field
s = $('resumen').value;
s = s.replace(/(^\s*)|(\s*$)/gi,"");
s = s.replace(/[ ]{2,}/gi," ");
s = s.replace(/\n /,"\n");
// get current words count counting spaces
int_current_length = s.split(' ').length;
// calculate remaining chars
int_remaining_words = int_max_words - int_current_length;
// show the remaining characters
// Change color if there are less than 5 chars remaining
if (int_remaining_words <=5) {
$('resumen').setStyle('background-color', '#F88');
$('resumen').value = $('resumen').value.substring(0,int_max_words-1);
if (int_remaining_words <=0) {
int_remaining_words=0;
$('resumen').setStyle('background-color', 'red');
}
else {
$('resumen').setStyle('background-color', 'white');
}
$('int_counter').innerHTML = int_remaining_words;
}
});
});
jQuery(document).ready(function($){
});
jQuery(document).ready(function($){ $("#chronoform-enviodecomunicaciones").gvalidate(); });
jQuery(document).ready(function($){
$("#chronoform-enviodecomunicaciones").find(":input[class*=validate]").each(function(){
if($(this).attr("class").indexOf("required") >= 0 || $(this).attr("class").indexOf("group") >= 0){
var required_parent = $(this).closest(".gcore-form-row");
if(required_parent.length > 0){
var required_label = required_parent.find("label")

:P I 've got it working, issue was a JavaScript bug, i added some code to better performance in case of cut-paste(excess of 500 words can be high)
😢 But when I active WYSIWYG editor, JavaScript doesn't work can anyone help?

Here is the JS working code for text area , it makes Word count and truncate to 500 words.

window.addEvent('load', function() {
       // execute the check after each keystroke
       $('resumen').addEvent('keyup', function() {
         // set the maximum number of words
         int_max_words = 500;   // get the current value of the input field
         g = $('resumen').value;
         s = g.replace(/(^\s*)|(\s*$)/gi,"");
		 s = s.replace(/[ ]{2,}/gi," ");
	     s = s.replace(/\n /,"\n");
         // get current words converting string in array without  spaces
         int_current_array = s.split(' ');
         int_current_length = int_current_array.length;
         // calculate remaining chars
         int_remaining_words = int_max_words - int_current_length;
         // show the remaining characters
       // Change color if there are less than 5 chars remaining
    if (int_remaining_words <=5) {
      $('resumen').setStyle('background-color', 'yellow');
			//just change color to advice
   if (int_remaining_words <=0) {
   //if using copy-paste excess of words can be high
   //we truncate text to fix it and help user
   //but is complex issue because text can have symbols
   int_chars=g.length;
   while( int_current_length > int_max_words){
   $('resumen').value = $('resumen').value.substring(0,int_chars-1);
   g = $('resumen').value;
         s = g.replace(/(^\s*)|(\s*$)/gi,"");
		 s = s.replace(/[ ]{2,}/gi," ");
	     s = s.replace(/\n /,"\n");
         int_current_array = s.split(' ');
         int_current_length = int_current_array.length;
         int_chars=g.length;
   }
    int_remaining_words=0;
    $('resumen').setStyle('background-color', 'red');
   }
   }
   else {
     $('resumen').setStyle('background-color', 'white');
   }
   $('int_counter').innerHTML = int_remaining_words;

       });
     });