Mailform不会提交

时间:2013-08-17 16:21:26

标签: javascript json html5 mailchimp mail-form

单击“发送”按钮时,我的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');}});});

0 个答案:

没有答案