DOM event handlers not working

  • I’m trying to utilize DOM events that are mentioned on your page here – https://contactform7.com/dom-events/

    I used code like this: 

    function myFormButtonClicked(){
    console.log("this works");
    myUploadMessage.innerHTML = "";
}

let myCf7Form = document.querySelector('.wpcf7-form');
myCf7Form.addEventListener('wpcf7submit', myFormButtonClicked)

    Not sure why is this not working, I tried wpcf7submit and wpcf7mailsent and won’t trigger the function. This myUploadMessage should be emptied when form is sent successfully.

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

  • you missed the brackets on your function call plus add semicolon at the end:

    myCf7Form.addEventListener('wpcf7submit', myFormButtonClicked());

    Thread Starter Usce

    (@usce)

    In actual implementation there is semicolon at the end(I misspelled here), and functions inside addEventListener methods don’t need brackets.

    Tried multiple ways of writing this, but none of if reacts the way it should.

    • This reply was modified 6 years, 1 month ago by Usce.

    If you tried multiple ways, it may be a firing issue, you can either wrap your function in:
    $('.wpcf7-form').ajaxComplete(function() {
    or: setTimeout(function().
    So it won’t fire until ajax is complete.

    Also:
    wpcf7:submit
    May work better.(it’s how I use it)

    Thread Starter Usce

    (@usce)

    Hi there,

    Thanks for letting me know on .ajaxComplete, haven’t thought about it. I have written some working code but it used setTimeout to check afterwards if .wpcf7-mail-sent-ok is existing in message, so I updated it with .ajaxComplete as it is actual time necessary for class that indicates content is send to appear: 

    $('.wpcf7-form').ajaxComplete(function(){
    if(myCf7AlertMessage.classList.contains('wpcf7-mail-sent-ok')){
        myUploadMessage.innerHTML = "";
    }
});

    I used if state to check if sending is actually successful, if I remove it it will actually remove myUploadMessage content even if sending is not successful.

    Thanks on help!

    • This reply was modified 6 years, 1 month ago by Usce.
Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘DOM event handlers not working’ is closed to new replies.