Javascript submit form

Transloadit
1

Archived from the Transloadit support forum. Originally posted on December 28, 2011; details may be outdated, see our docs for current behavior. Original thread

I currently have an existing form with several text fields and using the jQuery validate plugin to validate the form and submit the data with ajax. I’m hoping to integrate the transloadit jQuery plugin to add a video upload field into the form.

Currently I’m running $(‘#submit’).transloadit({params}) on page load with autoSubmit set to false then adding the returned assembly ID to a hidden field and submitting the remaining fields of the form via javascript.

This method however is 2 step - 1. Select file and click upload. 2. Fill in remaining form fields and click submit.

In order to make this a 1 step process, I need a way to fire the transloadit method from dynamically from the onSubmit method of the validate javascript plugin, rather than using the form selector ID.transloadit on document.ready.

Is this possible?

2

Hey James,

the jQuery validate plugin has a submitHandler method that you need to use:

{{{
      submitHandler: function(form) {
        if (!self.uploadFinished) {
          self.triggerUpload();
        } else {
          form.submit();
        }
      },
}}}

Your own triggerUpload() method then initializes your form with the transloadit jQuery plugin, like so:

$form.transloadit(params);

Immediately after this, still in triggerUpload(), you call:
$form.trigger(‘submit.transloadit’); This will trigger the upload.

In the onResult callback of the transloadit jQuery plugin you set
{{{ self.uploadFinished = true;
}}}

and unbind transloadit:

{{{ $form.transloadit(‘stop’); $form.unbind(‘submit.transloadit’); }}}

Make sure to use autoSubmit: true with that. Once the upload is finished transloadit will submit the form again when you have autosubmit. Since you have unbound transloadit, it will just call the submitHandler of the jQueryValidate plugin. As you have set the self.uploadFinished property to true, it will call form.submit(), which essentially submits the entire form including upload data.

Let me know if this helps.

Kind regards
Tim

3

Hi Tim,

Thanks for your quick response. Your suggestion worked perfectly. I actually altered the logic slightly so that the following block of code was executed as part of the submitHandler method of the validate plugin…

$('#submit').transloadit({
    wait: false,
    autoSubmit: false,
    onSuccess: function(assembly) {
        params.assemblyId = assembly.assembly_id;
        submitForm(params);
    },
    onError: function(assembly) {
        console.log(assembly);
    }
});
$('#submit').trigger('submit.transloadit');

The last line being the most important. Very useful being able to trigger the upload from javascript at runtime.

Thanks.

4

You are welcome, glad it worked :slight_smile:

5

Closing this.