thumbnail image for this experiment

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, 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>

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.

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.

update: fixed an interesting bug in Firefox, caused by the fact that when a form is submitted via the keyboard, the target of the onsubmit event is the input itself, rather than the form.

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 objectin a form. however, Firefox behaves strangely, submitting both the object and the nested textarea. the javascript now only acts to prevent this IE is unaffected, we load the script via Roger Johansson's Valid downlevel-revealed conditional comments.


view this experiment