我是编码方面的新手,但我尝试通过使用jquery向div容器中添加一个类来提交表单后向您显示订阅消息表示感谢,该类保存该表单以使用display:none将其隐藏谢谢你的信息。我正在使用以下代码:
$('#mc-embedded-subscribe-form').submit(function(){
var element = document.getElementById("newsletterform");
element.classList.add("success");
element.innerHTML += '<div class="thanks">Thanks for Subscribing!</div>';
$('#mc-embedded-subscribe-form').submit();
});
这是HTML
<html>
<head>
<style>
.success{
group_input{
display:none;
}
}
</style>
</head>
<body>
<iframe name="votar" style="display:none;"></iframe>
<div id="newsletterform">
<form action="{{ settings.mailchimp_form_action }}" method="post" name="mc-embedded-subscribe-form" target="votar">
<div class="group_input">
<input type="text" value="" name="COMPANY" class="" id="mce-COMPANY">
<input type="email" name="EMAIL" placeholder="{{ settings.news_input }}" /><button class="btn" type="submit">{{settings.news_actiontext}}</button>
</div>
</form>
</div>
</body>
这将隐藏表单并显示“谢谢”消息,但不会提交电子邮件地址。就像电子邮件在发布到操作网址之前被剥离了一样。
我还尝试将
$('#mc-embedded-subscribe-form').submit();
移动到var声明上方,并使用电子邮件地址提交表单,但不显示“谢谢”消息。我究竟做错了什么?
谢谢!
最佳答案
尝试通过ajax提交表单:
$("form#mc-embedded-subscribe-form").submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $(this).serialize(), // serializes the form's elements.
success: function(data)
{
var element = document.getElementById("newsletterform");
element.classList.add("success");
element.innerHTML += '<div class="thanks">Thanks for Subscribing!</div>';
}
});
});
关于jquery - jQuery事件附加到提交按钮时,表单未发布,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/56591765/