1

I'm using the below code to Ajaxify a mailchimp signup form, therefore stopping users from being redirected away from the site.

Below you can see my markup and js, which is working great. However, on some pages I require 2 sign up forms (to different lists) and in this case the second form does not work. I think the js is only able to target the first of the #subscribe-form elements on any given page.

Currently my workaround is to repeat (copy) the js but change the #subscribe-form element to #subscribe-form-two - this works but is a lot of code to repeat. Can the js be edited to ensure it works for both?

Thanks!

HTML

<form id="subscribe-form" action="http://naturafit.us12.list-manage.com/subscribe/post-json?u=26d74b968c283d7ca78eeb75d&amp;id=4882d6b03a" method="get">
    <input type="text" placeholder="Full name" value="" name="FULLNAME">
    <input type="email" placeholder="Email address" value="" name="EMAIL" >
    <input type="submit" value="Sign up" name="subscribe">
    <div id="subscribe-result"></div>
</form>

JS

$(document).ready(function(){
    ajaxMailChimpForm($("#subscribe-form"), $("#subscribe-result"));
    // Turn the given MailChimp form into an ajax version of it.
    // If resultElement is given, the subscribe result is set as html to
    // that element.
    function ajaxMailChimpForm($form, $resultElement){
        // Hijack the submission. We'll submit the form manually.
        $form.submit(function(e) {
            e.preventDefault();
            if (!isValidEmail($form)) {
                var error =  "A valid email address must be provided.";
                $resultElement.html(error);
                $resultElement.css("color", "red");
            } else {
                $resultElement.css("color", "white");
                $resultElement.html("Subscribing...");
                submitSubscribeForm($form, $resultElement);
            }
        });
    }
    // Validate the email address in the form
    function isValidEmail($form) {
        // If email is empty, show error message.
        // contains just one @
        var email = $form.find("input[type='email']").val();
        if (!email || !email.length) {
            return false;
        } else if (email.indexOf("@") == -1) {
            return false;
        }
        return true;
    }
    // Submit the form with an ajax/jsonp request.
    // Based on http://stackoverflow.com/a/15120409/215821
    function submitSubscribeForm($form, $resultElement) {
        $.ajax({
            type: "GET",
            url: $form.attr("action"),
            data: $form.serialize(),
            cache: false,
            dataType: "jsonp",
            jsonp: "c", // trigger MailChimp to return a JSONP response
            contentType: "application/json; charset=utf-8",
            error: function(error){
                // According to jquery docs, this is never called for cross-domain JSONP requests
            },
            success: function(data){
                if (data.result != "success") {
                    var message = data.msg || "Sorry. Unable to subscribe. Please try again.";
                    $resultElement.css("color", "red");
                    if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
                        message = "You're already subscribed. Thank you.";
                        $resultElement.css("color", "#00ccbd");
                    }
                    $resultElement.html(message);
                } else {
                    $resultElement.css("color", "#00ccbd");
                    $resultElement.html("Thank you! You must confirm the subscription in your inbox.");
                }
            }
        });
    }
});
dungey_140
  • 2,602
  • 7
  • 34
  • 68

0 Answers0