CODEWITHSUNDEEP
javascriptajaxwordpressformselementor
Tyrion
Tyrion

Reputation: 29

Javascript in WordPress won't work because of AJAX form

For a client, I was using a form built with Formidable Forms plugin. In Elementor, I added this piece of code:

<script type="text/javascript">
document.querySelector('.example').innerHTML = '<img src = "/wp-content/uploads/2022/09/svg1.svg" class="elementor img" alt="example"/><br/><span class="dptitle">example</span>';
</script>

This code worked perfectly fine and the SVG was inserted.

However, after changing the form to an AJAX form, the code above is no longer working.

Does anyone have any idea on how this Javascript can be working in an AJAX form?

Thanks a lot in advance.

Upvotes: 0

Views: 102

Answers (1)

Vijay Hardaha
Vijay Hardaha

Reputation: 2584

You can use frmPageChanged js event to inject your js code.

You can see example here https://formidableforms.com/knowledgebase/javascript-examples/javascript-after-form-submit/#kb-after-another-pages-content-is-shown

So your code should be like this:

<script>
    jQuery(document).ready(function ($) {
        $(document).on("frmPageChanged", function (event, form, response) {
            document.querySelector(".example").innerHTML = '<img src = "/wp-content/uploads/2022/09/svg1.svg" class="elementor img" alt="example"/><br/><span class="dptitle">example</span>';
        });
    });
</script>

Upvotes: 1

Related Questions