How to add onsubmit type functionality to forms?

[fiferyan]

I'm scratching my head a bit here on the best way to add onsubmit-type handling to forms in Share.  I have a custom control that is a WYSIWYG editor and I'd like to copy the contents of the editor out to the standard content form field textarea on the inline-edit page before running through the normal validation/submit procedure.

I can see a few different ways to do it but wondered what the Alfresco-recommended way is. Here are my ideas so far:

• Update the contents every n milliseconds using setTimeout (not my favourite because it introduces potential race conditions)


• Add a custom validation method that simply copies the text between the two and returns true


• Add an event listener to the form that copies the data when the form is submitted (using Alfresco.util.ComponentManager.get(myFormId))


• Add an event listener to copy the data when the editor loses focus

Are one of these a better approach than another or is there yet another way that I'm missing?

Cheers,

Ryan

[gavinc]

I think there is another better way you can try, the forms runtime has a function that allows you to get called back just before submission, it gets called after validation has completed however, so it may not work for you.

The function I mentioned is called "doBeforeFormSubmit", there are a few examples of it being used throughout Share just search for it's use across the JS files.

Hope that helps!

[fiferyan]

Thanks Gavin. I'll try this as it might be good enough. I'll let you know how it goes.

[fiferyan]

This worked but was slightly difficult to figure out because I was retrieving the Form object instead of having it after I created it. This means that I had to use the ComponentManager to find the form.

For future reference in case somebody else comes across this same problem:

// Add an onsubmit to the form
var editForm = Alfresco.util.ComponentManager.find({id: 'the-id-I-already-had'})[0];
editForm.formsRuntime.doBeforeFormSubmit =
{
   fn: function(form, obj)
   {
      // Get the string document from the editor
      var xml = ditaStorm.getXml();

      // Get the string document from the editor
      var textarea = document.getElementById('my-textarea-id');
      textarea.value = xml;
   },
   scope: this
};
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[gavinc]

Glad you sorted it out, yes, I have no doubt that that approach will be useful for others.

[stevegreenbaum]

Here is a jira enhancement request to incorporate this functionality into the forms api.  Please vote for this enhancement:  https://issues.alfresco.com/jira/browse/ALF-6052