I'm building a form page with Webflow that I connected with a "subscribe" form from Mailchimp. What I'd like to achieve is that when the user inserts the email address, if the form is submitted successfully, another part of the page is shown (by hiding a div that initially covers the whole page). To check if the form is successful I'm looking for the visibility of a particular div with class "success-message-2" that gets "display: block;" when the form is submitted, but it seems that my javascript is never able to target this div. this is the code I wrote
$('.submit-btn').on('click',function(){
if (document.querySelector(".success-message-2").style.display == 'block'){
// form submitted successfully
// do something
}
});
but apparently, I can never target that class. So I thought it might be a timing issue so I wrote a loop that checks every 10ms but again I can never see any of my console log inside the if.
function checkForm(){
if (document.querySelector(".success-message-2").style.display == 'block'){
// form submitted succsefully
// do something
}
setTimeout("checkForm()",10);
}
checkForm();
Can you help me understand what I'm doing wrong? Is there some kind of block since on Mailchimp forms?