DougHughes.net

I’m currently working on a 100% new Alagad.com 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:

<script>
addWp2OnSubmitHandler();
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;
    }
}
</script>

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