Jquery 嵌入表单在Episerver内容块中不起作用

当我进一步了解我的问题时，此问题已被编辑

我的任务是将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>

<%@ 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>

根母版页文件底部的脚本

    <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>

<%@ 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>

var addthis\u config={“数据跟踪地址栏”：false}；
if（document.location.hostname==“已编辑”）{
（功能（i、s、o、g、r、a、m）{
i['GoogleAnalyticsObject']=r；i[r]=i[r]| |函数（）{
（i[r].q=i[r].q | |[]）.push（参数）；
}，i[r].l=1*新日期（）；a=s.createElement（o），
m=s.getElementsByTagName（o）[0]；a.async=1；a.src=g；m.parentNode.insertBefore（a，m）；
})（窗口，文档，“脚本”，“www.google-analytics.com/analytics.js”，“ga”）；
ga（“创建”、“编辑”、“自动”）；
ga（'require'，'displayfeatures'）；
ga（‘发送’、‘页面浏览’）；
}

来自另一个包含的ascx文件（mainnav）的脚本

$（函数（）{
//设置下拉菜单
$（'.dropdown toggle'）.dropdown（）；
//修复输入元素单击问题
$（'.下拉菜单输入，.下拉菜单标签'）。单击（函数（e）{
e、 停止传播（）；
});
});

表单，在ascx视图文件中

    <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>

<%@ 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>

订阅
*表示需要
名字*
姓
电子邮件地址*

您可以尝试将novalidate属性添加到表单中，这可能是由于验证问题造成的。

如果这只是嵌入的HTML，则无需担心特定于Epi的内容。我会先让表单在页面上工作，而不是在块上工作。如果您将HTML文件中的代码复制到Epi视图中，它是否有效

这是使用web表单，因此您可以尝试将

runat=“server”

添加到表单或按钮上

---

另外，我假设您拥有mailchimp提供的URL的有效URL。如果您查看控制台，是否发现任何错误？

谢谢；novalidate属性已经是表单的一部分：-（哦，对不起，我没有看到，你检查过你是否正在打电话给mailchimp吗？如果你还没有，请启用保留日志，否则电话不会显示出来。谢谢Ivan！我确定我没有启用保留日志，因为我不知道那是什么。我会四处搜索，尝试找出那是什么以及如何做。你好，Ivan，我再次启用了在Chrome开发者工具中保留日志（这很好——我想知道如何检查我的表单要去哪里）。该表单似乎将数据发送到与其嵌入的页面完全相同的页面，而不是

https://redacted.list-manage.com/subscribe/post?u=redacted&；id=根据表单元素的
action=
属性指定进行了编辑。我的大问题是为什么？是什么覆盖了表单的action属性？找到了问题。很好的gri由于某种原因，无论是谁创建了这个网站，都将整个页面包含在一个
元素中，一直放在根母版页中。我不知道为什么有必要这样做；我会联系这个家伙。同时，我不确定是否会在根母版页中隐藏隐藏表单，通过javascript更新其字段，并通过javascript提交，将此表单用作虚拟元素（而不是实际的
元素），或者我是否会想出一些完全不同的东西。非常感谢，Jon！-我已经看到
runat=“server”
代码中有很多内容。我会立即尝试，无论是表单还是按钮。-我没有意识到页面上的行为与块上的行为之间存在潜在的差异。请原谅我的无知：“Epi视图”是什么？我很高兴在那里复制我的代码，看看它是否有效。嗨，Jon，当我添加
runat=“server”时
对于表单元素，页面完全没有呈现。我认为错误是“无法[find/render/locate/display？]链接”，当我将
runat=“server”
添加到按钮标记时，所有内容都已加载，但行为没有改变。提交表单只是刷新页面。我还尝试添加
runat=“server”
添加到包含表单的
元素中，无法解释的行为没有改变。我在Epi视图上做了一些谷歌搜索，但我仍然不知道那是什么。发现了问题。好悲伤。出于某种原因，无论是谁建立了这个网站，都附上了整个pa