单击“发送”按钮时,我的Mailchimp表单不会提交。 它只在我删除javascript时提交,但随后我将被转发到mailchimp注册页面:http://example.us6.list-manage.com/subscribe/post
我不希望这样,因为我希望Ajax在功能上保持一致。 因此,如果用户输入电子邮件地址并点击“发送”,他需要在不离开页面的情况下收到他订阅时事通讯的消息。
请参阅此example
HTML:
<!DOCTYPE html>
<html>
<head>
<script src=//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js></script>
<meta charset=utf-8 />
<title>Mailchimp newsletter</title>
</head>
<body>
<form class="myform" action="http://example.us6.list-manage.com/subscribe/post" method="POST">
<input type="hidden" name="u" value="47cdcabfbe6291e5cdaf8d06e">
<input type="hidden" name="id" value="6d2a3690d2">
<input type="email" id="email" name="email" value="" placeholder="your email address please" required>
<input type="submit" value="Send" name="submit" id="submit-btn">
</form>
<div id=message></div>
</body>
</html>
css:
#message{position:absolute;width:185px;right:0;top:30px;color:red}
的javascript:
-$(document).ready(function(){$('#submit-btn').on('click',function(e){e.preventDefault();var email=$('#email').val(),validate=new RegExp(/^(("[\w-+\s]+")|([\w-+]+(?:\.[\w-+]+)*)|("[\w-+\s]+")([\w-+]+(?:\.[\w-+]+)*))(@((?:[\w-+]+\.)*\w[\w-+]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][\d]\.|1[\d]{2}\.|[\d]{1,2}\.))((25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\.){2}(25[0-5]|2[0-4][\d]|1[\d]{2}|[\d]{1,2})\]?$)/i);if(!email){
$('#message').text('Please enter your email address');return;}
if(validate.test(email)){
$.ajax({
type:"GET",
url: "http://example.us6.list-manage2.com/subscribe/post-json?c=?",
data: $form.serialize(),
dataType:'json',
contentType: "application/json; charset=utf-8",
success:function(data){$('#message').text(data['message']);if(data['success']){}}});}else{$('#message').text('Your email address seems to be invalid');}});});