cftextarea value is blank when RichText

[Guest]

Recently, a user informed me that the RichText editor within her form had changed.  When she used the form to send out an email, the copy that she got had no message text.  After two more try's, I decided to try this on our test environment and the same thing happened.

<cftextarea name="textarea1" height="200" width="525" richtext="yes" required="YES" toolbar="basic" message="Please type your message." />

When this field (textarea1) gets filled in and I dump the FORM elements I get textarea1 [empty string].  Any ideas why this would have started happening and what I need to do in order to correct it again??

Thanks in advance for any help you can provide.

David

[Charlie Arehart]

You don't give us quite enough to know for sure what the problem is ("the copy that she got had no message text"), but I gather you mean that there's no problem with the form as it appears on the screen, but when a user fills it in and submits it, the form field for that textarea is blank.

So first, some debugging techniques: do a dump of the form scope (on the page called by the form submission), and see what it shows (for all fields, not just the one in question). Perhaps this is a bigger problem than that one field.

Second, in the form, do you show all the little icons for things like bold, italics, and such, which is what cftextarea is meant to bring to the table (over a traditional HTML textarea tag)? If you do not, then perhaps you're having a problem with the response that shows the user that form.

And a common problem with that is that the underlying javascript and related components didn't get served with the page when it was shown to the user. These rely on an underlying virtual directory, to be defined in your web server, of either CFIDE/scripts (by default in CF11 and before) or /cf_scripts/scripts (by default in CF2016 and above). Note that you can change the name of that virtual directory (in all versions of CF) in the CF Admin "server settings" page, in its "default scriptsrc directory" setting. For more on that, see https://www.petefreitag.com/item/774.cfm .

If you find that the web site in question does not have that virtual directory, then the browser will fail to run the needed javacript that the HTML (which CF builds for a CFTEXTAREA and similar tags) is sent to it.

You can also use browser developer tools to help identify and debug such problems on the client end, which is helpful when perhaps you have no control over or access to assess the web server configuration. For more on that, see an older post of mine: Need to solve browser problems? Did you know most modern browsers now have built-in developer tools? 

Let us know how things turn out, whether this helps or not.

[Guest]

Thanks Charlie and I'm sorry I didn't provide more information, but you are correct.  When the user submits the form, the textarea data is blank.  I have dumped the FORM variables after the JS validation and that field is blank [empty string].  The RichText toolbars are displaying and working as expected the display is not the issue.

Interestingly when I just try to alert the textarea field in JS I get 'undefined' but if I add an action to the cfform and submit the form that way instead of js (ColdFusion.Ajax.submitForm("ShoutToolMessage", "Tools/shoutout_Action.cfm", ShoutOutSuccessCallback, errorDisplay);), I get the textarea data.

So with CFFORM ACTION=''Tools/shoutout_Action.cfm", I get the field data but submitting via JavaScript that field is blank [empty string].

ANY IDEAS?  I'm stumped. Here is the DOM code below:

[Charlie Arehart]

Well, you are close. Look at the network tab instead, not the DOM tab. See if ANY of the files requested (when the form is displayed) has anything but a 200 or 304 status code. If any 404s or 401s or 500, etc, then those failed. And any failure could make part of the request fail, which could lead to the submission to fail to fill in the field.

Look also at the console tab. It will show if there were any javascript errors.

I realize this stuff may NOT be this issue, but you want to start by ruling it out, especially you have confirmed that if you submit the form yourself from the page, it HAS the data.

[Carl Von Stetten]

Can you clarify what you meant by "submitting via JavaScript"?  Maybe provide the JavaScript code you are using?

I have never used CFTEXTAREA, but from the DOM screenshot, it appears that the JavaScript code associated with CFTEXTAREA copies what is entered in the rich text editing control into the actual HTML TEXTAREA control,  perhaps by intercepting a normal form submit.  If that's the case, if you are using JavaScript to serialize your form and send the data (bypassing a normal HTML form submit process), the data isn't being copied from the rich text editing control into the TEXTAREA.

-Carl

[Guest]

Thanks Charlie.  The Network tab is 200 for both files and the console tab was clean.

[Charlie Arehart]

OK. And I know you think "nothing has changed", but you are probably meaning more about the code, but perhaps also the config.

Still, let's consider the config, going back to the scripts virtual directory I mentioned in my first comment here. First, what is your setting for that default scriptsrc in the CF Admin (see my first post above)? Then second, is THAT virtual directory defined in your web site in question?

Third, and I assume it is: is the PATH that it points to pointing to the CF wwwroot, and its scripts folder? It could be that it's pointing to the wrong set of script files.

You've not yet said what version of CF you are using. In CF2016, it should point to something like C:\ColdFusion2016\cfusion\wwwroot\cf_scripts\scripts (or wherever you have CF 2016 installed). In CF10 and 11, it would be like this C:\ColdFusion11\cfusion\wwwroot\CFIDE\scripts.

[Guest]

We are running CF2016 (11)

This is in the SETTINGS area of the CF ADMIN:

Default ScriptSrc Directory

Active ColdFusion Mappings

Actions Logical Path Directory Path /CFIDE C:/ColdFusion2016/cfusion/wwwroot/CFIDE   /gateway C:/ColdFusion2016/cfusion/gateway/cfc

[Charlie Arehart]

That's curious that the default scriptsrc is empty. It should not be. The default (in CF2016, which you say you're running) is /cf_scripts/scripts/. Put that in there, and try to requests again.

BTW, why did you say you are running "CF2016 (11)"? Someone might think you were saying CF2016 "update" 11, but the latest update is only 5.

Finally, you misunderstood the second part of my last note, in that you are showing a screenshot of your CF admin "mappings" page. That's not what I was referring to. I said:

"Then second, is THAT virtual directory defined in your web site in question?

Third, and I assume it is: is the PATH that it points to pointing to the CF wwwroot, and its scripts folder? It could be that it's pointing to the wrong set of script files."

So I'm asking you to look at your web server (IIS or Apache, whichever you use), and then for the site having trouble, does it have a /cf_scripts virtual directory defined? And if it does, does it point you C:\ColdFusion2016\cfusion\wwwroot\cf_scripts\scripts?

[Guest]

Charlie, my apologizes for the confusion.  We are indeed running CF2016 and have all patches installed.

The default scripts entry didn't copy over correctly, it has /cf_scripts/scripts/ in it.
Checking into the IIS VD for the cf_scripts folder.

[Guest]

Yes, the Virtual Directory is pointing to the correct folder.  sigh!!

[Guest]

Hi Carl.

Interestingly when I just try to alert the textarea field in JS I get 'undefined' but if I add an action to the cfform and submit the form that way instead of js (ColdFusion.Ajax.submitForm("ShoutToolMessage", "Tools/shoutout_Action.cfm", ShoutOutSuccessCallback, errorDisplay);), I get the textarea data.

Note, that when you submit the form, the alert for the cftextarea field is blank, even when you add text.

Here is a simple code snippet that does the exact same thing.

<script type="text/javascript">
 
function shoutoutAction() {

alert(document.getElementById('messageAreaDJ').value);
return false;
}
</script>
 
   <div style="margin:10px">

  <!-- action="Tools/shoutout_action.cfm" enctype="multipart/form-data" method="post"-->
  <cfform name="ShoutToolMessage" id="ShoutToolMessage">
  
   <!--- Outer Blue table --->
   <table width="800" border="0" cellspacing="0" cellpadding="0" style="margin-top:10px; margin-left:10px">
    <tr>
       <td width="800" valign="top">

      <!--- Insert Mail Form --->
      <table width="740" border="0" cellspacing="0" cellpadding="0" align="center" class="blueline_table">
       <tr>
        <td height="30" bgcolor="#006699" align="center" class="helptext" style="color:#FF0; font-weight:bold">
        COMPOSE MESSAGE
        </td>
       </tr>
       <tr>
        <td height="40">

         <table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
          <tr>
           <td width="125" height="40" class="text"><b>SUBJECT</b>: </td>
           <td width="650">
           <cfinput name="subject" type="text" size="60" required="yes" style="padding: 2px; font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size:12px; color: ##333"
              message="Please enter a subject" validateat="onsubmit" validate="noblanks" />
           </td>
          </tr>
          <tr>
           <td valign="top" style="margin-top:55px" class="text"><b>MESSAGE</b>:</td>
           <td><cftextarea name="messageAreaDJ" id="messageAreaDJ" richtext="yes" width="630"></cftextarea></td>
            </tr>
          </table>

        </td>
         </tr>
        <tr>
        <td height="50" align="right" style="padding:10px">
         <input type="button" name="submit" id="submit" value="Send Email" style="padding: 3px" onClick="shoutoutAction();">
        </td>
         </tr>
      </table>
      <!--- End mail Form --->

       </td>
    </tr>
     </table>
  
  </cfform>

</div>

[Carl Von Stetten]

It appears CF assigns a generated value for the "id" property on the actual TEXTAREA.  From your DOM screenshot previously shown, that id was "cf_textarea462361889760434".  So your document.getElementById() would need to use this generated id.  Does ColdFusion use a random number in that generated id that changes each time the page is loaded?  If so, you'll have to change it to something like:

alert(document.getElementsByName('messageAreaDJ')[0].value);

-Carl

[Guest]

Good catch Carl, but, NO, CF shouldn't do that.  I'll look at the form again and see it it has the same ID value and try to alert that instead.

[Guest]

Nope, the ID appears to change each time the form it accessed.  I changed the code as suggested and still cannot get the value of that textarea.  ARGH!!!

[Guest]

Here is a simple example of what the issue is. Copy the code below and create a cfm page. Browse to it using, CF9, CF11, or CF2016. Enter text in the subject and the textarea. When you submit the form, you should get two javascript alerts. The first for the Subject, the second the textarea. The textarea field will be blank.

<script type="text/javascript">
 
function shoutoutAction() {
alert(document.getElementById('subjectDJ').value);
alert(document.getElementById('messageAreaDJ').value);
}
</script>
 
   <div style="margin:10px">

  <!-- action="Tools/shoutout_action.cfm" enctype="multipart/form-data" method="post"-->
  <cfform name="ShoutToolMessage" id="ShoutToolMessage">
  
   <!--- Outer Blue table --->
   <table width="800" border="0" cellspacing="0" cellpadding="0" style="margin-top:10px; margin-left:10px">
    <tr>
       <td width="800" valign="top">

      <!--- Insert Mail Form --->
      <table width="740" border="0" cellspacing="0" cellpadding="0" align="center" class="blueline_table">
       <tr>
        <td height="30" bgcolor="#006699" align="center" class="helptext" style="color:#FF0; font-weight:bold">
        COMPOSE MESSAGE
        </td>
       </tr>
       <tr>
        <td height="40">

         <table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
          <tr>
           <td width="125" height="40" class="text"><b>SUBJECT</b>: </td>
           <td width="650">
           <cfinput name="subjectDJ" id="subjectDJ" type="text" size="60" required="yes" style="padding: 2px; font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size:12px; color: ##333"
              message="Please enter a subject" validateat="onsubmit" validate="noblanks" />
           </td>
          </tr>
          <tr>
           <td valign="top" style="margin-top:55px" class="text"><b>MESSAGE</b>:</td>
           <td><cftextarea name="messageAreaDJ" id="messageAreaDJ" richtext="yes" width="630"></cftextarea></td>
            </tr>
          </table>

        </td>
         </tr>
        <tr>
        <td height="50" align="right" style="padding:10px">
         <input type="button" name="submit" id="submit" value="Send Email" style="padding: 3px" onClick="shoutoutAction();">
        </td>
         </tr>
      </table>
      <!--- End mail Form --->

[EddieLotter]

You cannot use JavaScript this way, because you are using cftextarea to get a rich editing experience, ColdFusion is replacing your form fields with its own to provide that functionality. However, once you actually submit the form, the form fields are available in the "form" scope using the "name" attribute of the form fields.

Try the following example:

<!doctype html>
<html lang="en">
<head>
 <meta charset="utf-8">
 <title>cfForm Test</title>
</head>
<body>
<cfif isDefined('form.fieldNames')>
 <cfdump var="#form#" >
</cfif>
  <cfform name="ShoutToolMessage" id="ShoutToolMessage" action="CfFormTest.cfm" method="post">
      <table width="740" border="0" cellspacing="0" cellpadding="0" align="center" class="blueline_table">
       <tr>
        <td height="30" bgcolor="#006699" align="center" class="helptext" style="color:#FF0; font-weight:bold">
        COMPOSE MESSAGE
        </td>
       </tr>
       <tr>
        <td height="40">
         <table width="800" border="0" cellspacing="0" cellpadding="0" align="center">
          <tr>
           <td width="125" height="40" class="text"><b>SUBJECT</b>: </td>
           <td width="650">
           <cfinput name="subjectDJ" id="subjectDJ" type="text" size="60" required="yes" style="padding: 2px; font-family: Segoe, 'Segoe UI', 'DejaVu Sans', 'Trebuchet MS', Verdana, sans-serif; font-size:12px; color: ##333"
              message="Please enter a subject" validateat="onsubmit" validate="noblanks" />
           </td>
          </tr>
          <tr>
           <td valign="top" style="margin-top:55px" class="text"><b>MESSAGE</b>:</td>
           <td><cftextarea name="messageAreaDJ" id="messageAreaDJ" richtext="yes" width="630"></cftextarea></td>
            </tr>
          </table>
        </td>
         </tr>
        <tr>
        <td height="50" align="right" style="padding:10px">
          <input type="submit" value="Submit">
        </td>
         </tr>
      </table>
    </cfform>
</body>
</html>

You will see what you typed as the message in the second field.

It's worth pointing out that the value of the messageAreaDJ field is in HTML, which is probably tripping you up.

Cheers

Eddie

[Guest]

Thanks for your thought Eddie, you are correct.  I can submit it using the 'submit' but I'm sending the form through a JavaScript file for validation and then processing it using ColdFusion.Ajax.submitForm to a cfc function and the value doesn't come over.  The example I gave was a simplified version so people would know the issue I am having.  Thoughts?

[EddieLotter]

but I'm sending the form through a JavaScript file for validation and then processing it using ColdFusion.Ajax.submitForm

My apologies, I didn't read closely enough.

What this means is that you will need to use JavaScript to drill down to the actual HTML DOM element that holds the value that is being typed by the user. Using the Developer Tools (F12) functionality (built into most modern browsers), I see that the element is embedded in an iframe, which will make things difficult but not impossible for you.

Cheers

Eddie

[Guest]

Thanks Eddie, no worries.  I updated the code the better match the actual code that wasn't working by adding the ColdFusion.Ajax.submitForm in the JS function to send the form data to a CFC, I am dumping the form elements in the CFC and still get no value (null) for the cftextarea.  ARGH!!!

[ctreeves]

I am by no means an expert, and you've certainly received expert help, but can I ask why you'd use cftextarea over something like ckeditor?

[Guest]

Because its a government application and there are only so many government 'approved' technologies I can use.  It sucks I know.