# Javascript submit form

**URL:** <https://community.transloadit.com/t/javascript-submit-form/18040>\
**Category:** Transloadit\
**Tags:** tender-archive\
**Created:** [December 28, 2011, 11:54am UTC](https://community.transloadit.com/t/javascript-submit-form/18040 "2011-12-28T11:54:00Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![James](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@James](https://community.transloadit.com/u/James)\
**Post date:** [December 28, 2011, 11:54am UTC](https://community.transloadit.com/t/javascript-submit-form/18040/1 "2011-12-28T11:54:00Z")

</div>

> Archived from the Transloadit support forum. Originally posted on December 28, 2011; details may be outdated, see [our docs](https://transloadit.com/docs/) for current behavior. [Original thread](https://web.archive.org/web/20170724140159/http://support.transloadit.com/discussions/questions/342-javascript-submit-form)

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?

---

<div class="post-metadata">

**Author:** ![tim-kos](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@tim-kos](https://community.transloadit.com/u/tim-kos)\
**Post date:** [December 28, 2011, 12:55pm UTC](https://community.transloadit.com/t/javascript-submit-form/18040/2 "2011-12-28T12:55:00Z")

</div>

Hey James,

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

```auto
{{{
      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

---

<div class="post-metadata">

**Author:** ![James](https://avatars.discourse-cdn.com/v4/letter/j/bc8723/32.png) [@James](https://community.transloadit.com/u/James)\
**Post date:** [December 28, 2011, 4:50pm UTC](https://community.transloadit.com/t/javascript-submit-form/18040/3 "2011-12-28T16:50:00Z")

</div>

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…

```auto
$('#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.

---

<div class="post-metadata">

**Author:** ![tim-kos](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@tim-kos](https://community.transloadit.com/u/tim-kos)\
**Post date:** [December 29, 2011, 7:07am UTC](https://community.transloadit.com/t/javascript-submit-form/18040/4 "2011-12-29T07:07:00Z")

</div>

You are welcome, glad it worked 🙂

---

<div class="post-metadata">

**Author:** ![tim-kos](https://avatars.discourse-cdn.com/v4/letter/t/bbe5ce/32.png) [@tim-kos](https://community.transloadit.com/u/tim-kos)\
**Post date:** [January 3, 2012, 9:10am UTC](https://community.transloadit.com/t/javascript-submit-form/18040/5 "2012-01-03T09:10:00Z")

</div>

Closing this.

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex032/uploads/transloadit/original/1X/04ee57da0cb7ac8728a9ac5965c288164f4ce280.svg) [@system](https://community.transloadit.com/u/system)\
**Post date:** [October 7, 2026, 9:52am UTC](https://community.transloadit.com/t/javascript-submit-form/18040/6 "2026-10-07T09:52:41Z")

</div>