Campaign Monitor表单保持重定向

Question

新版Campaign Monitor订阅代码的工作方式不同。如您所见，代码提供了一个负责发送数据的js文件（copypastesubscribeformlogic.js）。

发生了什么变化？

以前，只有一个静态请求到CM端点订阅用户，并且很容易通过ajax请求订阅。现在，它需要两个单独的请求来订阅用户。第一个请求由ajax完成，由CM提供（js文件copypastesubscribeformlogic.js处理此请求）。

我的问题：我想在没有页面刷新或重定向的情况下在同一页面上加载成功消息，但它会一直重定向到默认的CM谢谢页面。

我的表格：

<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="XXXX-XXX-XX-X">
<p>       
    <input placeholder="Full Name" id="fieldName" name="cm-name" type="text" />
</p><br/>
<p>        
    <input placeholder="Email" id="fieldEmail" class="js-cm-email-input" name="cm-fhutty-fhutty" type="email" required /> 
</p><br/>
<p>
    <label for="fieldeihjlu">How did you hear of us?</label><br />
    <select  id="fieldeihjlu" name="cm-fo-eihjlu">
        <option value="1985454">Word of Mouth</option>
        <option value="1985450">Social Media</option>
        <option value="1985451">Press</option>
        <option value="1985452">Web Search</option>
        <option value="1985453">Sales and Marketing Activities</option>            
    </select>
</p>
<p>         
    <input class="js-cm-submit-button" type="submit" value="Submit">
</p>
</form>
<script type="text/javascript" src="https://js.createsend1.com/javascript/copypastesubscribeformlogic.js"></script>

成功消息（与表单相同的页面）：

<div id="success">
<h2 class='thank-you'>Thank you for subscribing</h2>
</div>

然后根据这个LINK我添加了以下js：

var campaign = (function (c, d, $) {

var body,
  form,
  form_id,
  config,
  successMessage;

c.init = function () {

body = $('body');
form = body.find('#' + config.formSelector);
form_id = form.attr('data-id');
successMessage = $('#' + config.successSelector);
successMessage.hide();

// On form submit.
form.submit(function (evt) {

  // Disable default form submit.
  evt.preventDefault();

  // Get e-mail value.
  email = $('input[type=email]', form).val();

  // Build request data for tokenRequest.
  request_data = "email=" + encodeURIComponent(email) + "&data=" + form_id;

  // Prepare tokenRequest.
  tokenRequest = new XMLHttpRequest();
  tokenRequest.open('POST', 'https://createsend.com//t/getsecuresubscribelink', true);
  tokenRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  tokenRequest.send(request_data);

  // Ready state.
  tokenRequest.onreadystatechange = function() {
    if (this.readyState === 4) {
      if (this.status === 200) {
        // Having token and new submit url we can create new request to subscribe a user.
        subscribeRequest = new XMLHttpRequest();
        subscribeRequest.open('POST', this.responseText, true);
        subscribeRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        subscribeRequest.send(form.serialize());
        // On ready state call response function.
        subscribeRequest.onreadystatechange = function() {
          c.response(subscribeRequest);
        }
      } else {
        c.response(tokenRequest);
      }
    }
  }
});
};

// Handle ajax response.
c.response = function(request) {
if (request.readyState === 4) {
  if (request.status === 200) {
    successMessage.show('slow');
  } else {
    form.prepend('<p class="error">' + config.errorMessage + '</p>');
  }
}
};

// Private
config = {
formSelector: 'form',
errorMessage: 'There was a problem submitting this form. Please try later.',
successSelector: 'success',
};

return c;

}(campaign || {}, {}, jQuery));

(function () {
 campaign.init();
})(jQuery);

*在页面加载时，我没有得到任何Console错误。

*在提交时我收到错误：Refused to execute script from https://www.createsend.com/t/subscribeerror?description=..... because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled，

但它仍然执行到默认的CM谢谢页面。

Answer 1

所以基本上它会调用然后显示消息。只是为了记住更新脚本中的ids（在下半部分）var successMessage = $('#success'); var form = $('#subForm')。

没有使用新的CM更新进行测试，但这对我有用。

CSS

#success {display: none;}

HTML / js：

<div id="success">
<h2 class='thank-you'>Thank you for subscribing</h2>
</div>


<form id="subForm" class="js-cm-form" action="https://www.createsend.com/t/subscribeerror?description=" method="post" data-id="XXXX-XXX-XX-X">
<p>       
    <input placeholder="Full Name" id="fieldName" name="cm-name" type="text" />
</p><br/>
<p>        
    <input placeholder="Email" id="fieldEmail" class="js-cm-email-input" name="cm-fhutty-fhutty" type="email" required /> 
</p><br/>
<p>
    <label for="fieldeihjlu">How did you hear of us?</label><br />
    <select  id="fieldeihjlu" name="cm-fo-eihjlu">
        <option value="1985454">Word of Mouth</option>
        <option value="1985450">Social Media</option>
        <option value="1985451">Press</option>
        <option value="1985452">Web Search</option>
        <option value="1985453">Sales and Marketing Activities</option>            
    </select>
</p>
<p>         
    <input class="js-cm-submit-button" type="submit" value="Submit">
</p>
</form>




    <script type="text/javascript" >
    ! function(e) {
    var t = {};

    function n(o) {
        if (t[o]) return t[o].exports;
        var r = t[o] = {
            i: o,
            l: !1,
            exports: {}
        };
        return e[o].call(r.exports, r, r.exports, n), r.l = !0, r.exports
    }
    n.m = e, n.c = t, n.d = function(e, t, o) {
        n.o(e, t) || Object.defineProperty(e, t, {
            configurable: !1,
            enumerable: !0,
            get: o
        })
    }, n.r = function(e) {
        Object.defineProperty(e, "__esModule", {
            value: !0
        })
    }, n.n = function(e) {
        var t = e && e.__esModule ? function() {
            return e.default
        } : function() {
            return e
        };
        return n.d(t, "a", t), t
    }, n.o = function(e, t) {
        return Object.prototype.hasOwnProperty.call(e, t)
    }, n.p = "", n(n.s = 1)
}([function(e, t) {
    var n;
    "function" != typeof(n = window.Element ? window.Element.prototype : window.HTMLElement.prototype).matches && (n.matches = n.msMatchesSelector || n.mozMatchesSelector || n.webkitMatchesSelector || function(e) {
            for (var t = (this.document || this.ownerDocument).querySelectorAll(e), n = 0; t[n] && t[n] !== this;) ++n;
            return Boolean(t[n])
        }), "function" != typeof n.closest && (n.closest = function(e) {
            for (var t = this; t && 1 === t.nodeType;) {
                if (t.matches(e)) return t;
                t = t.parentNode
            }
            return null
        }),
        function() {
            var e, t, n, o = document.documentElement || document.body;
            o.getAttribute("data-cm-hook") || (t = "submit", n = function(e) {
                var t = e.target.closest(".js-cm-form");
                t && (e.preventDefault ? e.preventDefault() : e.returnValue = !1, function(e, t, n) {
                    var o = n.querySelector(".js-cm-email-input"),
                        r = "email=" + encodeURIComponent(o.value) + "&data=" + encodeURIComponent(n.getAttribute("data-id")),
                        c = new XMLHttpRequest;
                    c.onreadystatechange=function(){
if (this.readyState === 4) {
if (this.status === 200) {

// Having token and new submit url we can create new request to subscribe a user.
var successMessage = $('#success');
var form = $('#subForm')

subscribeRequest = new XMLHttpRequest();
subscribeRequest.open('POST', this.responseText, true);
subscribeRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
subscribeRequest.send($("#subForm").serialize());
// On ready state call response function.
subscribeRequest.onreadystatechange = function() {

form.hide('fast');
successMessage.show('fast');
}
} else {
alert("error");
}
}
}, c.open(e, t, !0), c.setRequestHeader("Content-type", "application/x-www-form-urlencoded"), c.send(r)
                }("POST", "https://createsend.com//t/getsecuresubscribelink", t))
            }, (e = o).addEventListener ? e.addEventListener(t, n) : e.attachEvent("on" + t, n), o.setAttribute("data-cm-hook", "1"))
        }()
}, function(e, t, n) {
    e.exports = n(0)
}]);


    </script>