• Resolved kubajjz

    (@kubajjz)


    Hi, if I putt this code (copied from your Knowledge Base) to my website:

    <script>
    document.querySelector('.hf-form-356').on('hf-success', function(e) {
       // your code goes here
    });
    </script>

    I get an error:
    'document.querySelector('.hf-form-356').on' is undefined)

    Do you know, where is a problem?
    Thanks a lot,
    Jakub

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Where on that page can I find the HTML form?

    Thanks for letting me know.

    Thread Starter kubajjz

    (@kubajjz)

    The red button in header.

    But you can easily see the error in conslole > navigate to error.
    Or search (ctrl/cmd+f) in code…

    Maybe HTML forms script isn’t loaded yet at the time you execute that JS code.

    Can you add

    document.addEventListener("DOMContentLoaded", function(event) { 
      //code goes here
    });

    and see if that solves the issue for you?

    Hope that helps. If you have any questions, please let me know!

    Thread Starter kubajjz

    (@kubajjz)

    I have tried many conditions (your solution as well) and I am loading it after everything was fully loaded. And I still get same error:

    TypeError: document.querySelector('.hf-form-356').on is not a function. (In 'document.querySelector('.hf-form-356').on('hf-submit', function(e) {
        console.log('sent');
        window.dataLayer.push({
         'event': 'FormSent'
        });
      })', 'document.querySelector('.hf-form-356').on' is undefined)

    I have run out of solutions… 🙁

    Thread Starter kubajjz

    (@kubajjz)

    I finally found something. It is working in jquery not in javascript…
    When I wrap it in jquery, it is working. I think, it is because “document.querySelector” will select specific form, but you can work with it as an object.

    Here is working code – in default WP jQuery v1.12.4 with anonym wrapper function

    <script>
    (function ($) {
        $(window).ready(function () {
            $('.hf-form-356').on('hf-submit', function(e) {
                console.log('email-send');
                window.dataLayer.push({
                    'event': 'FormSent'
                });
            });
        });
    }(jQuery));
    </script>

    Have a nice day,
    Jakub

    Awesome, Thanks for letting me know.

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘JavaScript events – error: undefined’ is closed to new replies.