CODEWITHSUNDEEP
javascripthtmlform-submitcontact-form-7
Ádám Kruzics
Ádám Kruzics

Reputation: 1

<wpcf7mailsent> trigger not working when CF7 .submit() was called programatically

I made a site [https://www.gokartbudapest.hu/hu/ajandekutalvany/ajandekutalvany_voucher/]* where my clients can book appointments — but I didnt want to use CF7 directly as it looks dodgy and I wanted to make it more fancy. *it is yet under construction, not yet the final looks.

So I collect all the data from the clients than put everything programatically (javascript) into a hidden (yet its visible) CF7 from and than javascript calls the CF7 submission routine and the necessary info is sent to me via an email.

My problem is that when CF7's form .submit() is executed the other triggers are not working; neither the nor the so it makes me now clueless how to control activities after submission though I want to redirect to an other subpage, clear the fields ... etc.

Seems like DOM events are bypassed once javascript calls the wpcf7submit programatically because when you hit the CF7's own SUBMIT button manually (yet visible on my site as for testing the whole form is not hidden) all triggers ( and ) works perfectly.

Do you have any ideas how I could : get the triggers though working, or : how to make a workaround to gain control when the submission went through.

This is the CF7 block:

<body>   
<div id="CF7 panel">[contact-form-7 id="a3064bc" title="Book-4" html_id="bookarace"]</div>
</body>

These are the triggers which are working fine when you press the CF7's form own SUBMIT button, but they remain silent when .submit() is called programatically (doesnt matter if you use the document or the Element place itself):

var Elem = document.getElementById('bookarace')  
// Elem.style.display = 'none'

document.addEventListener('wpcf7submit', function() {
    alert ('here-submit')
//  window.location.href = "https://www.gokartbudapest.hu"
    }, false )
    
Elem.addEventListener('wpcf7mailsent', function() {
    alert ('here-mailsent')
//  window.location.href = "https://www.gokartbudapest.hu"
    }, false )

So I guess the secret must be laying in the DOM event and the programatical call. Thanks, Adam

Upvotes: 0

Views: 53

Answers (0)

Related Questions