Clear All Text Fields & Text Areas JS (Xinha Editor Doesn't Clear?)

rburko · 2006-10-07 12:06:42

Hello All,

I’m trying to add some JS to one of my pages that acts as a “clear all” link. When the page loads all the text fields and text areas are pre-filled with some instructional text and I want to give people the option to click a link that automatically wipes everything out.

I have the JS code to do this (see below), but the problem is that it doesn’t work with Xinha text areas. If I toggle the Xinha editor(s) to “HTML View” then it works properly and clears all the content. But, if it’s in the WYWIWYG view, then the ‘clear’ link doesn’t do anything at all.

Here’s a sample page that would have the code working if there were no Xinha editors:

<html>
<head>
<script>
function clearall (f) {
var len = f.elements.length;
var i=0;
for( i=0 ; i<len ; i++) {
if (f.elements[i].type=='text' || f.elements
[i].type=='textarea') {
f.elements[i].value='';
}
}
return false;
}
</script>
</head>
<body>
<form name="foo">
<input type="text" value="test" name="field1"><br/>
<input type="text" value="blah" name="field2"><br/>
<input type="text" value="yadda yadda" name="field3"><br/>
<textarea name="example" id=”example”>hello world</textarea>
<a href="#" onClick="clearall(document.forms
['foo'])">Clear</a>
</form>
</body>
</html>

If you turn that textarea into a Xinha editor, the clear link will wipe out everything on the page except for the contents of that text area.

If anyone has any idea as to how I can fix/modify this script to wipe out the contents of the Xinha textarea as well, I would greatly appreciate it!

Thanks in advance!

Cheers,

Robert

ray · 2006-10-07 20:06:29

The problem is that that Xinha runs somewhat independly from the textarea. You would have to check if the textarea is a Xinha area, for example:

function clearall (f) {
    for(var i=0 ; i<f.elements.length ; i++) {
    if (f.elements[i].type=='text' || f.elements[i].type=='textarea') {
        f.elements[i].value='';
        if (typeof xinha_editors[f.elements[i].id] != 'undefined') {
          xinha_editors[f.elements[i].id].setHTML('');
        }
    }
    return false;
    }

Last edited by ray (2006-10-07 20:09:21)

rburko · 2006-10-07 20:31:07

Hi Ray,

Thanks for the reply. I really appreciate it.

I tried to implement your code suggestion, however it did not work.

When I included the code exactly as you have it, I got the error:
Missing } after function body

Clicking the ‘clear’ link did nothing.

I then modified it to look like this:

}
}
return false;
}
</script>

But, in this I get the error “xinha_editor” has no properties. It also only cleared one text field on the page as opposed to *all* of them. The overall idea of this was to give people an easy option to clear all the text fields and text areas (including Xinha editors) on the page.

All of this JS is *way* over my head, so any other insight you could provide would be greatly appreciated!

(I’m not sure if it makes a difference, but I have things setup so that Xinha effects every textarea that appears on the page.)

Thanks!

ray · 2006-10-08 19:32:50

rburko wrote:

When I included the code exactly as you have it, I got the error:
Missing } after function body

Sorry for the mistake

xinha_editors is an array that holds the ids of the textareas that shall be turned to editors and is used in the sample config that is proposed here http://xinha.python-hosting.com/wiki/NewbieGuide
As you didn't write anything about how you create the editors, I was referencing to that.

rburko wrote:

(I’m not sure if it makes a difference, but I have things setup so that Xinha effects every textarea that appears on the page.)

Ok, you seem to do it differently, no matter, there are other ways.

/* This function empties all editors in the page */
function clearAllEditors () {
   for (var i=0;i<__htmlareas.length;i++) { //__htmlareas contains all editors
       __htmlareas[i].setHTML('');  //set the contents of the respective to nothing
   }
    return false;
}
/* This function empties all editors in a form specified by its name */
function clearEditors (formName) {
   for (var i=0;i<__htmlareas.length;i++) {
       if (__htmlareas[i]._textArea.form.name == formName) {
          __htmlareas[i].setHTML('');
        }
   }
   return false;
}
/* Combined with your function to wipe outthe whole form */
function clearall (formName) {
   var f = document.forms[formName];
   var len = f.elements.length;
   var i=0;
   for( i=0 ; i<len ; i++) {
     if (f.elements[i].type=='text' || f.elements[i].type=='textarea') {
       f.elements[i].value='';
     }
   }
   
   for (var i=0;i<__htmlareas.length;i++) {
     if (__htmlareas[i]._textArea.form.name == formName) __htmlareas[i].setHTML('');
   }
   return false;
}
/* name is not allowed for forms in XHTML 1.0 strict, so you may have to use id instead*/
function clearall (formId) {
   var f = document.getElementById(formId);
   var len = f.elements.length;
   var i=0;
   for( i=0 ; i<len ; i++) {
     if (f.elements[i].type=='text' || f.elements[i].type=='textarea') {
       f.elements[i].value='';
     }
   }
   
   for (var i=0;i<__htmlareas.length;i++) {
     if (__htmlareas[i]._textArea.form.id == formId) __htmlareas[i].setHTML('');
   }
   return false;
}

Hope you find the right for your use

rburko · 2006-10-13 10:34:19

Hi Ray,

I just wanted to reply and post the very important message saying that you are BRILLIANT!

That code worked like a charm and cleared all the Xinha editors on the page (along with all the other fields).

Thanks so much for your help.

Xinha Discussion Forum

Announcement

#1 2006-10-07 12:06:42

Clear All Text Fields & Text Areas JS (Xinha Editor Doesn't Clear?)

#2 2006-10-07 20:06:29

Re: Clear All Text Fields & Text Areas JS (Xinha Editor Doesn't Clear?)

#3 2006-10-07 20:31:07

Re: Clear All Text Fields & Text Areas JS (Xinha Editor Doesn't Clear?)

#4 2006-10-08 19:32:50

Re: Clear All Text Fields & Text Areas JS (Xinha Editor Doesn't Clear?)

#5 2006-10-13 10:34:19

Re: Clear All Text Fields & Text Areas JS (Xinha Editor Doesn't Clear?)

Board footer