SIGN UP

re-initialize JS event

By: Robbert Rosario | Asked: 11/05/2024
Forums › Category: Code Help › re-initialize JS event
0 Vote Up Vote Down
Robbert Rosario asked 2 months ago
Hello,

I am loading Formidable Forms within a modal, which isn't visible on the page at first but is loaded on demand. Once I submit the form the page just refreshes. My theory is that JS hasn't been able to initialize on the form, but so would have to be retriggered. Does Formidable Forms have a re-initialize event?

For example another form plugin has: const forms = document.querySelectorAll('.wpcf-form');   forms.forEach(form=>{    wpcf.init(form); });

This is what I am looking for within Formidable, I have searched the docs but can't find it.
2 Answers
0 Vote Up Vote Down
Victor Font answered 2 months ago
Loading a form in a modal does not prevent jQuery from loading. The modal exists on the page and is hidden until invoked. Submitting a form always refreshes a page unless you have submit this page with Ajax enabled, but if you have confirmation messages enabled, the page will still refresh to display the message. jQuery/JavaScript are front end tools. They do not have reinit functions unless you create one in custom code for your purpose. This article explains how I reinit jQuery for newly added repeater rows. The same principle applies to any reint function. https://formidable-masterminds.com/repeaters-and-complex-jquery-operations/
Robbert Rosario replied 2 months ago

Sorry should have mentioned I am using AJAX.

Actually the modal exists on the page but the form doesn't and it's not hidden in the page. I am loading the form on-demand so it isn't there first page-load.

I don't know what repeaters are in Formidable Forms - I am just looking for a way to re-init the Formidable JS so that it looks at the DOM elements again.

Victor Font replied 2 months ago

The article I referenced may be about repeaters, but it's the only resource I have that teaches how to reinit JS after an Ajax call.

Robbert Rosario replied 2 months ago

I see, well I am a experienced developer and know my way around JavaScript so I am really just looking for some pointers to documentation of some sort to a Formidable Forms alternative too:

const forms = document.querySelectorAll('.wpcf-form'); forms.forEach(form=>{ wpcf.init(form); });

Which reinitialises the form and all the event handlers.

Victor Font replied 2 months ago

Good luck with your challenge.

0 Vote Up Vote Down
Bobby Clapp answered 1 month ago

Not sure it will help, but here is a generic AI answer: https://paste2.org/EncjIn3J
Maybe it will trigger some thought.

Making the Best WordPress Plugin even better - Together

Take on bigger projects with confidence knowing you have access to an entire community of Formidable Experts and Professionals who have your back when the going gets tough. You got this!
Join the community
crossarrow-right