Skip to content

Instantly share code, notes, and snippets.

@itgoeslikethis
Forked from jdennes/LICENSE
Created April 10, 2012 13:23
Show Gist options
  • Save itgoeslikethis/2351331 to your computer and use it in GitHub Desktop.
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
<!-- 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! -->
@pburtchaell
Copy link

Nice!

@nadiaa
Copy link

nadiaa commented May 23, 2014

This is great.
I've updated this to display a nicer error message as well by adding a div above the successMessage div:

div id="errMsg"

And then:

                            $(function () {
                                $('#subForm').submit(function (e) {
                                    e.preventDefault();
                                    $.getJSON(
                                        this.action + "?callback=?",
                                        $(this).serialize(),
                                        function (data) {
                                            if (data.Status === 400) {
                                                errMsg=("Error: " + data.Message);
                                                $("div#errMsg").html(errMsg);
                                            } else { // 200
                                                errMsg=("");
                                                $("div#errMsg").html(errMsg);
                                                // #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();
                                                });
                                        }
                                    });
                                });
                            });

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?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment