Solved

Clear CKeditor form after submission

Posted on 2011-02-20
10
2,630 Views
Last Modified: 2012-06-27
Hi,
I am creating a CKeditor instance for some content management and after submission would like to clear the input field automatically.
I am posting the form contents using jQuery if this makes and difference.
0
Comment
Question by:Lmillard
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
  • 2
10 Comments
 
LVL 20

Expert Comment

by:Mark Brady
ID: 34938201
Does your form use php session() ? If so, you can kill the session like this:

session_destry();

Run that line in php script to destroy session and data inside session so won't show up in your form anymore.

If not:

Javascript will get rid of the values. Just rename the variables in my function and add more to suit your form.
Place this in between the <head> and </head> tags on your page.

<script language="javascript">
function  clearForm()
{
document.getElementById('name').value = '';
document.getElementById('email').value = '';
document.getElementById('address').value = '';
document.getElementById('phone').value = '';
// keep going untill all your form input fields are empty. Replace the values inside the quote marks with the "name" value on each of your form elements.
}
</script>

To run the script, you could add some code to the end of your submit button or add it to some other process. Here's an example.

<input type='button' onclick="document.forms.MyForm.submit(),clearForm()" />

Although, this would work, it is not a good idea to put the code on your submit button in case there is an error with data in the form you will need to alert the user and have them fix it. You don't want them to have to refill out the form each time!

Hope this helps. If not, can you be more specific on what fields you have on your form and how you are submitting it. Perhaps post your form code here or attach it.
0
 

Author Comment

by:Lmillard
ID: 34939065
Thanks for coming back so quickly.
I am using Coldfusion so no access via the php method.

I have already tried clearing the input using traditional javascript getElementById but this does not seem to clear the field, not sure why. It clears all fields up to the text area that is being used by CK but not the text area itself.
I am posting the code below for all to see.
POSTING FORM


<form id="theForm">
<input type="hidden" name="NewRec" value="#NewRec#" />
<input type="hidden" name="BlogId" value="#Url.BlogId#" />

<cfif Not NewRec>
<input type="hidden" name="bUrl" value="#bUrl#" />
</cfif>

<table align="center" border="0" width="100%">
<tr>
    <td>Enter Post Title</td>
    <td width="7px"><img src="#Application.BoPath#Assets/Img/backoffice/mand.png" alt="" /></td>
    <td><input type="text" name="BlogTitle" id="BlogTitle" value="#BlogTitle#" style="width:515px" /></td>
</tr>
<tr>
    <td>Select a Catagory</td>
    <td></td>
    <td>
    <select name="BlogCat" id="blogCat">
    <cfif ThisBlogCat.RecordCount is 0>
    <option value=""></option>
    <cfelse>
    <option value="#ThisBlogCat.CatId#">#ThisBlogCat.CatDesc#</option>
    </cfif>
    <cfloop query="AllBlogCat">
    <option value="#AllBlogCat.CatId#">#AllBlogCat.CatDesc#</option>
	</cfloop>
    </select>
    </td>
</tr>
<tr>
    <td>Posted By</td>
    <td ><img src="#Application.BoPath#Assets/Img/backoffice/mand.png" alt="" /></td>
    <td>
    <input type="text" name="UsrSynom" size="20" id="UsrSynom" value="#UsrSynom#" />
    
    Display on Live Website?
    <select name="Status">
    <cfswitch expression="#Status#">
    <cfcase value="1">
    <option value="1">Show on live site</option>
    <option value="0">Hide from live site</option>
    </cfcase>
	<cfdefaultcase>
    <option value="0">Hide from live site</option>
    <option value="1">Show on live site</option>
    </cfdefaultcase>
    </cfswitch>
</select>
    </td>
</tr>
<tr>
    <td>Website Url</td>
    <cfif NewRec>
    <td><img src="#Application.BoPath#Assets/Img/backoffice/mand.png" alt="" /></td>
    <td><input type="text" name="bUrl" size="50" id="bUrl" value="#bUrl#" style="width:315px" /></td>
    <cfelse>
    <td></td>
	<td><a href="#FullPostPath#" target="_blank" title="View link in new tab">#Application.BoPath#blog/posts/#bUrl#.cfm</a></td>
    </cfif>
</tr>
</table>

<div style="padding-top:10px;">
		<textarea cols="100" id="editor1" name="BlogContent" rows="10">#blogContent#</textarea>

		<script type="text/javascript">
		//<![CDATA[
			// Replace the <textarea id="editor1"> with an CKEditor instance.
			CKEDITOR.replace( 'editor1',
				{
					toolbar :
					[
						['Source','-','Save','Preview'],
						['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
						['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
						['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
						'/',
						['Styles','Format','Font','FontSize'],
						['TextColor','BGColor'],
						['Bold','Italic','Strike'],
						['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
						['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
						['Link','Unlink','Anchor'],
						['Maximize']
						],
					uiColor : '##eee',
    			    filebrowserUploadUrl : '../fileUploadMulti/ckUpload.cfm'
				});
		//]]>
		</script>

		<div id="eMessage">
		</div>
</div>

<div style="width:100%; padding-top:10px; text-align:right">
<cfif NewRec>
    <input type="submit" name="submit" class="button" value="Create Post" />
<cfelse>
    <input type="submit" name="submit" class="button" value="Apply Changes" />
</cfif>
</div>

<div id="searchresults" style="text-align:left"></div>

</form>





AND NOW THE PROCESSING PAGE


        <cfinvoke component="#Application.CompPath#Blog" method="Create"
        	BlogTitle="#Form.BlogTitle#"
            BlogContent="#Form.BlogContent#"
            BlogCat="#Form.BlogCat#"
            bUrl="#UrlResult[2]#"
            UsrSynom="#Form.UsrSynom#"
            ShowUsr="#Form.ShowUsr#"
            Status="#Form.Status#"
            returnvariable="BlogId">


        <img src="#Application.BoPath#Assets/Img/backoffice/bulletpoint.png" alt="BulletPoint" />
        <p class="header2">Thank you, your blog post has been created</p>
        
        
        <script>
            document.getElementById('BlogTitle').value = '';
            document.getElementById('BlogTitle').value = '';
			document.getElementById('blogCat').value = '';
			document.getElementById('bUrl').value = '';
		</script>

Open in new window

0
 
LVL 20

Expert Comment

by:Mark Brady
ID: 34939083
For the textarea it should be

var tArea = document.getElementById('editor1');
tArea .value = '';



That should wipe it out.
0
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 

Author Comment

by:Lmillard
ID: 34939116
Not working for some reason, I'm no expert with js but I'm totally sure I have it all typed correctly and in the right place as all the fields are cleared other than the CKeditored text area.
0
 
LVL 3

Expert Comment

by:dagaz_de
ID: 34941972
If you are using COLDFUSION wich version do u have? If 8 or higher its simple - just one tag for an FCK Editor:

<cfform name="form1">
  <cftextarea name="textarea1" height="400" width="480" richtext="yes" toolbar="Basic" skin="silver" toolbaronfocus="yes" value="#YOUR_VALUE#"></cftextarea>
</cfform>

Here’s how you can set the value of the editor using client side JavaScript.

This is not a documented feature though.

var editorinstance = ColdFusion.objectCache['nameoftextarea'];

var editor = FCKeditorAPI.GetInstance(editorinstance.richtextid);

editor.InsertHtml(”abc”);

If you have Version 7 or earlier - let me know because i have an component for U
0
 

Author Comment

by:Lmillard
ID: 34942032
I wish I had know that CF has the ability to create the form using cfforms but unfortunately I am too far in to be able to switch to this method but can consider this for future versions on my application.
I am using CF9 so should have the full functionality in place to do this.
I am using the newer CK editor, I presume its all the same as the older FCK.
0
 
LVL 3

Expert Comment

by:dagaz_de
ID: 34942103
theres no problem if you switch to cfform instead of a form tag.  Your can keep your old form elements! just change your tag <form .... to <cfform ...... (and the end tag too, of course)
then make a textarea like <cftexarea and you'll see It will do everthing for you.

Tell me if it works for You.
0
 

Author Comment

by:Lmillard
ID: 34942181
this code runs in many places in applications that are distributed so I really do need to go with a non cfform option at the moment but will definitely be considering a measure code change across the board in the future
0
 
LVL 3

Accepted Solution

by:
dagaz_de earned 500 total points
ID: 34942482
Ok then you must use a Command to reset the value like this:

are you using CKEDITOR 3.0?

then you must use the setData method;

CKEDITOR.instances.editor1.setData( '' );

more information u can get Here:

http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.editor.html#setData

0
 

Author Closing Comment

by:Lmillard
ID: 34942984
Thanks so much that has worked perfectly. Also thanks for the CF tip, I will be moving over to this asap!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
JavaScript code not working 3 33
How Close unsubmited attempts 10 47
ModalPopup  question 22 39
Triple line in an alert message 4 24
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
OverviewThis article demonstrates a simple search form using AJAX. The purpose of the article is to demonstrate how to use the same code to render a page and javascript (JQuery) and AJAX to make subsequent calls to refine the results. The princip…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question