Mailchimp內嵌表單驗證不工作的JS加載HTML

我想創建一個自定義Mailchimp彈出窗口。我正在使用它們的嵌入式表單代碼，但是使用JS（或jQuery）從單獨的文件中單擊按鈕，將表單HTML加載到頁面上。我不希望用戶在完成表單後重定向到Mailchimp的Thank You頁面。當我不嘗試單獨加載表單HTML並將其放在主頁上時，內聯驗證正在工作，並且您沒有重定向到Mailchimp頁面。但是，當我通過JS或jQuery從另一個文件加載相同的表單代碼時，內聯驗證不起作用，並且您被重定向到Mailchimp頁面。有沒有辦法從另一個文件加載HTML格式並避免重定向？Mailchimp內嵌表單驗證不工作的JS加載HTML

我最初使用jQuery，發現很多文章暗示這個問題是Mailchimp和jQuery之間的衝突，但推薦的修復似乎不起作用，並且切換回JS只是無法修復它。我已經嘗試了很多不同的東西，但對於jQueryjQuery來說相當新穎，所以可能會漏掉一些明顯的東西 - 提前致歉！

下面是我使用了jQuery版本的HTML：

<!-- Form to be loaded into here on button click --> 
<div id="mailchimp-popup-outer"></div> 

<div class="mailchimp-popup-button"> 
    <h4>Subscribe to our newsletter:</h4> 
    <button id="popup">Subscribe</button> 
</div>

這裏的外在形式文件 - form.html（基本上只是Mailchimp嵌入默認情況下，有一些編輯）：

<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&amp;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 to 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 your email address or name with anybody else, you can unsubscribe from our newsletter at any time.</small></p><br> 
        <!-- real people should not fill this in and expect good things - do not remove this 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 for subscribing. You will receive an email with instructions on how to confirm your subscription.</div> 
      </div> 
     </div> 
    </div>     

</div>

而這裏的jQuery的（在custom.js）：

// Also tried avoiding using $ in case of conflict with Mailchimp's variables as suggested by other articles, to 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);

我也嘗試過的情況下，切換到JS它是一個jQuery的問題在某種程度上，這是這（與在HTML一些小的修改，以把在onclick功能等）：

// 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(); 
    }

什麼莫名其妙的我，如果我直接把HTML表單的頁面，而不是加載它，然後彈出按照希望與內聯驗證工作，而不是指導用戶離開網站。這似乎是關於加載它導致問題的過程 - 我想呢？

來源

2015-04-01 vitauria

Mailchimp內嵌表單驗證不工作的JS加載HTML

回答

相關問題