Trigger Transloadit on submit of form

How can I alter my current code to trigger the submission of this form on submit and not on upload?

<!-- Hotjar Tracking Code for https://www.charleskochinstitute.org -->
<script>
(function(h,o,t,j,a,r){
    h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
    h._hjSettings={hjid:246733,hjsv:5};
    a=o.getElementsByTagName('head')[0];
    r=o.createElement('script');r.async=1;
    r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
    a.appendChild(r);
})(window,document,'//static.hotjar.com/c/hotjar-','.js?sv=');
<style>.supportInfo{display:none;}</style>
<style>
#tfa_Questionnaire {
display: none !important;
}
</style>

<!-- Video Upload -->
<!-- jQuery and Transloadit libraries -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//s3.amazonaws.com/cki-public-files/transloadit/jquery.transloadit3-latest.js"></script>
<script src="//assets.transloadit.com/js/jquery.transloadit2-v3-latest.js"></script>


<script type='text/javascript'>
  var ck = {};
  ck.containerId = '#tfa_9334904856293-HTML';
  ck.hiddenId = '#tfa_5';
  ck.submitSelector = "input[value='Complete Application']";

  ck.hideSubmit = function() {
    $(ck.submitSelector).prop('disabled', true)
  .css('cursor', 'default')
  .css('opacity', '0.5');
  };

  ck.showSubmit = function() {
$(ck.submitSelector).prop('disabled', false)
  .css('cursor', 'pointer')
  .css('opacity', '1');
  };

  ck.formSuccess = function() {
console.log('line 62');
$('#video-upload').css('display', 'none');
$('#video-upload').val('');
$(ck.containerId).append(function() {
  var htmlStr = '<div class="video-message"><div>Video Uploaded!</div>';
  htmlStr += '<div id="video-reset">Reset</div></div>';
  return htmlStr;
});
ck.showSubmit();

// Add event listener for reset link
$('#video-reset').click(function() {
  ck.formReset();
});
  };

  ck.formReset = function() {
$('#video-upload').css('display', 'inline-block');
$('.video-message').remove();
ck.hideSubmit();
  };

  ck.initTransloadit = function(form) {
console.log('line 85');
form.transloadit({
  wait: true,
  triggerUploadOnFileSelection: true,
  debug: true,
  exclude: '#tfa_144',
  autoSubmit: false,
  //changed from true
  maxNumberOfUploadedFiles: 1,
  onSuccess: function(res) {
    console.log('line 95');
    $(ck.hiddenId).val(res.assembly_id);
    ck.formSuccess(form);
  },
  params: {
    auth: { 
      key: 'xxxxx', 
      max_size: 52428800
    },
    template_id: 'xxxxx'
  }
});

ck.hideSubmit();
  };

  $(document).ready(function() {

var form = $('form');

// Check if video has already been uploaded
if ($(ck.hiddenId).val()) {
  ck.formSuccess(form);
} else {
  ck.initTransloadit(form);
}

  });
</script>
1 Like

Hey there,

This is the setting that triggers the submission on file select. If you remove this (or set it to false) things will trigger on submit.

1 Like