I really want to make this
http://greyhead.net/chronoforms/adding-a-character-counter-to-a-textarea
but i really can't find anything from the tutorial in chronoforms V4
Could you please tell me how can i do this in V4
http://greyhead.net/chronoforms/adding-a-character-counter-to-a-textarea
but i really can't find anything from the tutorial in chronoforms V4
Could you please tell me how can i do this in V4
Hi netera,
It only needs a few changes to work in CFv4.
[list=a]Add a textarea element to your form. Mine has the name 'input_textarea_0'
Copy the name into the Field ID box in the element configuration.
Scroll down and put this code into the "instructions for Users" box
Save the textarea
Drag a Load JavaScript action onto the On Load Event for the form
Add this code to the Code box for the action
Change the secodn line to match the id of your textarea if it is different.
Save the action and the form and test. [/list:o]
Bob
It only needs a few changes to work in CFv4.
[list=a]
50 chars max <span id='counter'>50</spawindow.addEvent('load', function() {
var textarea = $('input_textarea_0');
// execute the check after each keystroke
textarea.addEvent('keyup', function() {
// set the maximum number of characters
max_chars = 50;
// get the current value of the input field
current_value = textarea.value;
// get current character count
current_length = current_value.length;
// calculate remaining chars
remaining_chars = max_chars - current_length;
// show the remaining characters
// Change color if remaining chars are five or less
if ( remaining_chars <= 5 ) {
textarea.setStyle('background-color', '#F88');
textarea.value = textarea.value.substring(0, max_chars-1);
if ( remaining_chars <= 0 ) {
remaining_chars = 0;
}
} else {
textarea.setStyle('background-color', 'white');
}
$('counter').innerHTML = remaining_chars;
});
});Bob
I have built a form using a custom element, but I cannot figure out how to set the maximum characters. Here is the code...
<div class="ccms_form_element cfdiv_textarea" id="outputs_container_div" style=""><label for="outputs"></label>
<textarea name="outputs" id="outputs" rows="10" cols="100">
</textarea>
<div class="small-message">3200 chars max <span id='counter'>3200</span></div>
</div>
The small message shows up, but the counter does not decline when I type.
This works when I use the wizard to make the textarea.
<div class="ccms_form_element cfdiv_textarea" id="outputs_container_div" style=""><label for="outputs"></label>
<textarea name="outputs" id="outputs" rows="10" cols="100">
</textarea>
<div class="small-message">3200 chars max <span id='counter'>3200</span></div>
</div>
The small message shows up, but the counter does not decline when I type.
This works when I use the wizard to make the textarea.
Ah, sorry...
window.addEvent('load', function() {
var textarea = $('outputs');
// execute the check after each keystroke
textarea.addEvent('keyup', function() {
// set the maximum number of characters
max_chars = 3200;
// get the current value of the input field
current_value = textarea.value;
// get current character count
current_length = current_value.length;
// calculate remaining chars
remaining_chars = max_chars - current_length;
// show the remaining characters
// Change color if remaining chars are five or less
if ( remaining_chars <= 5 ) {
textarea.setStyle('background-color', '#F88');
textarea.value = textarea.value.substring(0, max_chars-1);
if ( remaining_chars <= 0 ) {
remaining_chars = 0;
}
} else {
textarea.setStyle('background-color', 'white');
}
$('counter').innerHTML = remaining_chars;
});
});
window.addEvent('load', function() {
var textarea = $('outputs');
// execute the check after each keystroke
textarea.addEvent('keyup', function() {
// set the maximum number of characters
max_chars = 3200;
// get the current value of the input field
current_value = textarea.value;
// get current character count
current_length = current_value.length;
// calculate remaining chars
remaining_chars = max_chars - current_length;
// show the remaining characters
// Change color if remaining chars are five or less
if ( remaining_chars <= 5 ) {
textarea.setStyle('background-color', '#F88');
textarea.value = textarea.value.substring(0, max_chars-1);
if ( remaining_chars <= 0 ) {
remaining_chars = 0;
}
} else {
textarea.setStyle('background-color', 'white');
}
$('counter').innerHTML = remaining_chars;
});
});
Hi rstevens,
I just saw your other post - the form linked from there doesn't have an 'outputs' textarea.
Please post a link to the form - if this is a different one - so I can take a quick look.
Bob
I just saw your other post - the form linked from there doesn't have an 'outputs' textarea.
Please post a link to the form - if this is a different one - so I can take a quick look.
Bob
I am able to get the character counter to work in a textarea, but not in subsequent ones.
I added a second Load JS with the same code as the first one, changed the variable name to match the id of the second textarea, but the counter for the second textarea doesn't work. I tried changing counter to counter1, but that didn't work either. Any suggestions?
window.addEvent('load', function() {
// execute the check after each keystroke
$('outcomes_impacts').addEvent('keyup', function() {
// set the maximum number of characters
max_chars = 3200;
// get the current value of the input field
current_value = $('outcomes_impacts').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;
});
});
I added a second Load JS with the same code as the first one, changed the variable name to match the id of the second textarea, but the counter for the second textarea doesn't work. I tried changing counter to counter1, but that didn't work either. Any suggestions?
window.addEvent('load', function() {
// execute the check after each keystroke
$('outcomes_impacts').addEvent('keyup', function() {
// set the maximum number of characters
max_chars = 3200;
// get the current value of the input field
current_value = $('outcomes_impacts').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;
});
});
This topic is locked and no more replies can be posted.
