[英]Submit Embedded Mailchimp Form with Javascript AJAX (not jQuery)
我一直在尝试使用AJAX提交嵌入式Mailchimp表单但不使用jQuery。 很明显,我并没有这样做,因为我一直在结束“来吧,沃森,来吧!游戏正在进行中。” 页:(
对此有任何帮助将非常感激。
form action
已被更改以替换post?u=
with post-json?u=
and &c=?
已添加到操作字符串的末尾。 这是我的js:
document.addEventListener('DOMContentLoaded', function() {
function formMailchimp() {
var elForm = document.getElementById('mc-embedded-subscribe-form'),
elInputName = document.getElementById('mce-NAME'),
elInputEmail = document.getElementById('mce-EMAIL'),
strFormAction = elForm.getAttribute('action');
elForm.addEventListener('submit', function(e) {
var request = new XMLHttpRequest();
request.open('GET', strFormAction, true);
request.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var resp = JSON.parse(request.responseText);
request.send(resp);
} else {
console.log('We reached our target server, but it returned an error');
}
};
request.onerror = function() {
console.log('There was a connection error of some sort');
};
});
}
formMailchimp();
});
此外,我预计不可避免的“为什么你不只是使用jQuery”评论。 没有涉及这个项目的细节,jQuery不是我能够在代码中引入的东西。 对不起,但这是一个vanilla javascript。 兼容性仅适用于非常现代的浏览器。
非常感谢您提供的任何帮助!
几天前我遇到了完全相同的问题,事实证明,本机JavaScript上的MailChimp文档非常稀少。 我可以与你分享我提出的代码。 希望你能从这里建造!
简化的HTML表单:我从MailChimp表单构建器获取了from action并添加了“post-json”
<div id="newsletter">
<form action="NAME.us1.list-manage.com/subscribe/post-json?u=XXXXXX&id=XXXXXXX">
<input class="email" type="email" value="Enter your email" required />
<input class="submit" type="submit" value="Subscribe" />
</form>
</div>
JavaScript:避免跨源问题的唯一方法是创建一个脚本并将其附加到标题中。 然后在“c”参数上发生回调。 (请注意,目前还没有电子邮件地址验证)
function newsletterSubmitted(event) {
event.preventDefault();
this._form = this.querySelector("form");
this._action = this._form.getAttribute("action");
this._input = this._form.querySelector("input.email").value;
document.MC_callback = function(response) {
if(response.result == "success") {
// show success meassage
} else {
// show error message
}
}
// generate script
this._script = document.createElement("script");
this._script.type = "text/javascript";
this._script.src = this._action + "&c=document.MC_callback&EMAIL=" + this._input;
// append script to head
document.getElementsByTagName("head")[0].appendChild(this._script);
}
var newsletter = document.querySelector("#newsletter")
newsletter.addEventListener("submit", newsletterSubmitted);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.