嵌入式表單在 Episerver 內容塊中不起作用

Question

隨着我對我的問題的了解更多，此問題已被編輯。

我的任務是將 MailChimp 訂閱表單嵌入到我們 Episerver 安裝的內容塊中。

表格不起作用。 看起來不錯！ 但是當用戶點擊“提交”時，它只是刷新頁面。

• 這些表單在 Mailchimp 托管時有效，但在嵌入到我們 Episerver 站點上的內容塊時無效（已全部嘗試過）。
• 當嵌入到我桌面上的靜態、非托管 HTML 文件中時，這些表單可以工作。
• 我已經禁用了主測試頁面上的每個 jquery 腳本，想知道那里的某些東西（可能是驗證器）是否干擾了表單。 但是禁用所有腳本后，表單在提交時仍然刷新頁面。

我不知道是什么導致了任何沖突，它會使簡單的 HTML 表單忽略其“action=”屬性，而是刷新頁面。 這當然是我的錯誤或無知：但在我的挖掘中我一直無法找到答案，所以我向大家尋求幫助。

如果我沒有包含足夠的信息，請讓我知道還需要包含哪些信息。

根母版頁文件頂部的鏈接腳本

    <script src="/Scripts/jquery-3.1.1.min.js"></script>
    <script src="/Scripts/bootstrap.min.js"></script>
    <script type="text/javascript" src="/Scripts/bootstrapValidator.min.js"></script>

根母版頁文件底部的腳本

        <script type="text/javascript">var addthis_config = { "data_track_addressbar": false };</script>
        <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=redacted"></script>
        <script type="text/javascript">
            if (document.location.hostname == "redacted") {

                (function (i, s, o, g, r, a, m) {
                    i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                        (i[r].q = i[r].q || []).push(arguments);
                    }, i[r].l = 1 * new Date(); a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m);
                })(window, document, 'script', '//www.google-analytics.com/analytics.js', 'ga');

                ga('create', 'redacted', 'auto');
                ga('require', 'displayfeatures');
                ga('send', 'pageview');

            }
        </script>

來自另一個包含的 ascx 文件（mainnav）的腳本

<script>
    $(function () {
        // Setup drop down menu
        $('.dropdown-toggle').dropdown();

        // Fix input element click problem
        $('.dropdown-menu input, .dropdown-menu label').click(function (e) {
            e.stopPropagation();
        });
    });
</script>

表單，在 ascx 視圖文件中

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="MailChimpBlockControl.ascx.cs" Inherits="JamesTrustWF.Web.Views.Blocks.MailChimpBlockControl" %>

<div class="panel panel-default">
    <div class="panel-body" style="margin: 0;padding:0;">

        <!-- Begin Mailchimp Signup Form -->
        <div id="mc_embed_signup">
        <form action="url-provided-by-mailchimp" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <div id="mc_embed_signup_scroll">
            <h2>Subscribe</h2>
        <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
        <div class="mc-field-group">
            <label for="mce-FNAME">First Names  <span class="asterisk">*</span>
        </label>
            <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
        </div>
        <div class="mc-field-group">
            <label for="mce-LNAME">Last Name </label>
            <input type="text" value="" name="LNAME" class="" id="mce-LNAME">
        </div>
        <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>    <!-- 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;" aria-hidden="true"><input type="text" name="redacted" tabindex="-1" value=""></div>
            <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
            </div>
        </form>
        </div>

        <!--End mc_embed_signup-->

    </div>
</div>

Answer 1

如果這只是嵌入的 HTML，那么您無需擔心特定於 Epi 的內容。 我會首先讓表單在頁面上而不是塊上工作。 如果您將 HTML 文件中的代碼復制到 Epi 視圖中，它會起作用嗎？

這是使用網絡表單，因此您可以嘗試將runat="server"到表單或按鈕上

另外，我假設您有 url-provided-by-mailchimp 的有效 URL。 你看看你的控制台有沒有發現任何錯誤？

Answer 2

您可以嘗試向表單添加 novalidate 屬性，這可能是由驗證問題引起的。