-
-
Save itgoeslikethis/2351331 to your computer and use it in GitHub Desktop.
Subscribing to a Campaign Monitor list using AJAX and a really basic animation on success
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 1. Take your Campaign Monitor subscribe form as generated from within your account: --> | |
<form action="http://myaccount.createsend.com/t/r/s/aljhk/" method="post" id="subForm"> | |
<div> | |
<label for="name">Name:</label><br /><input type="text" name="cm-name" id="name" /><br /> | |
<label for="aljhk-aljhk">Email:</label><br /><input type="text" name="cm-aljhk-aljhk" id="aljhk-aljhk" /><br /> | |
<input type="submit" value="Subscribe" /> | |
</div> | |
</form> | |
<!-- 2. Add a success message --> | |
<div id="successMessage" style="display:none;"> | |
Thanks for signing up! | |
</div> | |
<!-- 3. And some JavaScript --> | |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> | |
<script type="text/javascript"> | |
$(function () { | |
$('#subForm').submit(function (e) { | |
e.preventDefault(); | |
$.getJSON( | |
this.action + "?callback=?", | |
$(this).serialize(), | |
function (data) { | |
if (data.Status === 400) { | |
alert("Error: " + data.Message); | |
} else { // 200 | |
// #subForm picks the element which has | |
// an id of subForm (ie our form), and | |
// then we slide it up, over 400 milliseconds. | |
$('#subForm').slideUp(400, function() { | |
// #successMessage picks out the div that | |
// contains the success message so that we | |
// can animate it | |
$('#successMessage').slideDown(); | |
}); | |
} | |
}); | |
}); | |
}); | |
</script> | |
<!-- 4. You have an AJAX subscribe form! --> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is great.
I've updated this to display a nicer error message as well by adding a div above the successMessage div:
And then:
This works great for me in Safari and Firefox. BUT in Chrome I get nothing displaying when I click submit.
The error console reveals this error message:
The page at '...' was loaded over HTTPS, but ran insecure content from ....: this content should also be loaded over HTTPS.
Any ideas how to alter the code to make Chrome happy?