XStandard integration javascript

This experiment generalises the code necessary to integrate XStandard into a form.

The original code, suggested in the XStandard developer's guide:

<html>
    <head>
        <script type="text/javascript">
            function myOnSubmitEventHandler() {
                document.getElementById('editor1').EscapeUnicode = true;
                document.getElementById('xhtml1').value = document.getElementById('editor1').value;
            }
        </script>
    </head>
    <body>
        <form method="post" onsubmit="myOnSubmitEventHandler()" action="mypage.htm">
            <object type="application/x-xstandard" id="editor1" width="100%" height="400">
                <param name="Value" value="Hello World!" />
            </object>
            <input type="hidden" name="xhtml1" id="xhtml1" value="" />
            <input type="submit" name="btnAction" value="Submit" />
        </form>
    </body>
</html>

This code works well, but has a few shortcomings:

it does not degrade gracefully: if XStandard is not installed, the form cannot be used
authors need to manually add the onsubmit handler to their forms and create hidden inputs to hold the output of each XStandard instance
the javascript code needs to be modified depending on the number and name of each hidden input and XStandard instances

To make the form degrade gracefully, we can take advantage of the default HTML object construct, which allows authors to provide nested content which the browser can fall back on if it's unable to display the main object. In this case, a textarea seems to be the most suitable substitute: if users don't have the WYSIWYG plugin, they can enter markup manually.

Compared with XStandard's code, we require an additional attribute for the object, to define what the name of the relevant textarea contained within it is. We also don't need to give the object an id.

<object type="application/x-xstandard" ... name="[name_of_input]">
    ...
    <textarea name="[name_of_input]">...</textarea>
    ...
</object>

As javascript needs to be enabled even for the original code to work, we take further advantage of it and programmatically add the onsubmit behaviour to each form on the page. Lastly, when the form is submitted, we use javascript to generate all necessary hidden inputs and pass the relevant output to them.

Update: and now, after more extensive testing, the conclusion is: javascript is not necessary anymore in Firefox or IE to submit the content/value of an object in a form. however, Firefox behaves strangely, submitting both the object and the nested textarea. the javascript now only acts to prevent this behaviour...as IE is unaffected, we load the script via Roger Johansson's Valid downlevel-revealed conditional comments.

Now, to integrate XStandard, you simply need to code your various object instances with a name and nested textarea, and a reference to the external javascript.

<!--[if !IE]>-->
<script type="text/javascript" src="xstandard.js"></script>
<!--<![endif]-->

Note: this script assumes that you have no other javascript that needs to run on page load or on form submission. If you do need to integrate other such scripts, you should consider modifying the code (in the two lines that add the simple onsubmit and onload handlers) to use something like Keith Gaughan's handy EventManager (which cleverly works around IE's memory leak issue).

Advantages of using this script and the above nested object/textarea construct:

script works with any number of XStandard instances, without any additional coding
graceful degradation: works with XStandard + javascript, no XStandard + javascript and no plugin + no javascript
degrades in different browsers not currently supported by the XStandard plugin

Incidentally, I ran this experiment by Vlad Alexander at XStandard, and they are going to include it in the documentation as a suggested integration method in the future.

Download this experiment (including the javascript, XStandard XML style definition and the PHP source code for this page) as a ZIP archive.

Just to show that the script adds the necessary submit behaviour to all forms in a page, here is another one.