javascript - Mailchimp inline form validation not working for JS loaded HTML -
i'm trying create custom mailchimp popup. i'm using embeddable form code loading form html onto page on button click using js (or jquery) separate file. don't want user redirected mailchimp's thank page on completion of form. when don't try load form html separately, , have on main page, inline validation working , you're not redirected mailchimp page. when load same form code file either js or jquery, inline validation not work , you're redirected mailchimp page. there way load form html file , avoid redirect?
i using jquery , found lot of articles suggesting issue conflict between mailchimp , jquery, recommended fixes didn't seem work, , switching js not fix it. i've tried lot of different things new js & jquery missing obvious - apologies in advance!
here's html i'm using jquery version:
<!-- form loaded here on button click --> <div id="mailchimp-popup-outer"></div> <div class="mailchimp-popup-button"> <h4>subscribe our newsletter:</h4> <button id="popup">subscribe</button> </div> here's external form file - form.html (basically mailchimp embed default, few edits):
<div id="insert-me"> <!-- subscribe popup --> <div class="mailchimp-popup-wrapper" id="form-popup"> <div class="mailchimp-popup"> <div id="mc_embed_signup"> <form action="//skillsyouneed.us10.list-manage.com/subscribe/post?u=a868895a9768ad4ae0ec3c321&id=b129192227" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate> <img class="close-btn" id="close-popup" src="images/close-icon-3.png"> <h4>subscribe our newsletter</h4> <hr> <div class="mc-field-group"> <label for="mce-name">first name <span class="asterisk">*</span></label> <input type="text" value="" name="name" class="required" id="mce-name"> </div> <div id="mc_embed_signup_scroll"> <div class="mc-field-group"> <label for="mce-email">email address <span class="asterisk">*</span></label> <input type="email" value="" name="email" class="required email" id="mce-email"> </div> <div id="mce-responses" class="clear"> <div class="response" id="mce-error-response" style="display:none"></div> <div class="response" id="mce-success-response" style="display:none"></div> </div> <p class="text-success"><small>we <strong>will never</strong> share email address or name else, can unsubscribe our newsletter @ time.</small></p><br> <!-- real people should not fill in , expect things - not remove or risk form bot signups--> <div style="position: absolute; left: -5000px;"><input type="text" name="b_a868895a9768ad4ae0ec3c321_b129192227" tabindex="-1" value=""></div> <div class="text_align_center"><input type="submit" value="subscribe" name="subscribe" id="mc-embedded-subscribe" class="button" onclick ="confirm_show()"></div> </div> </form> </div> <!-- mc-validate --> <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new array(); window.ftypes = new array();fnames[0]='email';ftypes[0]='email';fnames[1]='name';ftypes[1]='text';}(jquery));var $mcj = jquery.noconflict(true);</script> </div> </div> <!-- confirmation popup --> <div class="mailchimp-popup-wrapper" id="confirm-popup"> <div class="mailchimp-popup"> <div id="confirm-popup-inner"> <img class="close-btn" id="close-confirm" src="images/close-icon-3.png"> <h4>thanks!</h4> <hr> <div id="confirm-text">thanks subscribing. receive email instructions on how confirm subscription.</div> </div> </div> </div> </div> and here's jquery (in custom.js):
// tried avoiding using $ in case of conflict mailchimp's variables suggested other articles, no avail. (function($){ $(document).on("click", "#popup", function () { $( "#mailchimp-popup-outer" ).load( "form.html #insert-me", function() { $( "#form-popup" ).addclass( "display-block" ); }); event.preventdefault(); return false; }); $(document).on("click", "#close-popup", function () { $( "#form-popup" ).removeclass( "display-block" ).addclass( "display-none" ); }); $(document).on("click", "#mc-embedded-subscribe", function () { $( "#form-popup" ).removeclass( "display-block" ).addclass( "display-none" ); $( "#confirm-popup" ).addclass( "display-block" ); }); $(document).on("click", "#close-confirm", function () { $( "#confirm-popup" ).removeclass( "display-block" ).addclass( "display-none" ); }); })(jquery); i tried switching js in case jquery issue somehow, (with small changes html put in onclick functions etc):
// display popup form function div_show() { document.getelementbyid('form-popup').style.display = "block"; } // hide popup form function div_hide() { document.getelementbyid('form-popup').style.display = "none"; } // display popup confirmation function confirm_show() { document.getelementbyid('form-popup').style.display = "none"; document.getelementbyid('confirm-popup').style.display = "block"; } // hide popup confirmation function confirm_hide() { document.getelementbyid('confirm-popup').style.display = "none"; } // load form function loadpage(href) { var xmlhttp = new xmlhttprequest(); xmlhttp.open("get", href, false); xmlhttp.send(); return xmlhttp.responsetext; } function subscribe_click() { document.getelementbyid('mailchimp-popup-outer').innerhtml = loadpage("form.html"); div_show(); } what's baffling me if put form html in page directly, instead of loading in, popup works hoped inline validation , not directing users away site. seems process of loading in causing issue - think?
in experience, mailchimp adds javascript files page if detects mailchimp form being used on page. when load form dynamically, mailchimp doesn't detect it.
one idea explicitly load necessary javascript files.
another idea put invisible mailchimp dummy form on page cause of right files loaded use dynamically loaded form.
Comments
Post a Comment