Skip to content

Instantly share code, notes, and snippets.

@mhgbrown
Created February 21, 2017 17:31
Show Gist options
  • Save mhgbrown/d8e76604be1700c2f94c1c10fbe88869 to your computer and use it in GitHub Desktop.
Save mhgbrown/d8e76604be1700c2f94c1c10fbe88869 to your computer and use it in GitHub Desktop.
AJAX Submission of Mailchimp Form with Internationalization; Uses jQuery
var SUCCESS_MESSAGES = {
'en': {
'complete the subscription': 'Confirm the subscription in your inbox',
'default': 'Confirm the subscription in your inbox'
},
'de': {
'complete the subscription': 'Bestätigen Sie das Abonnement in Ihrer Inbox',
'default': 'Bestätigen Sie das Abonnement in Ihrer Inbox'
}
}
var ERROR_MESSAGES = {
'en': {
'contain a single': 'Your email must contain an @',
'enter a value': 'Your email can\'t be blank',
'the portion after': 'Your email looks incorrect',
'the portion before': 'Your email looks incorrect',
'looks fake or invalid': 'Your email looks incorrect',
'already subscribed': 'Your email is already subscribed',
'default': 'Your subscription didn\'t go through. Try again.'
},
'de': {
'contain a single': 'Ihre E-Mail muss eine @',
'enter a value': 'Ihre E-Mail kann nicht leer sein',
'the portion after': 'Ihre E-Mail-Adresse ist falsch',
'the portion before': 'Ihre E-Mail-Adresse ist falsch',
'looks fake or invalid': 'Ihre E-Mail-Adresse ist falsch',
'already subscribed': 'Ihre E-Mail ist schon abonniert',
'default': 'Ihr Abonnement ging nicht durch. Versuch es noch einmal.'
}
};
function getMessage(target, where) {
for (var piece in where) {
if(target.indexOf(piece) >= 0) {
return where[piece];
}
}
return where['default'];
}
// return an appropriate success message
function getSuccessMessage(message, lang) {
return getMessage(message, SUCCESS_MESSAGES[lang]);
}
// return an appropriate error message
function getErrorMessage(message, lang) {
return getMessage(message, ERROR_MESSAGES[lang]);
}
function handleSubmitSuccess($form, data, message, xhr) {
var $message = $form.find('.message');
var $input = $form.find('input[type="email"]');
var lang = $form.hasClass('de') ? 'de' : 'en';
if(data.result === 'error') {
$form.addClass('error');
$message.text(getErrorMessage(data.msg, lang));
$input.focus();
return;
}
$form.addClass('ok');
$message.text(getSuccessMessage(data.msg, lang));
$input.blur();
$form.focus();
}
function handleSubmitError($form) {
var $message = $form.find('.message');
var $input = $form.find('input[type="email"]');
var lang = $form.hasClass('de') ? 'de' : 'en';
console.error('Submit error', arguments)
$form.addClass('error');
$message.text(getErrorMessage('default', lang));
$input.focus();
}
function handleSubmitTeardown($form) {
var $submit = $form.find('input[type="submit"]');
$submit.prop('disabled', false);
}
function handleSubmit(event) {
var $form = $(event.target).closest('form');
var $submit = $form.find('input[type="submit"]');
var $input = $form.find('input[type="email"]');
var url = $form.attr('action');
var requestData = {};
event.preventDefault();
$.each($form.serializeArray(), function (index, item) {
requestData[item.name] = item.value;
});
$submit.prop('disabled', true);
$form.removeClass('ok error');
$.ajax({
url: url,
data: requestData,
dataType: 'jsonp'
})
.done($.proxy(handleSubmitSuccess, this, $form))
.fail($.proxy(handleSubmitError, this, $form))
.always($.proxy(handleSubmitTeardown, this, $form));
$input.focus();
}
function handleFocus(event) {
var $target = $(event.target);
var $form = $target.closest('form');
if($form.hasClass('ok')) {
$form.removeClass('ok');
}
}
function init() {
var $form = $('.newsletter form');
var $input = $('.newsletter input[type="email"]');
$form.on('submit', handleSubmit);
$input.on('focus', handleFocus);
}
$(init);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment