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.

Answer

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>

Advertisement

Answer