Repeating onsubmit javascript for multiple text areas

Can you please show what the cftextarea renders as?

<textarea> or some kind of html editor?

@mplungjan, here a demo : http://tutorial10.learncf.com/demo/10
from here : http://tutorial10.learncf.com/

I found this page

http://forums.adobe.com/message/1020940

Which suggested using

ColdFusion.RichText.getEditorObject('your-textarea-id').GetHTML()

So what I did was I tried to modifiy the onsubmit function in the form tag so that it would check two fields.  What happened though, is it returns the form if the lenght of the first form is within the set limits.  

Here are the javascripts created, the first in the head of the document the second within the body of the document:

<script type="text/javascript">/* <![CDATA[ */
	ColdFusion.Ajax.importTag('CFTEXTAREA');
/* ]]> */</script>

<script type="text/javascript">/* <![CDATA[ */
	_cf_richtext_init_1358594951799=function()
	{
		
		
		ColdFusion.RichText.initialize('cf_textarea1358594951798', 'description', '12345', '/CFIDE/scripts/ajax/FCKeditor/', null, null, null, null, null, null, false, 'Basic', null, null, 'en');
	};ColdFusion.Event.registerOnLoad(_cf_richtext_init_1358594951799);
/* ]]> */</script>

<script type="text/javascript">/* <![CDATA[ */
	_cf_richtext_init_1358594951801=function()
	{
		
		
		ColdFusion.RichText.initialize('cf_textarea1358594951800', 'description2', '12345', '/CFIDE/scripts/ajax/FCKeditor/', null, null, null, null, null, null, false, 'Basic', null, null, 'en');
	};ColdFusion.Event.registerOnLoad(_cf_richtext_init_1358594951801);
/* ]]> */</script>
<script type="text/javascript">
<!--
    _CF_checkCFForm_1 = function(_CF_this)
    {
        //reset on submit
        _CF_error_exists = false;
        _CF_error_messages = new Array();
        _CF_error_fields = new Object();
        _CF_FirstErrorField = null;


        //display error messages and return success
        if( _CF_error_exists )
        {
            if( _CF_error_messages.length > 0 )
            {
                // show alert() message
                _CF_onErrorAlert(_CF_error_messages);
                // set focus to first form error, if the field supports js focus().
                if( _CF_this[_CF_FirstErrorField].type == "text" )
                { _CF_this[_CF_FirstErrorField].focus(); }

            }
            return false;
        }else {
            // run userdefined onSubmit javascript. 
            return testlen('description',10,'','yes');return testlen('description2',10,'','yes')
            return true;
        }
    }
//-->
</script>



<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
function testlen(field,maxlen,msg,showval){
   /*
   Validates maxlength for a CFFORM CFTEXTAREA richtext field. 
   Created by Charlie Arehart, carehart.org, 8/1/2008
   - field (required): name of rich textarea field on form to validate (case sensitive!)
   - maxlen (required): the maximum length to be permitted for the length of the textarea body (including generated html)
   - msg (optional): a message to be shown to the user, or empty string ('') to show a default message defined as "defaultmsg" below
   - showval (option): if 'yes', will show the actual generated body as part of the message
   */
   var body = ColdFusion.getElementValue(field);
   var defaultmsg = 'The ' + field + ' field must be less than ' + maxlen + ' characters.'
   // test textarea body length    
   if (body.length > maxlen) {
      // if no message is passed in, create a default one (the onsubmit in cfform seems to require all args be passed, so 3rd arg can't be left out, but an be set to '')       
        if (msg.length < 1) msg=defaultmsg;
      // show the current value, if requested       
        if (showval == 'yes') msg=(msg + '\nCurrent value (with HTML) is:\n' + body)
        
      alert(msg)
      return (false);
   }
}
//--> </SCRIPT>

Select allOpen in new window

Here is the form that renders:

<form name="CFForm_1" id="CFForm_1" action="" method="post" onsubmit="return _CF_checkCFForm_1(this)">
Description (up to 10 characters, including HTML):
<textarea name="description"  id="cf_textarea1358594951798" >12345</textarea>
<textarea name="description2"  id="cf_textarea1358594951800" >12345</textarea>




<input type="Submit">
</form>

Select allOpen in new window

I cannot believe it renders a normal textarea if you have rich text editor. But why have a rich text editor for 10 chars?

Ok

1) change

function testlen(field,maxlen,msg,showval){
   var body = ColdFusion.getElementValue(field);

to

function testlen(field,maxlen,msg,showval){
   var body = field.value;


and change

}else {
            // run userdefined onSubmit javascript. 
            return testlen('description',10,'','yes');return testlen('description2',10,'','yes')
            return true;
        }

Select allOpen in new window

to

}else {
            // run userdefined onSubmit javascript. 
           var areas = _CF_this["description"];
           if (!areas.length) areas = [areas]; // create array
           for (var i=0;i<areas.length;i++) {
              if (!testlen(areas[i],10,'','yes')) return false;
            }
            return true;
        }

Select allOpen in new window

}else {
            // run userdefined onSubmit javascript.
            return testlen('description',10,'','yes');return testlen('description2',10,'','yes')
            return true;
        }

Is generated by coldfusion from the <cfform onsubmit="return testlen('description',10,'','yes');return testlen('description2',10,'','yes')" > 

While I see what your doing, should I just take the onsubmit off the cfform, then add the javascript directly in the file.  Also, while in the example it is set to 10 characters, I will need varying lenths of 1200, 1500, and 2500 characters.

So I commented out the onsubmit in the form and added the javascript directly in the page, and it indicates that the object can not be found.  Any thoughts.

???

If the script you posted worked fo 1 field, then the amendment I suggested will work for more than one field.

I did not suggest you change the onsubmit. Why would you do that?

The first script block was autogenerated by Coldfusion. I will try your suggestion and see if I can get it to work as a textarea.

Isn't this your handwritten code?

        // run userdefined onSubmit javascript.
            return testlen('description',10,'','yes');return testlen('description2',10,'','yes')
            return true;

No.  Coldfusion adds that code with the cftextarea.  What I've coded in is the second set of javascript and the javascript in the cfform --->

<cfform onsubmit="return testlen(...">
    <cftextarea richtext="true" name="description"></cftextarea>
</cfform>

When the code renders, it adds the script.  I'm wondering if I can replace the generated script somehow and just make it a cftextarea without the onsubmit in the cfform.

altjarman:  I'm wondering if I can replace the generated script somehow
and just make it a cftextarea without the onsubmit in the cfform.

@altjarman - Unfortunately not.  The implementation of cftextarea is quirky IMO.  The article you linked in your other question explained why you can't use the usual CF specific methods like onValidate(..), etc..  If displaying the current HTML in the error message is a requirement, then you'll have to use onSubmit, or something similar.  If it's *not* a requirement, there may be a few CF specific "workarounds" ...

mplungjan: If the script you posted worked fo 1 field, then the amendment I
suggested will work for more than one field.

@mplungjan - Yeah it probably would with a normal textarea. But CFtextarea's have a few extra nuances.  

1) The current value of the textarea is stored with the editor. To get an accurate count, you cannot use "field.value". You must use:  

     

ColdFusion.getElementValue(fieldName);

Select allOpen in new window

2) The "maxLength" attribute has special meaning in CF forms. That value is not passed through to the html. So this will return null:

       

area[i].getAttribute("maxlength")

Select allOpen in new window

Thanks _agx_ for helping to clarify.  mplugjan has been working hard to help me come up with a solution.  Based on what you are seeing, do you see a way to do this?  I think if I can add the multiple values in a reference to a javascript function in the onsubmit of a cfform header tag, I think that would work.   What it would need to do is set a default message, run through each field, check the maxlength reqired, if the lenth is too long add something like the name of the field (or create a value to display in the javascript on submit).  Then as the javascript loops through the fields it could add a tag (example filed1): "field1 (1500), field2 (1200), field3 (2500)" with a final popup message of:  You have exceeded the length of the following fields: field1 (1500), field2 (1200), field3 (2500).

I think if I can add the multiple values in a reference to a javascript function in the onsubmit of a cfform header tag, I think that would work.

I don't think you need to do all that. What mplugjan suggested should work with some tweaks for the CF specific stuff.

Just append an extra attribute to the textareas you want to validate. Name it  "maxSize" or whatever you want as long as that name isn't the same as one of the tag's CF attributes. Then use mplugjan's code to loop through all textarea's in the page. If it contains the "maxSize" attribute - validate it.   But instead of displaying a separate alert for each error, I'd append the errors to an array and show all error messages at once. That's a little less annoying than one alert for each error IMO.

Here's one way you could adapt mplugjan's code:

<script type="text/javascript">
	// Returns a message if the textarea value exceeds the maximum length
	// Otherwise returns an empty string
	function validateTextAreaLength(fieldName, maxLen){
	   var body = ColdFusion.getElementValue(fieldName);
	   var remainLen = maxLen - body.length;
	   if (remainLen < 0) {
   	  	  return 'The maximum length for ' + fieldName + ' is ('+ maxLen + ') characters (incuding HTML).\n'
   	  	  		+ 'The current value is ('+ Math.abs(remainLen) +') characters too long';
       }
       return '';
    }

	function checkTextAreas() {
		// get all textareas
  		var areas = document.getElementsByTagName('textarea');

		// validate textarea length
		var errors = new Array();
  		for (var i=0; i <areas.length; i++) {
  	 		var message = "";
  	 		var fieldName = areas[i].name;
  	 		var maxSize = areas[i].getAttribute("maxSize");

  	 		// only validate when "maxSize" attribute is present
  	 		if (maxSize > 0) {
  	 			message = validateTextAreaLength(fieldName, maxSize);
  	 				
  	 		}
  	 		// save error message
  	 		if (message.length > 0) {
  	 			errors.push(message);	
  	 		}
  	 	}
  	 	
  	 	//display any errors
  	 	if (errors.length > 0) {
  	 		alert( errors.join("\n\n"));
  	 		return false;	
  	 	}
  	 	
    	return true;
	}   
</script>

<cfform onsubmit="return checkTextAreas()" >
    <cftextarea name="description1" richtext="yes" toolbar="Basic" maxSize="20">12345</cftextarea>
     <cftextarea name="description2" richtext="yes" toolbar="Basic" maxSize="30">12345</cftextarea>
     <!--- this will NOT be validated because its missing the "maxSize" attribute --->
    <cftextarea name="description3" richtext="yes" toolbar="Basic">12345</cftextarea>

    <input type="Submit">
</cfform>

Select allOpen in new window

_agx_, that is awesome.  Thank you both.  One question that I have, is that can you some how pull the label for the field?  It might be more helpful to people entering data to see the question prompt in the label and not the value of the name tag of the cftextarea?

I really really appreciate your guys help as I was going crazy with this one and need like 5-8 cftextareas on the same form.

You guys did a great job.  _agx_ brought it home.  I really needed a fast solution and I'm glad you guys were able to help on a weekend.  I just wish I could increase the points beyond what is available.

When I try to customize the toolbar:

function FCKeditor_OnComplete(editorInstance)
{
 editorInstance.Config["ToolbarSets"]["MyToolBar"] = [
 ['SpecialChar','Bold','Italic','Underline','Subscript','Superscript','SpellCheck','Link']
 ];
editorInstance.EditorWindow.parent.FCK.ToolbarSet.Load('MyToolBar' ) ;
}

It breaks the code.  Any thoughts?

I added this question as this is really a new question:
https://www.experts-exchange.com/questions/28003738/Modify-Coldfusion-cftextarea-richtext-yes-modify-toolbar-inline.html