Встроенная форма не работает в блоке содержимого 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>

сценарий из другого включенного файла 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>

person southtexasmike    schedule 19.11.2020    source источник


Ответы (2)


Если это просто встроенный HTML, вам не о чем беспокоиться ни о чем конкретном Epi. Я бы начал с того, что форма работала на странице, а не на блоке. Если вы скопируете код из своего HTML-файла в представление Epi, он будет работать?

Здесь используются веб-формы, поэтому вы можете попробовать добавить runat="server" в форму или кнопку

Кроме того, я предполагаю, что у вас есть действующий URL-адрес для URL-адреса, предоставленного почтой. Если вы посмотрите в консоль, видите ли вы ошибку?

person Jon Jones    schedule 22.11.2020
comment
Большое спасибо, Джон! - Я довольно много видел runat="server" в коде. Попробую сразу, как для формы, так и для кнопки. - Я не понимал, что существует потенциальная разница между поведением на странице и в блоке. Пожалуйста, простите мое незнание: что такое Epi View? Я счастлив скопировать туда свой код и посмотреть, работает ли он. - person southtexasmike; 23.11.2020
comment
Привет, Джон, когда я добавил runat="server" в элемент формы, страница полностью не отображалась. Ошибка, я думаю, заключалась в том, что не удалось найти ссылку [найти / отобразить / найти / отобразить?]. Когда я добавил runat="server" в тег кнопки, все загрузилось, но поведение не изменилось. Отправка формы просто обновляет страницу. - person southtexasmike; 23.11.2020
comment
Я также пробовал добавить runat="server" к <div> элементам, содержащим форму, и не менять необъяснимого поведения. Я немного поискал в Google в режиме просмотра Epi, но до сих пор не понимаю, что это такое. - person southtexasmike; 24.11.2020
comment
Нашел проблему. Печаль во благо. По какой-то причине тот, кто создал этот сайт, заключил ВСЮ страницу в элемент <form>, вплоть до корневой главной страницы. Понятия не имею, зачем это было нужно; Я свяжусь с парнем. А пока я не уверен, скрою ли я скрытую форму на корневой главной странице, обновлю ее поля через javascript и отправлю ее через javascript, используя эту форму как фиктивную (а не как фактический элемент <form>). , или если я придумаю что-нибудь совсем другое. - person southtexasmike; 25.11.2020
comment
Хахаха ... звучит как интересный архитектурный выбор. Не могли бы вы передать свойство страницы, чтобы отключить родительскую форму на этой конкретной странице, например если заявление это основано на Falg - person Jon Jones; 26.11.2020
comment
Возможно, я мог бы это сделать, но я боюсь сделать это, прежде чем узнаю почему первоначальный конструктор решил сделать все это в первую очередь формой. Что, если я сломаю некоторые встроенные функции, о которых еще не знаю? К сожалению, передача знаний по этому вопросу была действительно недостаточной, и документации нет. :-( Так что мне осталось прочитать весь код. - person southtexasmike; 29.11.2020

Вы можете попробовать добавить атрибут novalidate в свою форму, это может быть вызвано проблемой проверки.

person Ivan Stefanov    schedule 22.11.2020
comment
Спасибо; атрибут novalidate уже является частью формы. :-( - person southtexasmike; 22.11.2020
comment
Извините, я этого не видел, вы проверяли, звоните ли вы в mailchimp? Просто включите сохранение журнала, если вы еще этого не сделали, иначе звонок не будет отображаться - person Ivan Stefanov; 22.11.2020
comment
Спасибо, Иван! Я уверен, что не включил журнал сохранения, потому что не знаю, что это такое. Я поищу и попытаюсь выяснить, что это такое и как это сделать. - person southtexasmike; 23.11.2020
comment
Еще раз привет, Иван, я включил сохранение журнала в инструментах разработчика Chrome (это здорово - мне было интересно, как проверить, куда моя форма пыталась перейти). Похоже, что форма отправила данные на ту же страницу, в которую они встроены, а не на https://redacted.list-manage.com/subscribe/post?u=redacted&amp;id=redacted, как указывает атрибут action= элемента формы. Мой большой вопрос: ПОЧЕМУ? Что отменяет атрибут действия моей формы? - person southtexasmike; 24.11.2020
comment
Нашел проблему. Печаль во благо. По какой-то причине тот, кто создал этот сайт, заключил ВСЮ страницу в элемент <form>, вплоть до корневой главной страницы. Понятия не имею, зачем это было нужно; Я свяжусь с парнем. А пока я не уверен, скрою ли я скрытую форму на корневой главной странице, обновлю ее поля через javascript и отправлю ее через javascript, используя эту форму как фиктивную (а не как фактический элемент <form>). , или если я придумаю что-нибудь совсем другое. - person southtexasmike; 25.11.2020