My Mailchimp form doesn't submit when I click on the 'send' button. It only submits when I remove the javascript, but then I will be forwarded to the mailchimp signup page: http://example.us6.list-manage.com/subscribe/post
I don't want that, because I want the Ajax functionally to keep in tact. So if the user enters an email address and clicks on 'send' he need to get the message that he is subscribed to the newsletter without leaving the page.
Please see this 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');}});});