Submitting dijit.Editor’s content in a form

Here’s a simple HOWTO to submit your editor content inside a form tag. There are other ways to do this, but this is what I do.

1. Make sure your form tag has an id attribute - in my example I will assume this to be “my_form”

2. Create a hidden input field, make sure it has an id and name param, you can name it whatever you want, that’s what will be sent back to the server side. For this example I will assume the id of the hidden field is “my_hidden_field”.

3. Create a dijit.Editor widget - note that if you use a textarea for your editor that you will not get the content server side because the dojo parser replaces your textarea with some other HTML to represent the editor widget. For this example I will assume the id of my editor is “my_editor”.

Once this is setup, add the following onload somewhere on your page:

<script type="text/javascript">
   dojo.addOnLoad(function () {
      dojo.connect(dojo.byId('my_form'), 'onsubmit', function () {
         dojo.byId('my_hidden_field').value = dijit.byId('my_editor').getValue(false);
      });
   });
</script>

What’s going on here?

First, we’re adding an onLoad event to run an anonymous function. The function contains a dojo.connect to register an event handler for your form’s onsubmit event. This will run another anonymous function on form submit that will set your hidden input field’s value to the content of the editor. The “false” param isn’t really needed, it prevents the editor from clearing content after calling getValue. So basically we’re hooking up to the form’s submit event to save off the editor content in a hidden field.

If you don’t like the anonymous functions, here’s another way that adds some additional validation checks:

<script type="text/javascript">
   function check_editor(evt) {
      content = dijit.byId('my_editor').getValue(false);
      if (! content) {
         // you can easily replace this with a nicer dojo Dialog
         alert("Error! you must enter content into my editor!");
         // prevent the form from submitting
         evt.preventDefault(); 
      }
      dojo.byId('my_hidden_field').value = content;
   }
 
   function connect_form() {
      dojo.connect(dojo.byId('my_form'), 'onsubmit', check_editor);
   }
 
   dojo.addOnLoad(connect_form);
</script>

Note the use of dojo.byId and dijit.byId. Use dijit when we need to get a widget instance so we can call a widget function. Use dojo.byId when a DOM node is needed.