Skip Navigation

[Resolved] Updating a field within a CRED form in and iFrame using Javascript/JQuery

This support ticket is created 5 years ago. There's a good chance that you are reading advice that it now obsolete.

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

Sun Mon Tue Wed Thu Fri Sat
- 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 10:00 – 13:00 -
- 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 14:00 – 18:00 -

Supporter timezone: Asia/Kolkata (GMT+05:30)

This topic contains 3 replies, has 2 voices.

Last updated by Minesh 5 years ago.

Assisted by: Minesh.

Author
Posts
#1410215

Hi there,

I'm building a video uploading form.

I'm playing the submit form and edit form within an iFrame on the page where the uploader happens. The uploader has triggers for certain actions, for example upload started.

I'm trying to figure out how to communicate with the form and submit it. I've managed to do it with plain old javascript, but it submits the form and then redirects to the same form, rather than the custom redirect I have in my functions (to the edit post page). I've tried Jquery forms plugin, however this code below breaks the process

I tried with:

uppy.on('upload', (data) => {
console.log('Starting upload')
var addFiles = document.querySelector('.uppy-DashboardAddFiles');
var uploadArea = document.querySelector('.uppy-Dashboard');
addFiles.style.display = 'none';
uploadArea.style.height = '50px';
console.log('Reduced uploader size.')
(function($) {

$('#video-forms').contents().find('cred_form_3371360_1')[0].submit()
console.log('Clicked submit button')
})( jQuery );

})

uppy.on('complete', (result) => {
console.log('Upload complete! We’ve uploaded these files:', result.successful)

})

#video-forms is iframe id.

But this doesn't seem to work. Is there a way to trigger a javascript event to submit the form?

#1411161

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

Hello. Thank you for contacting the Toolset support.

Normally, you should add the custom Javascript to your form's JS editor. You should normally wrap your custom JS code with document ready method.

Please check the following screenshot: hidden link

jQuery(document).ready(function($){
 
     /// add your custom code here
       
});

Regarding the redirection, Toolset forms offer the redirection hook: cred_success_redirect
=> https://toolset.com/documentation/programmer-reference/cred-api/#cred_success_redirect

You should check if that helps you to the URL where you want to redirect the page after submitting the form but I think redirection will have effect on the iframe not the page where you added the iframe. I do not know yet where exactly you want to redirect the page, If its within the iframe then the "cred_success_redirect" hook should work.

#1411175

Hey buddy,

Thanks for this. I mean the CRED form is within an iFrame and the javascript listed above is coming from the parent page. I'm trying to submit the form with a javascript even from parent to iframe.

Does this still apply?

Thanks
Kyle

#1411283

Minesh
Supporter

Languages: English (English )

Timezone: Asia/Kolkata (GMT+05:30)

The JS code you shared is custom code and as per our support policy we do not entertain the custom code edits.

However - you can check the following links that may help you:
- https://stackoverflow.com/questions/3332756/difference-between-window-location-href-and-top-location-href
- hidden link
- https://stackoverflow.com/questions/14667158/manage-iframes-form-submit-from-parent-frame

If you need custom programming help for your project, please feel free to contact our certified partners:
=> https://toolset.com/contractors/