The amazing adventures of Doug Hughes

I’m currently working on a 100% new website built around Mach-II. The current site uses WysiPad2 to edit the site’s HTML content. As part of the rewrite I decided to recreate some of that functionality and wrote a CFC to integrate WysiPad into the new site. The CFC has a simple display method which, based on the CFC configuration, will return HTML for displaying WysiPad.

As part of that HTML I wanted to automatically integrate WysiPad as if it were any form element into existing forms. Typically, when adding WysiPad to a form I would have to set the form’s onSubmit attribute to call a JavaScript function which calls the getContent method on the WysiPad2 and places the results into a hidden field which is then submitted as a form element. I wanted to automate that process when I used the CFC. However, I ran into a few minor problems.

First off, the easiest way to add an onSubmit handler is with some JavaScript similar to the following:

document.formName.onsubmit = myFunction()

The problem with this is that it replaces any existing onSubmit handler. This is a problem if you happen to have onSubmit handler on your form for whatever purpose. For instance, if you’re using cfform validation ColdFusion adds its own onSubmit handler.

I played around with several options, but finally was guided towards something I knew, but had forgotten all about (really!): attachEvent.

AttachEvent is an IE only method. The Mozilla equivalent is addEventListener. (Because WysiPad is IE only I’m only blogging about attachEvent.)

My solution ended up being to add some JavaScript which ascended the DOM tree till it found the form element which the CFC generated HTML was contained within. Once I had the form element I called the attachEvent method on it and attached a function call to the onSubmit method.

Here’s the resulting JavaScript:

function addWp2OnSubmitHandler(){
    // grab the wp object element by Id
    var wp2 = document.getElementById('wp2WysiPad');

    // find the containing form tag
    var parentForm = findParentForm(wp2);

    // attach the wp2GetContent event to the
    // form onsubmit event
    // this does not overwrite any existing events
    parentForm.attachEvent('onsubmit', wp2GetContent);

function wp2GetContent(){
    // grab the wp object element by Id
    var wp2 = document.getElementById('wp2WysiPad');

    // grab the hidden text field which will be used
    // to submit the html content
    var wp2FormField = document.getElementById('WysiPad');

    // set the hidden field's content to the wysipad html
    wp2FormField.value = wp2.GetContent(0);

function findParentForm(object){
    // check to see if the current object's tag name is "form"
    if(object.tagName.toUpperCase() != 'FORM'){
        // if not, check the parrent element
        return findParentForm(object.parentNode);
    } else {
        // if so, return the object
        return object;

This works quite well. I am pleased. I may some day release a demo of WysiPad implementing Mach-II. Any interest?

Comments on: "Discovering the JavaScript AttachEvent Method" (8)

  1. Micha Schopman said:

    Be carefull using attachEvent with anonymous eventhandlers. There is no way for IE to collect them as garbage.


  2. Doug Hughes said:

    Micha, can you please expand on your comment? What would you suggest as an alternative which does not have this problem in IE?


  3. Micha Schopman said:

    Your code is safe. This for example would leak though:

    document.attachEvent(&quot;event&quot;,function(){my code});

    There is no way to remove this from memory.


  4. What about if you want to attachEvent a function call that passes the “this” parameter?


  5. M. Schopman said:

    JV, you would need to scope it, or else it would point to the wrong object

    var self = this;


  6. Er, no that’s what I meant. You have a function that takes a parameter which is an object reference. Let’s say, on a checkbox you want the onclick event to call that function and pass a reference to itself as the parameter to the function.

    I saw no examples where any parameters can be passed to a function using attachEvent. You could, of course, use the event args within the function itself, but that’s beside the point of my question.


  7. Mahtieu Parent said:

    Just use “this” in your function, an event will always return the object from which it has launched as “this”.

    A problem I’m having right now is that an object I create adds an event to other components of the page and once launched, I need the function to know which object asked for it. using self = this before adding the event and then passing self as a parameter would be the simplyest but how could it be done?

    Another work arround would be to refer to my object into a parameter of the object where the event is attached but that would make it hard as I have many objects adding many events and sometimes more than one event is added to the same tag.


  8. Add parameter to attachEvent said:

    you can use this syntax to add function with parameters




Comments are closed.

Tag Cloud

%d bloggers like this: