Forums

Hi,

I only started using CF and the forum has been invaluable so far. For what I need to do next I haven't found anything, so thank you for taking the time to read my post and help out if possible!

In one of the textareas in my form the user is able to enter as much text as possible. However, I need to know how much text has been entered prior to submitting the form, as the amount of words entered in the box are used to calculate a price.

So for example, if someone enters "Great new service, check out today for free!" I need the form to autofill and display "8" below the textarea. This information should be both visible to the person filling out the form, to the database and for submission/redirect.

The data from this (e.g. the number of words) then needs to be multplied by another number depending on which option (service) the user requires, and the result of this is required for connecting the form to PayPal or similar for the correct pricing. Ideally I would also need to modify the way words are counted, and to exclude code from the word count, but this is so much further down the line that I thought I'd start with this. Uff!

Is this possible with CF? If so, can you help me out and get me into the direction on how to make this possible?

Hi huzzuzu,

Here's one that I wrote for the ChronoForms book a couple of weeks ago. This one counts down from 50 but you can easily change to to count up.:

We’re going to add some JavaScript to the Form JavaScript box to count the characters.

window.addEvent('load', function() {
  // execute the check after each keystroke
  $('text_0').addEvent('keyup', function() {
    // set the maximum number of characters
    max_chars = 50;
    // get the current value of the input field
    current_value = $('text_0').value;
    // get current character count
    current_length = current_value.length;
    // calculate remaining chars 
    remaining_chars = max_chars-current_length;
    // show the remaining characters
    $('counter').innerHTML = remaining_chars;
  });
});

We’re going to want to show the results of our calculation on the form somewhere so we’ll add some extra text to the textarea label

<label class="cf_label" style="width: 150px;">50 chars max
<br /><span id='counter'>50</span> chars left</label>

That span, with id='counter' is where we’ll show the characters remaining.

Bob

Thank you for that very fast reply Bob,
I got this to work - now I have to dig in and figure out how to adapt it for my needs!

What I have done so far is the following:

<div class="form_item">
  <div class="form_element cf_textarea">
    <label class="cf_label" style="width: 150px;">or<br>Enter Text.<br>The word count will automatically display.</label>
    <textarea class="cf_inputbox" rows="3" id="text_12" title="" cols="30" name="text_12" onkeyup="wordcount(this.value)"></textarea>
	<script type=""text/javascript"">
     var cnt;
     function wordcount(count) {
     var words = count.split(/\s/);
     cnt = words.length;
     var ele = document.getElementById('w_count');
     ele.value = cnt;
}
     document.write("<input type=text id=w_count size=4 readonly>");
</script>
    <a class="tooltiplink" onclick="return false;"><img height="16" border="0" width="16" class="tooltipimg" alt="" src="components/com_chronocontact/css/images/tooltip.png"/></a>
		
			
  </div>

This works fine - now the next step! How can I use text id=w_count to autofill a hidden field for the calculation (being based on another value that is attributed to the user's selection from a checkbox item?)

Hope this is clear!

Hi, Many thanks for this but I must be doing something wrong, it's not working for me.

I am using chronoforms 4.0 RC3.11.

In the Wizard edit, I added a "Load JS" event as the first event. I have 3 text areas that I want to limit the number of characters submitted in. The first is 'interest'.

I added this code to the Load JS event, taken from this post and the additional function of warning the user when they are coming to the limit by turning the background red and trimming the input, from the Chronoforms book.

    window.addEvent('load', function() {
      // execute the check after each keystroke
      $('interest').addEvent('keyup', function() {
        // set the maximum number of characters
        int_max_chars = 1000;
        // get the current value of the input field
        int_current_value = $('interest').value;
        // get current character count
        int_current_length = int_current_value.length;
        // calculate remaining chars
        int_remaining_chars = int_max_chars - int_current_length;
        // show the remaining characters
       // $('int_counter').innerHTML = int_remaining_chars;

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

    });

The label text for the interest field is

<br />Please explain why you are interested in attending this workshop and what you hope to gain from it.  <br /><span id='int_counter'></span> characters left

If I put '1000' in the int_counter span, it never changes. As it is, nothing ever shows there.

What am I doing wrong?

Many thanks.

Hi dnigra,

I believe that this CFv3 script works OK with CFv4 (see this post).

Please post a link to the form so I can take a quick look.

Bob

PS You should probably upgrade ChronoForms to the latest version as there have been some bug fixes and improvement - though this isn't the problem here as far as I can see.

You can see a test form here:
http://www.psc.edu/index.php?option=com_chronoforms&chronoform=Test1000Limit

The limit is set to 10 chars because 1000 is too much to type!

Thanks again.

Hi dnigra,

My fault, there is a } missing near the end:

            $('int_counter').innerHTML = int_remaining_chars;
        }
    });
});

Bob

Hi Greyhead,

Actually, shouldn't the missing bracket go just before the

else

:

...
 // Change color if there are less than 5 chars remaining
   if (int_remaining_chars <=5) {
     $('interest').setStyle('background-color', '#F88');
     $('interest').value = $('interest').value.substring(0,int_max_chars-1);
  if (int_remaining_chars <=0) {
   int_remaining_chars=0;
  }
}
  else {
    $('interest').setStyle('background-color', 'blue');
  }
// show the remaining characters
  $('int_counter').innerHTML = int_remaining_chars;
      });

    });

But it still doesn't work. I set the background to be blue on page load as a visible marker that I'm getting closer, but that doesn't happen either.

The order of events on load is
Load JS
Show html
Load CSS
load Captcha

Thank you again.

Hi dnigra,

Now please add the id interest to the textarea, that's missing at present and the JavaScript uses it to identify the element to count.

Bob

That's it! Thanks again!