Textarea form field, limit the number of characters

Go

GoleyC 15 Jan, 2012

We would like to limit the number of characters allowed to be used within a textarea form field. We cannot find anywhere in the script section to make this possible.

Is it possible to limit the number of characters to be used in a textarea form field and how does one do it?

In addition, under the textarea script area. the tab Editors has a spelling mistake within it:

Wditor Height should be Editor Height

Craig

Gr

GreyHead 15 Jan, 2012

Hi Craig,

There's a textarea counter script from the ChronoForms Book here. It was written for CFv3 but I think it will also work on CFv4.

You can fix the typo in line 50 of administrator/components/com_chronoforms/form_elements/input_textarea.ctp There are a few sprinkled through the component :-(

Bob

Go

GoleyC 15 Jan, 2012

Our code output does not have this information in it. So I don't think this will work. Do you have any other suggestions or ideas?

Gr

GreyHead 15 Jan, 2012

Hi Craig,

What code output doesn't have what information exactly?

Bob

Go

GoleyC 15 Jan, 2012

This part:

3. 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;
});
});

This is the only code that was found:

window.addEvent('load', function() {

For starters, when creating the form, there is no place to even limit the maximum number of characters allowed. So right out of the gate, these instructions do not work for the ChronoForm 4.0 RC3 release.

Hope we can get a work around for this, as we all know users will make the description as long as they can even though we only want a maximum of 750 characters.

Craig

Go

GoleyC 15 Jan, 2012

Here is what our form HTML output looks like:

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-gb" lang="en-gb" >
<head>
<script src="http://www.modelrailroadsource.com/components/com_chronoforms/js/formcheck/formcheck-yui.js" type="text/javascript"></script>

  <script src="http://www.modelrailroadsource.com/components/com_chronoforms/js/formcheck/formcheck-max.js" type="text/javascript"></script>
  <script src="http://www.modelrailroadsource.com/components/com_chronoforms/js/formcheck/lang/en.js" type="text/javascript"></script>
  <script src="/libraries/gantry/js/gantry-smartload.js" type="text/javascript"></script>
  <script src="/libraries/gantry/js/gantry-inputs.js" type="text/javascript"></script>
  <script src="/templates/rt_modulus_j16/js/load-transition.js" type="text/javascript"></script>
  <script src="/modules/mod_roknavmenu/themes/fusion/js/fusion.js" type="text/javascript"></script>

  <script type="text/javascript">

	var RecaptchaOptions = {
		theme : 'white',
		lang  : 'en'
	};
    		
//<![CDATA[
			window.addEvent('domready', function() {
				$('chronoform_BusinessDirectoryUpdate').addClass('hasValidation');
								formCheck_BusinessDirectoryUpdate = new FormCheckMax('chronoform_BusinessDirectoryUpdate', {
									onValidateSuccess: $empty,
					display : {
						showErrors : 0,
						errorsLocation: 1					}
				});										
			});
			
//]]>
function keepAlive() {	var myAjax = new Request({method: "get", url: "index.php"}).send();} window.addEvent("domready", function(){ keepAlive.periodical(1740000); });
window.addEvent('domready', function() {new GantrySmartLoad({'offset': {'x': 200, 'y': 200}, 'placeholder': '/templates/rt_modulus_j16/images/blank.gif', 'exclusion': ['']}); });
  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-8904207-2']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
		
InputsExclusion.push('.content_vote','\#rt-popup','\#vmMainPage')
window.addEvent("domready", function(){ new SmoothScroll(); });
            window.addEvent('domready', function() {
                new Fusion('ul.menutop', {
                    pill: 0,
                    effect: 'slide and fade',
                    opacity:  1,
                    hideDelay:  100,
                    centered:  0,
                    tweakInitial: {'x': -5, 'y': -18},
                    tweakSubsequent: {'x':  1, 'y':  -6},
                    tweakSizes: {'width': 20, 'height': 20},
                    menuFx: {duration:  100, transition: Fx.Transitions.Circ.easeOut},
                    pillFx: {duration:  400, transition: Fx.Transitions.Back.easeOut}
                });
            });
            
window.addEvent('domready', function() {
});
window.addEvent('load', function() {
});

  </script>
</head>
	<body  class="topblock-overlay-dark showcaseblock-overlay-dark footerblock-overlay-light fixedheader-0 readonstyle-button font-family-modulus font-size-is-default menu-type-fusionmenu inputstyling-enabled-1 typography-style-light col12 option-com-chronoforms menu-home">
		<div id="rt-page-surround">
						<div id="rt-top-surround">
				<div id="rt-top-surround2">
															<div id="rt-header"><div id="rt-header2">
						<div class="rt-container">
							

<div class="rt-grid-2 rt-alpha">
    			<div class="rt-block logo-block">
				    	    		<a href="/" id="rt-logo"></a>
				    		</div>
	    
</div>
<div class="rt-grid-8">
    	<div class="rt-block menu-block">
		<div class="rt-fusionmenu">
<div class="nopill">
<div class="rt-menubar">
    <ul class="menutop level1 " >

                        <li class="item101 active root" >
                        	                <a class="orphan item bullet" href="http://www.modelrailroadsource.com/"  >
                    <span>
                                        Home                                                            </span>
                </a>
            
                    </li>
                                <li class="item540 root" >
                        	                <a class="orphan item bullet" href="/product-news"  >

                    <span>
                                        Product News                                                            </span>
                </a>
            
                    </li>
                                <li class="item541 root" >
                        	                <a class="orphan item bullet" href="/product-reviews"  >
                    <span>
                                        Product Reviews                                                            </span>

                </a>
            
                    </li>
                                <li class="item526 parent root" >
                        	                <a class="daddy item bullet" href="/directory"  >
                    <span>
                                        Directory                                                            <span class="daddyicon"></span>
                                        </span>
                </a>

            
                                                <div class="fusion-submenu-wrapper level2 " style="width:180px;">
                        
                        <ul class="level2" style="width:180px;">
                                                                                                        <li class="item527" >
                        	                <a class="orphan item bullet" href="/directory/business-directory"  >
                    <span>
                                        Business Directory                                                            </span>
                </a>
            
                    </li>

                                                                                                                                                <li class="item528" >
                        	                <a class="orphan item bullet" href="/directory/clubs-associations"  >
                    <span>
                                        Clubs & Associations                                                            </span>
                </a>
            
                    </li>
                                                                                            </ul>

                                                <div class="drop-bot"></div>
                    </div>
                                    </li>
                                <li class="item597 parent root" >
                            <span class="daddy item bullet nolink">
                    <span>
                                            Community                                                            <span class="daddyicon"></span>
                                        </span>

                </span>
            
                                                <div class="fusion-submenu-wrapper level2 " style="width:180px;">
                        
                        <ul class="level2" style="width:180px;">
                                                                                                        <li class="item539" >
                        	                <a class="orphan item bullet" href="/community/forum"  >
                    <span>
                                        Forum                                                            </span>
                </a>

            
                    </li>
                                                                                                                                                <li class="item602" >
                        	                <a class="orphan item bullet" href="/community/calendar/month.calendar/2012/01/15/-"  >
                    <span>
                                        Calendar                                                            </span>
                </a>
            
                    </li>
                                                                                            </ul>

                                                <div class="drop-bot"></div>
                    </div>
                                    </li>
                                <li class="item567 parent root" >
                        	                <a class="daddy item bullet" href="/about-modelrailroadsource"  >
                    <span>
                                        About                                                            <span class="daddyicon"></span>
                                        </span>

                </a>
            
                                                <div class="fusion-submenu-wrapper level2 " style="width:180px;">
                        
                        <ul class="level2" style="width:180px;">
                                                                                                        <li class="item568" >
                        	                <a class="orphan item bullet" href="/about-modelrailroadsource/contactform-mrrsource"  >
                    <span>
                                        Contact Us                                                            </span>
                </a>

            
                    </li>
                                                                                                                                                <li class="item569" >
                        	                <a class="orphan item bullet" href="/about-modelrailroadsource/terms-of-use"  >
                    <span>
                                        Terms of Use                                                            </span>
                </a>
            
                    </li>
                                                                                                                                                <li class="item570" >

                        	                <a class="orphan item bullet" href="/about-modelrailroadsource/privacy-statement"  >
                    <span>
                                        Privacy Policy                                                            </span>
                </a>
            
                    </li>
                                                                                            </ul>

                                                <div class="drop-bot"></div>
                    </div>

                                    </li>
                    </ul>
</div>
<div class="clear"></div>
</div>
</div>	</div>
	
</div>
<div class="rt-grid-2 rt-omega">
    	    <div class="rt-block loginbutton-block">
			<div id="rt-login-button">
							<a href="#" class="readon buttontext" rel="rokbox[385 160][module=rt-popuplogin]">

					<span class="desc">Logout MRRSource</span>
				</a>
						</div>
		</div>
		
</div>
							<div class="clear"></div>
						</div>
					</div></div>

									</div>
				<div id="top-shadow"></div>
			</div>
						<div id="rt-body-bg" class="rt-hidden">
				<div class="rt-container">
										<div id="rt-drawer">
						<div class="rt-container">
														<div class="clear"></div>
						</div>

					</div>
															<div id="rt-body-surround" class="body-style-light">
																																			              
<div id="rt-main" class="mb12">
	<div class="rt-container">
		<div class="rt-grid-12">
															<div class="rt-block">
						<div id="rt-mainbody">
							<div class="component-content rt-joomla">
								<form action="http://www.modelrailroadsource.com/index.php?option=com_chronoforms&chronoform=BusinessDirectoryUpdate&event=submit" name="BusinessDirectoryUpdate" id="chronoform_BusinessDirectoryUpdate" method="post" class="Chronoform"><div class="ccms_form_element cfdiv_header" id="autoID-5178228bc2149f9c581dcbdabfb50121_container_div"><p>Thanks for taking the time to submit and update the business information located in the ModelRailroadSource.com business directory.</p>

<p>Please remember, the more information a company provides, the better the directory will be in helping model railroad members to locate and utilize the directory.</p>
<p>Furthermore, all information will be validated against the company website. If we find that there is a discrepancy between the two, we'll make every effort to contact the business to verify the information. Only valid information will be accepted and published in the directory.</p>
<p>If you wish to have the business information removed, we will need an email from the company so that we know it is a valid removal submission, those submissions can be sent to info @ modelrailroadsource.com.</p><div class="clear"></div></div><div class="ccms_form_element cfdiv_header" id="autoID-cf13f932d0519a41852f050ca948c124_container_div"><p><strong>Submitters Contact Information</strong></p><div class="clear"></div></div><div class="ccms_form_element cfdiv_text" id="firstname_container_div"><label for="firstname">First Name</label><input id="firstname" maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="first_name" />
<div class="clear"></div><div id="error-message-first_name"></div></div><div class="ccms_form_element cfdiv_text" id="lastname_container_div"><label for="lastname">Last Name</label><input id="lastname" maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="last_name" />
<div class="clear"></div><div id="error-message-last_name"></div></div><div class="ccms_form_element cfdiv_text" id="submittersemail_container_div"><label for="submittersemail">Email</label><input id="submittersemail" maxlength="150" size="30" class=" validate['required','email']" title="" type="text" value="" name="submitters_email" />
<div class="clear"></div><div id="error-message-submitters_email"></div></div><div class="ccms_form_element cfdiv_header" id="autoID-f1dab6d7a893260ee6f652b18aca3264_container_div"><p><strong>Business Information</strong></p><div class="clear"></div></div><div class="ccms_form_element cfdiv_text" id="businessname_container_div"><label for="businessname">Business Name</label><input id="businessname" maxlength="150" size="30" class="" title="" type="text" value="" name="business_name" />
<div class="clear"></div><div id="error-message-business_name"></div></div><div class="ccms_form_element cfdiv_text" id="address1_container_div"><label for="address1">Address Line 1</label><input id="address1" maxlength="150" size="30" class="" title="" type="text" value="" name="address1" />

<div class="clear"></div><div id="error-message-address1"></div></div><div class="ccms_form_element cfdiv_text" id="address2_container_div"><label for="address2">Address Line 2</label><input id="address2" maxlength="150" size="30" class="" title="" type="text" value="" name="address2" />
<div class="clear"></div><div id="error-message-address2"></div></div><div class="ccms_form_element cfdiv_text" id="city_container_div"><label for="city">City</label><input id="city" maxlength="150" size="30" class="" title="" type="text" value="" name="city" />
<div class="clear"></div><div id="error-message-city"></div></div><div class="ccms_form_element cfdiv_text" id="state_container_div"><label for="state">State</label><input id="state" maxlength="150" size="30" class="" title="" type="text" value="" name="state" />
<div class="clear"></div><div id="error-message-state"></div></div><div class="ccms_form_element cfdiv_text" id="zipcode_container_div"><label for="zipcode">ZipCode</label><input id="zipcode" maxlength="150" size="30" class="" title="" type="text" value="" name="zipcode" />
<div class="clear"></div><div id="error-message-zipcode"></div></div><div class="ccms_form_element cfdiv_text" id="country_container_div"><label for="country">Country</label><input id="country" maxlength="150" size="30" class="" title="" type="text" value="" name="country" />
<div class="clear"></div><div id="error-message-country"></div></div><div class="ccms_form_element cfdiv_text" id="website_container_div"><label for="website">Website URL:</label><input id="website" maxlength="150" size="30" class=" validate['required','url']" title="" type="text" value="http://www." name="website" />
<div class="clear"></div><div id="error-message-website"></div></div><div class="ccms_form_element cfdiv_text" id="email_container_div"><label for="email">Email</label><input id="email" maxlength="150" size="30" class=" validate['required','email']" title="" type="text" value="" name="email" />
<div class="clear"></div><div id="error-message-email"></div></div><div class="ccms_form_element cfdiv_text" id="phone_container_div"><label for="phone">Phone</label><input id="phone" maxlength="150" size="30" class="" title="" type="text" value="" name="phone" />
<div class="clear"></div><div id="error-message-phone"></div></div><div class="ccms_form_element cfdiv_text" id="tollfree_container_div"><label for="tollfree">Toll Free</label><input id="tollfree" maxlength="150" size="30" class="" title="" type="text" value="" name="tollfree" />

<div class="clear"></div><div id="error-message-tollfree"></div></div><div class="ccms_form_element cfdiv_text" id="fax_container_div"><label for="fax">Fax</label><input id="fax" maxlength="150" size="30" class="" title="" type="text" value="" name="fax" />
<div class="clear"></div><div id="error-message-fax"></div></div><div class="ccms_form_element cfdiv_checkboxgroup" id="scales_container_div"><label for="scales">Scales</label><input type="hidden" name="scales" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="checkbox" name="scales[]" id="scales_tt" title="" value="TT" class="validate['group[26]']" />
<label for="scales_tt">TT</label>
<input type="checkbox" name="scales[]" id="scales_z" title="" value="Z" class="validate['group[26]']" />
<label for="scales_z">Z</label>
<input type="checkbox" name="scales[]" id="scales_n" title="" value="N" class="validate['group[26]']" />
<label for="scales_n">N</label>
<input type="checkbox" name="scales[]" id="scales_hon3" title="" value="HOn3" class="validate['group[26]']" />
<label for="scales_hon3">HOn3</label>
<input type="checkbox" name="scales[]" id="scales_ho" title="" value="HO" class="validate['group[26]']" />

<label for="scales_ho">HO</label>
<input type="checkbox" name="scales[]" id="scales_on3" title="" value="On3" class="validate['group[26]']" />
<label for="scales_on3">On3</label>
<input type="checkbox" name="scales[]" id="scales_o" title="" value="O" class="validate['group[26]']" />
<label for="scales_o">O</label>
<input type="checkbox" name="scales[]" id="scales_g" title="" value="G" class="validate['group[26]']" />
<label for="scales_g">G</label>
<input type="checkbox" name="scales[]" id="scales_sn3" title="" value="Sn3" class="validate['group[26]']" />
<label for="scales_sn3">Sn3</label>
<input type="checkbox" name="scales[]" id="scales_s" title="" value="S" class="validate['group[26]']" />
<label for="scales_s">S</label>

<input type="checkbox" name="scales[]" id="scales_not_scale_specific" title="" value="Not Scale Specific" class="validate['group[26]']" />
<label for="scales_not_scale_specific">Not Scale Specific</label>
</div><div class="small-message">Check-mark all that apply. At least one has to be check-marked.</div><div class="clear"></div><div id="error-message-scales"></div></div><div class="ccms_form_element cfdiv_checkboxgroup" id="era_container_div"><label for="era">Era</label><input type="hidden" name="era" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="checkbox" name="era[]" id="era_steam_pre_1940_" title="" value="Steam [Pre-1940]" class="" />
<label for="era_steam_pre_1940_">Steam [Pre-1940]</label>
<input type="checkbox" name="era[]" id="era_steam_to_diesel_transition_1940_1960_" title="" value="Steam-to-Diesel Transition [1940-1960]" class="" />
<label for="era_steam_to_diesel_transition_1940_1960_">Steam-to-Diesel Transition [1940-1960]</label>
<input type="checkbox" name="era[]" id="era_classic_diesel_1960_1980_" title="" value="Classic Diesel [1960-1980]" class="" />
<label for="era_classic_diesel_1960_1980_">Classic Diesel [1960-1980]</label>
<input type="checkbox" name="era[]" id="era_steam_to_diesel_1938_1975_" title="" value="Steam-to-Diesel [1938-1975)]" class="" />
<label for="era_steam_to_diesel_1938_1975_">Steam-to-Diesel [1938-1975)]</label>

<input type="checkbox" name="era[]" id="era_modern_diesel_1980_present_" title="" value="Modern Diesel [1980-Present]" class="" />
<label for="era_modern_diesel_1980_present_">Modern Diesel [1980-Present]</label>
<input type="checkbox" name="era[]" id="era_products_not_era_specific" title="" value="Products Not Era Specific" class="" />
<label for="era_products_not_era_specific">Products Not Era Specific</label>
</div><div class="small-message">Check-mark all that apply.  At least one has to be check-marked.</div><div class="clear"></div><div id="error-message-era"></div></div><div class="ccms_form_element cfdiv_checkboxgroup radios_over" id="businessdays_container_div"><label for="businessdays">Business Days</label><input type="hidden" name="business_days" value="" alt="ghost" />
<div style="float:left; clear:none;"><input type="checkbox" name="business_days[]" id="business_days_monday" title="" value="Monday" class="" />
<label for="business_days_monday">Monday</label>
<input type="checkbox" name="business_days[]" id="business_days_tuesday" title="" value="Tuesday" class="" />
<label for="business_days_tuesday">Tuesday</label>
<input type="checkbox" name="business_days[]" id="business_days_wednesday" title="" value="Wednesday" class="" />
<label for="business_days_wednesday">Wednesday</label>

<input type="checkbox" name="business_days[]" id="business_days_thursday" title="" value="Thursday" class="" />
<label for="business_days_thursday">Thursday</label>
<input type="checkbox" name="business_days[]" id="business_days_friday" title="" value="Friday" class="" />
<label for="business_days_friday">Friday</label>
<input type="checkbox" name="business_days[]" id="business_days_saturday" title="" value="Saturday" class="" />
<label for="business_days_saturday">Saturday</label>
<input type="checkbox" name="business_days[]" id="business_days_sunday" title="" value="Sunday" class="" />
<label for="business_days_sunday">Sunday</label>
</div><div class="small-message">Check-mark the days open for business.</div><div class="clear"></div><div id="error-message-business_days"></div></div><div class="ccms_form_element cfdiv_textarea" id="shortdescription_container_div"><label for="shortdescription">Short Description</label><textarea id="shortdescription" cols="45" rows="12" class=" validate['required']" title="" name="short_description"></textarea>
<div class="small-message">Enter a short description about the company.</div><div class="clear"></div><div id="error-message-short_description"></div></div><div class="ccms_form_element cfdiv_header" id="autoID-c3acdae7dc1d4c0b3419554a3b7a24ac_container_div"><p>Provide any additional details or instructions the business wishes for ModelRailroadSource.com to carry out. We will try and honor such instructions, but cannot guarantee each request.</p>

<br /><div class="clear"></div></div><div class="ccms_form_element cfdiv_textarea" id="message_container_div"><label for="message">Message</label><textarea id="message" cols="45" rows="12" class="" title="" name="message"></textarea>
<div class="clear"></div><div id="error-message-message"></div></div><div class="ccms_form_element cfdiv_custom" id="input_id_20_container_div"><div id='recaptcha'><script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfErcgSAAAAAMd62wnW_qW9LuIDhTp4N8ecYf0a"></script>
        <noscript>
            <iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfErcgSAAAAAMd62wnW_qW9LuIDhTp4N8ecYf0a" height="300" width="500" frameborder="0"></iframe><br/>
            <textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea>
            <input type="hidden" name="recaptcha_response_field" value="manual_challenge"/>
        </noscript></div><div class="clear"></div><div id="error-message-input_custom_20"></div></div><div class="ccms_form_element cfdiv_submit" id="autoID-de598e7c3c13296118b5577a61e5de16_container_div"><input name="input_submit_18" class="" value="Submit" type="submit" />
 <input type='reset' name='reset' value='Reset' /><div class="clear"></div><div id="error-message-input_submit_18"></div></div><input type="hidden" name="600f284bb8a0833eb18fedd011b03277" value="1" /></form><!-- don't remove the following 3 lines if you didn't buy a subscription --> 
<div class="chronoform">
<a href="http://www.chronoengine.com">Powered By ChronoForms - ChronoEngine.com</a>

</div>
<!-- don't remove the 3 lines above if you didn't buy a subscription -->
							</div>

						</div>
						<div class="clear"></div>
					</div>
												</div>
				<div class="clear"></div>
	</div>
</div>
																	</div>
				</div>

			</div>
						<div id="rt-footer-bg" class="rt-hidden">
				<div class="rt-container">
					<div id="rt-footer-surround">
																								<div id="rt-copyright">
							<div class="rt-grid-12 rt-alpha rt-omega">
     	<div class="alternate">
                    <div class="rt-block">
								<div class="module-content">

                	

<div class="custom"  >
	<p style="text-align: center;"><a href="http://www.modelrailroadsource.com">Home</a>  |  <a href="index.php?option=com_content&view=article&id=63:about-modelrailroadsource&catid=21:our-company&Itemid=567">About MRRSource.com</a>  |  <a href="index.php?option=com_content&view=article&id=66:contactform-mrrsource&catid=21:our-company&Itemid=568">Contact Us</a></p>
<p style="text-align: center;">All external sites will open in a new browser window. ModerRailroadSource.com does not endorse external sites.<br />© 2012 ModelRailroadSource.com. All Rights Reserved.<br /> Use of modelrailroadsource.com is subject to certain <a href="index.php?option=com_content&view=article&catid=21&id=64">terms of use</a>. We respect your <a href="index.php?option=com_content&view=article&catid=21&id=65">Privacy</a>.</p></div>

					<div class="clear"></div>
				</div>
            </div>
        	</div>
	
</div>
							<div class="clear"></div>
						</div>
																	</div>
				</div>

			</div>
						              <div id="rt-popuplogin" >
                  	<div class="rt-block">
		<div class="module-content">
						<div class="module-inner">
               	<form action="/component/chronoforms/" method="post" name="form-login" id="form-login">
	<div class="login-greeting">
	Hi Model Railroad Source,	</div>

	<div class="readon">
		<input type="submit" name="Submit" class="button" value="Log out" />
	</div>

	<input type="hidden" name="option" value="com_users" />
	<input type="hidden" name="task" value="user.logout" />
	<input type="hidden" name="return" value="aW5kZXgucGhwP29wdGlvbj1jb21fY2hyb25vZm9ybXMmY2hyb25vZm9ybT1CdXNpbmVzc0RpcmVjdG9yeVVwZGF0ZSZJdGVtaWQ9MA==" />
	<input type="hidden" name="600f284bb8a0833eb18fedd011b03277" value="1" /></form>
			</div>

		</div>
	</div>
		<div class="rt-block">
		<div class="module-content">
						<div class="module-inner">
               	<div class="rokbridge_login">
<form action="/component/chronoforms/" method="post" name="login" class="log">
    <a href="forum/index.php?rb_v=ucp&i=profile&mode=avatar" title="change avatar"><span class="avatar"><img src="forum_mrrsource/download/file.php?avatar=54_1326346140.png" style="width:55px;height:52.7083333333px;vertical-align:middle;" alt="mrrsource" title="mrrsource" /></span></a>
        <h4 class="welcome">

    <p>
	Welcome back <b>Model Railroad Source</b>    </p>
  </h4>
    <div class="login-links">
        <p><a href="forum/index.php?i=pm&folder=inbox&rb_v=ucp">Messages: <b>(0 Unread)</b></a></p>
            <p><a href="forum/index.php?rb_v=ucp&i=main&mode=front">Your last visit: <b>Sun Jan 15th 2012 06:38 PM </b></a></p>

            <p><a href="forum/index.php?search_id=unanswered&rb_v=search">View unanswered posts</a></p>
            <p><a href="forum/index.php?search_id=newposts&rb_v=search">View new posts</a></p>
            <p><a href="forum/index.php?search_id=active_topics&rb_v=search">View active posts</a></p>
            <p><a href="forum/index.php?search_id=egosearch&rb_v=search">View your posts</a></p>
        <p id="form-login-submit">
      <input type="submit" name="Submit" class="button" value="Log out" title="Log out" />
    </p>

  </div>
		<input type="hidden" name="option" value="com_users" />
		<input type="hidden" name="task" value="user.logout" />
		<input type="hidden" name="return" value="Lw==" />
		<input type="hidden" name="600f284bb8a0833eb18fedd011b03277" value="1" /></form>
</div>			</div>
		</div>
	</div>
	
              </div>

											</div>
	</body>
</html>

Gr

GreyHead 18 Jan, 2012

Hi Craig,

I just ran a check and this code works OK in CFv4. You need to match up the id of the textarea - 'text_0' in the example and 'message' in your page; and you need to add the 'counter' code in a Custom element. I checked the 'Pure code' box to remove the label and used this code:

You have <span id='counter'>50</span> characters left

Bob

Go

GoleyC 23 Jan, 2012

With a good cup of coffee, we have finally got this all worked out. Took a little getting to know the action form boxes and a little java (not the cup of coffee), but all is good now!

Thanks!

Max_admin 23 Jan, 2012

Hi,

Just a note, another way to limit the characters in V4 (but the check will be made only when you try to submit) is to use this code in the "Field class":

validate["length[0,100]"]

where 100 is the max characters number.

Regards,
Max

Max, ChronoForms developer
ChronoMyAdmin: Database administration within Joomla, no phpMyAdmin needed.
ChronoMails simplifies Joomla email: newsletters, logging, and custom templates.

ar

arried 07 Feb, 2012

Nice Bob,

Question, what if i'am using multiple textbox?

Thanks

Gr

GreyHead 08 Feb, 2012

Hi arried,

Make sure that the ids are unique and you can use this on more than one textarea.

Bob

Forums

Textarea form field, limit the number of characters