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&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.");
}
}
});
}
});